vue | 易学教程

vue项目的省市三级联动

阅读更多关于 vue项目的省市三级联动

1.安装插件 npm install v - distpicker - - save 2.在需要引入联动的组件中引入并使用 <div class="liandong"> <div class="city" @click="toAddress">{{city}}</div> <v-distpicker type="mobile" @selected='selected' v-show="addInp" style="width: 300px"> </v-distpicker> <div class="mask" v-show="mask"></div></div> <script> import VDistpicker from 'v-distpicker'export default { name: 'join_page', components: { VDistpicker }, data () { return { city:'请选择地区', addInp :false, mask:false } }, methods: {// 点击弹出三级联动 toAddress(){ this.mask = true; this.addInp = true }, // 省市区三级联动 selected(data){ this.mask =false; this

vue知识点

阅读更多关于 vue知识点

1、计算属性缓存（computed）vs方法（methods）计算属性 <div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } 方法 <p>Reversed message: "{{ reversedMessage() }}"</p> methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } 我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果

VUE实现Studio管理后台（五）：手风琴式折叠组件（Accordion）

阅读更多关于 VUE实现Studio管理后台（五）：手风琴式折叠组件（Accordion）

作为一个有目标的人（目标是做一个好用的Bootstrap可视化编辑器，第一个版本已经实现，演示地址： https://vular.cn/rxeditor/ ，代码地址： https://github.com/vularsoft/rxeditor ），工作比较积极，思维也比较活跃，睡眠相对较少。今早6:30就起床了，吃早饭前，实现了一个手风琴式折叠组件，具体效果如下：一般情况，这样的控件有两种表现形式： 1、排他展开，也就是一次只有一个项目展开，其它闭合，类似QQ的好友分组。 2、随意展开，不拍它，可以同时展开多个只实现第二种方式，相对比较容易，每个子项目控制自己的状态就可以，不用跟其它项目交互。我的目标式做一个控件，两种方式都支持，通过属性参数multiple确定是否可以同时展开多个。添加新的文件跟目录：跟上次实现Tabs控件一样，有一个通用的子组件：CollapsibleItem，基于这个组件实现折叠组件：SimpleAccordion。如果以后像实现其它风格的折叠组件，可以共用CollapsibleItem组件。根据我个人的习惯，首先设想这个组件的使用方式，应该是这样： <SimpleAccordion :multiple='true'> <CollapsibleItem> <template #heading>标题1</template> <template

Vue-过滤器

阅读更多关于 Vue-过滤器

Vue允许自定义过滤器，可被用于一些常见的文本格式化，可用在两个地方（双花括号插值和v-bind表达式），过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号（|）指示数据格式化，可复用 //支持多个过滤器，可串联 {{ myname | myfilter | ... }} //全局写法 Vue.filter("myfilter", (data) => { return data.substring(0, 1) }) 可传递参数 {{ myname | myfilter('111','222') }} //全局过滤器写法 Vue.filter("myfilter", (data1,data2,data3) => { // myname为data1，'111'为data2，'222'为data3 console.log(data2,data3) return data1.substring(0, 1) }) //局部过滤器写法 filters: { myfilter: function (data) { return data.substring(0, 1) } } 来源： CSDN 作者： brittany529 链接： https://blog.csdn.net/wuyanhong529/article/details/104689305

vue模块化(echart+element ui)

阅读更多关于 vue模块化(echart+element ui)

最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置的是npm 打包命令和引入vue-route vue的路由文件和element ui 文件下面这个是引入echart.js 文件, 基本资料就这些。首先我们开始构建一个vue-cli项目 1.首先node环境（这里就不多啰嗦了） 2.执行vue-cli命令 npm install --global vue-cli （这里你可以全局装，也可以装到项目路径） 3.检查下 vue是否装好 vue -V （能看到版本号就是安装成功了） 4.用vue新建一个项目 vue init webpack my-project ESLint规范建议开启，加强代码规范（中间遇到 ESLint可以自己选择开启或者关闭） 5.弄好项目后 npm install 下初始化下包 6.最后进入项目路径执行 npm run dev 命令如果能看到页面证明项目搭建成功更加详细的配置请参考 http://www.cnblogs.com/pearl07/p/6247389.html 上面已经完成了vue-cli项目的基本构建 vue+webpack已经集成了这时候我们需要构建两个页面看下路由功能

Vue-Router 源码分析(二) 设计思想及代码结构

阅读更多关于 Vue-Router 源码分析(二) 设计思想及代码结构

根据VueRouter的执行流程，可以通过这三个步骤来理解它的设计思想: 第一步 :我们new VueRouter创建VueRouter实例的时候会通过深度遍历把传入的router属性对应的数组给解析一下，保存到一个Map中，每个Map对应router的一个元素，我们称之为路由记录，解析的时候会给每个路由记录增加一个正则表达式，用于<vuerouter-link>组件在渲染时查找哪个路由记录可以与之匹配第二步 :解析<router-link></router-link>组件的时候首先获取名为to的props(例如<router-link to="/login"><a>登陆</a></router-link>里的to属性)，然后会遍历第一步Map里的每个记录(路由记录)，并用路由记录中的正则去匹配这个to值，看看该正则是否能匹配，如果能匹配则表示可以渲染这个路由记录对应的组件了，然后通过Vue内部的$createElement全局函数渲染一个原生DOM标签(默认为a标签，可以通过<router-link/>组件的tag这个props去修改它)，渲染后会在这个DOM对象上绑定一个click事件，当click事件触发时，会调用VueRouter实例的push()方法去修改路由, 注意，VueRouter是通过click事件来触发路由的，不是通过a的href属性来触发

vuex 中模块化开发的一些知识

阅读更多关于 vuex 中模块化开发的一些知识

index.html <!doctype html> <html lang="en"> <head> <title>Title</title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> </head> <body> <div id="app"></div>   <script src="https://code.jquery

Vuex的干货复习

阅读更多关于 Vuex的干货复习

概念： vuex是vue配套的公共数据管理工具，它可以把一些共享的数据，保存到vuex中，方便整个程序中的任何组件直接获取或修改我们的公共数据。 vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组件传值了，如果组件的数据不需要共享，此时，这些不需要共享的私有数据，没有必要放到vuex中 vuex是一个全局的共享数据存储区域，就相当于是一个数据的仓库配置vuex步骤 1.运行cnpm i vuex -S 2.导入包 import Vuex from ‘vuex’ 3.注册vuex到vue中 Vuex.use(Vuex) 4.new Vuex.Store({ state:{ //可以把state想象成组件中的data,专门用来存储数据 //如果在组件中，想要访问 store中的数据，只能通过this.$store.state.***来访问 count:0 }, mutations:{ 如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对应的数据，不推荐直接操作state中的数据，因为万一导致数据的紊乱，不能快速定位到错误原因，因为，每个组件都可能有操作数据的方法 add(state){ //记住： state第一个值已经固定死了，就是我们要操作的数据 //注意

vue生命周期简概

阅读更多关于 vue生命周期简概

什么是生命周期：简单的讲就是数据驱动页面，页面在更新的过程就是生命周期。在这个过程中我们可以写我们的逻辑。什么是生命周期钩子：生命周期钩子就是指的各个生命周期的回调函数 beforeCreate 组件属性刚创建完，组件计算属性之前例如data、watcher等 created 实例创建完成后被立即调用，属性已绑定，但是挂载阶段还没开始，$el 属性目前尚不可用 beforeMount 挂载开始之前被调用 mounted 挂载之后被调用，el 被新创建的 vm.$el 替换了 beforeUpdate 数据更新时调用，适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 updated 数据更改重新渲染和打补丁，在这之后会调用该钩子。 activated 被 keep-alive 缓存的组件激活时调用 deactivated 被 keep-alive 缓存的组件停用时调用 beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed 销毁后调用 errorCaptured 当捕获一个来自子孙组件的错误时被调用。 < ! DOCTYPE html > < html > < head > < title > < /title > < script type = "text/javascript" src = "https://cdn

vue小案例购物车计算本

阅读更多关于 vue小案例购物车计算本

购物车数据 [ { "isSelected" : false , "productName" : "深入浅出xx" , "productInfo" : "颜色：xx学习" , "productPrice" : 57.8 , "productCount" : 3 } , { "isSelected" : true , "productName" : "深入浅出xx" , "productInfo" : "颜色：xx学习" , "productPrice" : 57.8 , "productCount" : 3 } ] 在这里插入代码 < body > < div id = "app" > < div class = "container" > < div class = "row" > < table class = "table table-bordered" > < caption class = "text-center h2 text-danger" > 珠峰购物车 < / caption > < tr > < td > 全选 < input type = "checkbox" v - model = "checkAll" @change = "changeAll" > < / td > < td > 商品 < / td > < td > 单价 < / td > < td

订阅 vue