Title

# vue ## 安装 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/vue%E5%AE%89%E8%A3%85.png) ## MVVM ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/MVVM.png) ## 模板语法 ### Vue的基本使用 1. 引入Vue.js库文件 2. 使用vue语法处理数据 3. 提供填充数据的标签 4. 把vue提供的数据填充到标签中 ```html

``` ### 差值表达式在mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 Mustache：{{}} ```html

{{message}},xqz

``` ### 指令 - 本质是自定义属性 - 格式：v-开始 #### v-cloak - 作用：解决插值表达式存在闪动问题 - 用法： 1. 提供css样式 [v-cloak]{diaplay=none}//属性选择器 2. 在插值表达式所在的标签中添加v-cloak指令 - 原理：先通过样式隐藏内容，然后再内存中进行值的替换，替换好之后再显示最终的结果 ```html

``` #### 数据绑定 ##### 数据响应式 - 概念：数据的变化导致页面内容的变化，vue会监听属性的变化 ##### 数据绑定 - 将标签的内容与数据绑定 - 将数据填充到标签中 ##### v-once - 作用：编译一次，显示内容之后不再具有响应式功能 - 应用场景：如果显示的信息后续不需要再修改，可以提高性能 ##### v-text - 作用：填充纯文本 - 区别：没有闪动问题 ##### v-html - 作用：填充HTML片段，能解析html标签 - 区别：存在安全问题，所以只能使用本网站的数据 ##### v-pre - 作用：填充原始信息 - 区别：能跳过编译过程 ```html

``` ##### 双向数据绑定 - MVVM设计思想（model数据-view模板视图-View-Model控制逻辑（Vue）） - DOM Listener影响数据（事件监听） - Data Bindings影响视图（数据绑定） - v-model - 表单的变化引起数据的变化，视图中与之相关联的数据会重新渲染 ```html

``` - v-model本质原理 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E5%8E%9F%E7%90%86.png) ```html

或者

``` #### 事件绑定 ##### v-on:||@ ```html

``` ##### 事件函数参数绑定 1. 如果事件直接绑定函数名称不传参（==不写括号==），那么默认会传递事件对象做为事件函数的第一个参数 2. 如果传的是变量，会去data属性里找，没有则报错 3. 如果事件绑定函数传参，那么事件函数作为最后一个参数，以$event形式进行显示传递 ```html

``` ##### 事件修饰符 - 阻止冒泡 @click.stop='函数名' - 组织默认行为 @click.prevent='函数名' 注意：阻止a标签的默认行为：@click.prevent不用添加函数direv ##### 按键修饰符 - enter触发 @keyup.enter='函数名' - delete触发 @keyup.delete='函数名' - 自定义按键触发 Vue.config.keyCodes.a=65; - once 点击第一次有反应 #### 属性绑定将==标签的属性==和数据绑定 - v-bind:属性名||:属性名 ```html

百度

``` #### 样式绑定 ##### class样式处理 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Aclass.png) - 对象语法 css的class属性名：属性值（data对象中的属性名）值为true或false ```html

测试

``` - 数组语法 data对象中的属性名属性值为css的class属性名 ```html

``` - 对象和数据语法结合与简化提高可读性 ==注意==：默认的class会保留 ```html

数组和对象的结合

//结合使用

//使用对象

``` ##### style样式处理 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-bind%E7%BB%91%E5%AE%9Astyle.png) - 对象语法 ```html

``` - 数组语法数组元素是多个对象，覆盖关系 ```html

``` #### 分支循环结构 ##### 分支结构 - v-if - v-else - v-else-if - v-show:切换显示与否的频率非常高的时候使用，可以提升效率原理：控制display是none还是block - ==注意==：v-if控制元素是否渲染到页面（dom元素的增加或删除） v-show控制元素是否显示（已经渲染到了页面，只是样式的显示与否） ```html

优秀

良好

一般

比较差

测试v-show

``` ##### 循环结构 - v-for遍历数组 - 遍历数组元素

- 遍历元素和索引

```html

水果列表

{{item}}
{{item+'------'+index}}
{{item.cname+'------'+index}} {{item.ename+'------'+index}}

``` - key的作用 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/key%E7%BB%84%E4%BB%B6%E5%B1%9E%E6%80%A7.png) 1. 帮助vue区分不同元素，可以提高性能 2. 如果两个key不一样，能够让vue的虚拟dom不去复用原来的元素，如果key是用的item，那么需要保证item的唯一性 ```html

用户账号用户邮箱

``` ```html

//没有提供id，则用key=‘index’，唯一的就可以 ``` - v-for遍历对象 ```html

``` - v-if和v-for结合使用 ```html

``` ## Vue常用特性 ### 表单操作 #### 基于Vue的表单操作 - input 双向数据绑定值绑定 ```html Title

宁的爱好是{{hobbies}}

``` - textarea 双向数据绑定 - select 给option value值，select双向数据绑定 ```html Title

``` - radio 给表单value值，双向数据绑定 ```html Title

男女

``` ==注意==： 1. 当绑定了同一个v-model时，可以把name省略，这样也是互斥的（单选） - checkbox ```html Title

篮球足球乒乓球羽毛球

宁的爱好是{{hobbies}}

``` 给表单value值，双向数据绑定 - 注意：提交按钮submit取消默认行为，增加点击事件用ajax传递数据 ```html

``` #### 表单域修饰符 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/v-model%E4%BF%AE%E9%A5%B0%E7%AC%A6.png) - v-model.number 转为数值 - trim 去掉开始和结尾的空格,不会去掉中间的 - lazy 把双向绑定中的input事件切换为change事件，input是在输入时一直触发，change是在失去焦点时才更新数据 ```html

``` ### 自定义指令 #### 基本使用 Vue.directive('指令的名字',{ 钩子函数 }) ```html

``` ==注意==:focus()函数只在inserted中生效，而在bind中不生效 - `bind` ：指令第一次绑定到元素上时调用 - `inserted`：表示元素在插入到DOM中的时候，会执行inserted函数，只执行一次 - `update` ：VNode更新的时候调用，可能会调用多次页面上的任何一个元素想要显示，首先需要浏览器的渲染引擎将元素加载到内存中形成DOM树，也就是说执行bind函数的时候，元素还没有插入到内存中去，因为，一个元素只有插入DOM之后，才会获得焦点。所以说，在bind函数中执行el.focus()焦点事件的时机是不对的；同理可得，==凡是与js样式有关的需在bind函数中执行`（如：el.style.color = 'blue'）`，而与js行为有关的，需在inserted函数中执行== #### 带参数的自定义指令 binding获取指令的参数值 ```html

``` #### 局部指令 - 在Vue的实例中添加额外的属性directive - 只能在本组件中使用 ```html

``` ### 计算属性 - 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁 - 在Vue实例中添加computed属性，直接在插值表达式中调用函数名 - ==注意==：计算属性的数据是基于data的，data变化会引起计算属性的变化 ```javascript computed: { reserveString:function(){ return this.msg.split('').reverse().join(''); } }, ``` ==计算属性和方法的区别== - 计算属性是基于他们的依赖进行缓存的，如果依赖不变则使用的是缓存的结果，依赖变化才重新计算 - 方法不存在缓存 ==注意==： 1. 计算属性也有set和get方法，因为一般不使用set方法所以会将set方法省略，直接写get方法 ### 过滤器 - 作用：格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定格式 - 自定义过滤器： ```javascript Vue.filter{ "过滤器名称"，function(value){ //业务逻辑 } } ``` - 过滤器使用 - 全局和局部，级联使用 ```html

测试数据

``` - 带参数的过滤器 ```html

``` ### 侦听器 - 应用场景：数据变化时执行异步或开销较大的操作 - 数据一旦发生变化就通知侦听器所绑定的方法 - 一般用于监听v-model绑定的数据 - 用法： ```javascript watch: { //函数名和属性名一致，这样才知道监听的哪个属性 firstName: function (val) { //val表示的是当前数据的最新值 this.fullName = val + '' + this.lastName; }, lastName: function (val) { this.fullName = this.firstName + '' + val; } }, ``` ### 生命周期 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/Vue%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.png) - 挂载（初始化相关属性） - beforeCreate：在实例初始化后，数据观测和事件配置之前被调用 - created：在实例创建完成后立即被调用 - beforeMount：在挂载开始之前被调用 - mounted：el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子注意：当这个函数调用代表初始化完成，页面中模板内容存在，可以填充数据 - 更新（元素或组件的变更操作） - beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前 - ubdated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子 - 销毁（销毁相关属性） - beforeDestroy：实例销毁之前调用 - destroyed：实例销毁之后调用 ### 数组相关API #### 变异方法（修改原有数组）作用：使得数组数据也具有响应式的特性 - push() - pop() - shift() - unshift() - splice() - sort() - reverse() #### 替换数组（生成新的数组） ==注意==：需要赋值给原始的数组 - filter() - concat() - slice() #### 数组索引 || 对象属性直接使用数组索引的方法没有响应式的特性，所以Vue提供以下Api Vue.set(vm.items,indexOfitem,newValue) || vm.$set(vm.items,indexOfitem,newValue) 1. 参数一表示要处理的数组名称 2. 参数二表示要处理的数字索引 3. 参数三表示要处理的数组的值 ```html

{{item}}

``` ## 组件化开发 ### 组件化开发思想 Web Components通过创建封装好功能的定制元素解决组件化规范问题 ### 提供的组件 - component 根据绑定的is属性来显示组件 ```html //显示自定义的keji组件 ``` ### 组件注册 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%AD%A5%E9%AA%A4.png) ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6%E6%AD%A5%E9%AA%A4.png) - 全局组件：可以在多个vue实例中使用 ```javascript Vue.component('button-counter',{ data:function(){ return{ count:0 } }, template:'', methods: { handle:function(){ this.count++; } }, }) ``` - 局部组件：只能在父组件中使用 ```javascript

var HelloWorld = { data: function () { return { msg: 'HelloWorld' } }, template: '

' } var vm = new Vue({ el: '#app', data: {}, //局部组件 components: { 'hello-world': HelloWorld, 'hello-tom': HelloTom, 'hello-jerry': HelloJerry } }) ``` ==注意==： 1. data是函数不是对象，函数可以形成一个闭包环境使得每一个组件都有独立的数据 2. 组件模板必须是单个根元素，不能有兄弟关系 3. 组件模板内容可以是模板字符串 4. 组件命名方式可以是-或者驼峰命名，驼峰命名只能用在模板字符串的其他组件中，但是在普通标签模板中必须使用-的方式。 ### 模板的分离写法 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E6%A8%A1%E6%9D%BF%E5%88%86%E7%A6%BB%E7%9A%84%E5%86%99%E6%B3%95.png) ```html Title

``` ### 组件的数据存放问题 1. 数据存放在组件自己的data属性中，组件的data属性时候一个函数，返回一个对象数据 2. 不能使用vue实例的数据 ```html Title

``` ### Vue调试工具：vue-devtools ### 组件通信 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6.png) #### 父组件传子组件 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95.png) - 父组件传值在父组件中给对应的子组件绑定属性（注意要用v-bind才能绑定父组件中data属性里的值，否则传递的是字符串） ```html {{msg}}//静态方式 {{msg}}//动态绑定属性值，属性值写在父组件的data中 ``` - 子组件接受值 ```javascript Vue.component('menu-item', { props: ['title','content'],//名称和父组件中一致,如果接受的是驼峰形式，在使用时改为-，除非是在字符串模板中 data: function () { return { msg: '子组件本身的数据' } }, template: '

' }) ``` ##### props数据验证 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/props%E6%95%B0%E6%8D%AE%E9%AA%8C%E8%AF%81.png) ```html Title

``` ##### props驼峰标识 1. v-bind不支持驼峰命名，只能用-连接 #### 子组件传父组件 1. 子组件通过this.$emit('事件名',参数)发射事件 2. 父组件监听子组件的事件 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6.png) #### 子组件和双向绑定 1. 子组件中不能双向绑定props中的值，虽然可以更改，但是不推荐这么做，因为props中的值应该来源于父组件，子组件没有权力自己去修改 2. 如果要绑定props中的值，要先用data返回一个对象，然后去绑定data中的数据 ```javascript data(){ return { dnum1:this.cnum1, dnum2:this.cnum2 } } ``` 3. 如果要将子组件输入框的值传递给父组件，首先将v-model拆分，v-bind绑定value来显示data中的值，@input绑定事件来修改data中的值，并在事件中添加this.$emit('num2-change',this.dnum2)来发射事件，父组件来监听事件 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%88%B6%E5%AD%90%E7%BB%84%E4%BB%B6%E7%BB%93%E5%90%88%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A.png) #### 兄弟组件 1. 原理：通过事件中心管理组件中的通信 2. 事件中心：var eventHub = new Vue() 3. 监听事件：eventHub.$on('事件名称',addTodo) 销毁事件：eventHub.$off('事件名称') 4. 触发事件：eventHub.$emit('事件名称',id) //事件名称与监听的一致 5. 销毁事件：hub.$off('事件名') ==步骤==： 1. 兄弟组件按钮绑定点击事件 2. 创建事件池 3. 在组件中给事件池中绑定事件，每一个事件的名字都不一样 4. 在点击事件中触发事件，也就是散发事件，到事件池中去触发一样的事件名的事件 ```html

父组件

``` ### 组件访问 #### 父组件直接访问子组件 1. 通过$children：不常用 ```javascript methods:{ btnClick(){ //访问子组件的methods this.$children[0].showMessage() //访问子组件的data console.log(this.$children[0].name) } } ``` 2.通过$ref：对象类型（默认为空） - 先在子组件上添加ref属性 - 然后通过this.$ref获取 ```vue methods:{ btnClick(){ console.log(this.$refs); } ``` #### 子组件直接访问父组件 1. 在子组件中使用this.$parent，但是一般不建议使用，因为这样会增加组件化开发的耦合度 ```javascript ccpn: { template: `#ccpn`, methods: { btnClick() { // 访问父组件 console.log(this.$parent.name); } } ``` #### 访问根组件 1. $root，即访问vue实例 ### 组件插槽 #### 基本使用 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/slot%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8.png) 1. 在组件中使用 2. 默认值写在标签中间 3. 如果有多个值，同时放入组件中替换时，一起作为替换元素作用：父组件向子组件传递模板内容 content ==注意==：子组件会预留一个位置，就是所谓的插槽来存放父组件在使用子组件时标签中的内容，插槽内容会随着content的改变而改变，如果content为空，则显示slot标签中的默认内容，有了就会覆盖默认内容 ```html

有bug//标签中的内容会替换默认值有一个bug发生

``` #### 具名插槽步骤： 1. 在模板字符串中给slot标签name值 2. 在父组件中使用时，给标签slot=“name”从而给对应的插槽赋值 ```html

666

``` - 渲染多条插槽赋值时 ```html ``` #### 作用域插槽 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E7%BC%96%E8%AF%91%E4%BD%9C%E7%94%A8%E5%9F%9F.png) 应用场景：父组件对子组件的内容进行加工处理,父组件替换子组中的标签，但是内容由子组件提供 ![](https://raw.githubusercontent.com/yzuxqz/pic-bed/master/notes-img/%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD%E7%9A%84%E4%BD%BF%E7%94%A8.png) 步骤： 1. 子组件中把插槽中的值作为属性传给父组件，当然子组件的数据也可以来自父组件 2. 父组件通过 slot-scope=‘自定义name'，name.子组件中绑定的属性，来获得子组件传来的值，这个值就是子组件中绑定的属性对应的值，==注意==要在

{{message}}

{{message}},xqz

{{firstName+ ' ' +lastName}}

{{firstName}} {{lastName}}

{{counter * 2}}

{{message}}

宁的爱好是{{hobbies}}

{{fruit}}

{{sex}}

宁的爱好是{{hobbies}}

我是标题

我是标题

{{cmovies}}

我是组件

第二个具名插槽

我是首页

我是profile组件

{{$route.query.name}}

{{$route.query.age}}

{{$route.query.height}}

{{$store.state.counter}}

{{$store.getters.moreAgeStu(15)}}

{{$store.state.a.num}}

{{$store.getters.aadd}}