Vue 自学

编程入门行业动态更新时间:2024-10-11 07:34:56

Vue 自学

自学方向
vue 基础
- 一、认识vue
- 二、Vue的基本使用步骤
- - 1、导入Vue.js库文件
  - 2、基本代码
- 三、插值表达式
- 四、v-cloak
- 五、数据填充相关指令
- - 1、v-text
  - 2、v-html
  - 3、v-pre
- 六、v-once
- 七、v-on:click 事件监听
- - 1、简写
  - 2、事件函数传参
  - 3、修饰符
  - - 3.1、.stop 阻止冒泡
    - 3.2、.prevent 阻止默认行为
    - 3.3、.once 执行一次
    - 3.4、.native
  - 4、按键修饰符
  - - 4.1、v-on:keyup
  - 5、自定义按键修饰符
- 七、补充
- - 1、@foucs 监听“获取焦点”
  - 1、@blur 监听“失去焦点”
- 八、属性绑定 v-bind
- - 1、基本使用
  - 2、动态绑定class(对象语法)
  - 3、动态绑定class(数组语法)
  - 4、class绑定的3个细节用法
  - 5、动态绑定style（对象语法）
  - 6、动态绑定style（数组语法）
- 九、条件判断
- - 1、v-if
  - 2、v-else
  - 3、v-if、v-else、v-else-if的使用
  - 4、v-show
- 十、循环遍历
- - 1、v-for遍历数组
  - 2、v-for遍历对象
  - 3、v-for使用过程添加key
  - 4、哪些数组方法是响应式的
- 十一、v-model 双向数据绑定
- - 1、v-model基本使用
  - 2、指令v-model 的原理
  - 3、v-model结合radio类型
  - 4、v-model结合checkbox类型
  - 5、v-model结合select类型
  - 6、v-model修饰符的使用
- 十二、自定义指令
- - 1、自动获得焦点
  - 2、带参数的自定义指令
  - 3、局部自定义指令
- 十三、计算属性 computed
- - 1、基本使用
  - 2、复杂操作
  - 3、计算属性的setter和getter
  - 4、计算属性与方法对比
- 十四、侦听器
- - 1、应用场景
- 十五、过滤器
- - 1、自定义过滤器
  - 2、使用过滤器
  - 3、带参数的过滤器
  - 4、使用过滤器格式化日期的案例
- 十六、Vue的MVVM
- 十七、Vue实例的生命周期
- - 1、官方文档
- 十八、组件化开发
- - 1、基本使用
  - 2、全局组件和局部组件
  - 3、父组件和子组件
  - 4、组件的语法糖（简写）注册方法
  - 5、组件模板的分离写法
  - 6、组件中的数据存放
- 十九、组件通信
- - 1、父组件向子组件传递数据
  - - 1.1、驼峰命名问题
  - 2、子组件向父组件传递数据
- 二十、组件访问
- - 1、父访问子
  - - 1.1、$children
    - 1.2、refs
  - 2、子访问父
  - - 2.1、访问父组件 $parent
    - 2.2、访问根组件 $root
- 二十一、slot 插槽
- - 1、基本使用
  - 2、具名插槽
  - 3、作用域插槽
  - - 3.1、作用域概念
    - 3.2、作用域插槽的使用
- 二十二、ES6的模块化
响应式原理
webpack
vue脚手架
路由vue-router
Promise
Vuex
axios

自学方向

自学视频：
官方文档：/

vue 基础

一、认识vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、Vue的基本使用步骤

1、导入Vue.js库文件

<script src="js/vue.js"></script>

2、基本代码

<div id="app"><p>{{ msg }}</p></div>

<script>const app = new Vue({el: '#app', // 用于挂载要管理的元素data: { // 定义数据message: 'Hello vue!'// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了}})
</script>

三、插值表达式

插值表达式,不仅仅可以直接写变量,也可以写简单的表达式

<div id="app"><h2>{{message}}</h2><h2>{{message}}, 李银河!</h2><!--mustache语法中,不仅仅可以直接写变量,也可以写简单的表达式--><h2>{{firstName + lastName}}</h2><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{counter * 2}}</h2>
</div>

<script>const app = new Vue({el: '#app',data: {message: '你好啊',firstName: 'kobe',lastName: 'bryant',counter: 100},})
</script>

四、v-cloak

解决插值表达式闪烁的问题
v-cloak指令的用法
1、提供样式
[v-cloak]{
display: none;
}
2、在插值表达式所在的标签中添加v-cloak指令
背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果

<style>[v-cloak] {display: none;}
</style>
<div id="app" v-cloak><h2>{{message}}</h2>
</div>

<script>// 在vue解析之前, div中有一个属性v-cloak// 在vue解析之后, div中没有一个属性v-cloaksetTimeout(function () {const app = new Vue({el: '#app',data: {message: '你好啊'}})}, 1000)
</script>

五、数据填充相关指令

1、v-text

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题

2、v-html

v-html指令用于将HTML片段填充到标签中，但是可能有安全问题

3、v-pre

v-pre用于显示原始信息

<div id="app"><div>{{msg}}</div><div v-text='msg'></div><div v-html='msg1'></div><div v-pre>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">/*1、v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题2、v-html指令用于将HTML片段填充到标签中，但是可能有安全问题3、v-pre用于显示原始信息*/var vm = new Vue({el: '#app',data: {msg: 'Hello Vue',msg1: '<h1>HTML</h1>'}});
</script>

六、v-once

让数据不响应式地发生改变
v-once的应用场景：如果显示的信息后续不需要再修改，你们可以使用v-once，这样可以提高性能。

<div id="app"><h2>{{message}}</h2><h2 v-once>{{message}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>

七、v-on:click 事件监听

1、简写

@click

<div id="app"><div>{{num}}</div><div><button v-on:click='num++'>点击</button><button @click='num++'>点击1</button><button @click='handle'>点击2</button><button @click='handle()'>点击3</button></div>
</div>

<script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0}, // 注意点： 这里不要忘记加逗号 // methods  中 主要是定义一些函数methods: {handle: function() {// 这里的this是Vue的实例对象+console.log(this === vm)//   在函数中 想要使用data里面的数据 一定要加this this.num++;}}});
</script>

2、事件函数传参

无参数，默认传递事件对象 e v e n t 有参数，则最后一个参数为事件对象 event 有参数，则最后一个参数为事件对象 event有参数，则最后一个参数为事件对象event

<div id="app"><div>{{num}}</div><div><!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 --><button v-on:click='handle1'>点击1</button><!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event --><button v-on:click='handle2(123, 456, $event)'>点击2</button></div>
</div>

<script type="text/javascript">var vm = new Vue({el: '#app',data: {num: 0},methods: {handle1: function(event) {console.log(event.target.innerHTML)},handle2: function(p, p1, event) {console.log(p, p1)console.log(event.target.innerHTML)this.num++;}}});
</script>

3、修饰符

3.1、.stop 阻止冒泡

<div v-on:click='handle0'><button v-on:click.stop='handle1'>点击1</button>
</div>

3.2、.prevent 阻止默认行为

<div><a href="" v-on:click.prevent='handle2'>百度</a>
</div>

var vm = new Vue({el: '#app',data: {num: 0},methods: {handle0: function(){this.num++;},handle1: function(event){// 阻止冒泡// event.stopPropagation();},handle2: function(event){// 阻止默认行为// event.preventDefault();}}
});

3.3、.once 执行一次

<button @click.once="btn2Click">按钮2</button>

3.4、.native

当需要监听子组件的点击事件时使用

4、按键修饰符

4.1、v-on:keyup

简写：@keyup

<div id="app"><form action=""><div>用户名：<input type="text" v-on:keyup.delete='clearContent' v-model='uname'></div><div>密码：<input type="text" @keyup.enter='handleSubmit' v-model='pwd'></div><div><input type="button" v-on:click='handleSubmit' value="提交"></div></form>
</div>

<script type="text/javascript">/*事件绑定-按键修饰符*/Vue.config.keyCodes.f1 = 113var vm = new Vue({el: '#app',data: {uname: '',pwd: '',age: 0},methods: {clearContent:function(){// 按delete键的时候，清空用户名this.uname = '';},handleSubmit: function(){console.log(this.uname,this.pwd)}}});
</script>

5、自定义按键修饰符

事件绑定-自定义按键修饰符
规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应
event.keyCode值

<div id="app"><input type="text" v-on:keyup.aaa='handle' v-model='info'></div>

Vue.config.keyCodes.aaa = 65

var vm = new Vue({el: '#app',data: {info: ''},methods: {handle: function(event){console.log(event.keyCode)}}});

七、补充

1、@foucs 监听“获取焦点”

@focus="focus"

1、@blur 监听“失去焦点”

@blur="blur"

八、属性绑定 v-bind

简写：’ : ’
示例：<img :src="imgURL" alt="">

1、基本使用

<div id="app"><!-- 错误的做法: 这里不可以使用mustache语法--><!--<img src="{{imgURL}}" alt="">--><!-- 正确的做法: 使用v-bind指令 --><img v-bind:src="imgURL" alt=""><a v-bind:href="aHref">百度一下</a><a ：href="['index.html?id='+id]">带参数跳转</a><!--<h2>{{}}</h2>--><!--语法糖的写法--><img :src="imgURL" alt=""><a :href="aHref">百度一下</a>
</div>

<script>const app = new Vue({el: '#app',data: {message: '你好啊',imgURL: '.jpg!q90!cc_350x250.webp',aHref: '',id:1}})
</script>

2、动态绑定class(对象语法)

<h2 v-bind:class="{key1: value1, key2: value2}">{{message}}</h2>
<h2 v-bind:class="{类名1: true, 类名2: boolean}">{{message}}</h2>

<style>.active {color: red;}
</style>
<div id="app"><h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2><h2 class="title" v-bind:class="getClasses()">{{message}}</h2><button v-on:click="btnClick">按钮</button>
</div>

<script>const app = new Vue({el: '#app',data: {message: '你好啊',isActive: true,isLine: true},methods: {btnClick: function () {this.isActive = !this.isActive},getClasses: function () {return {active: this.isActive, line: this.isLine}}}})
</script>

3、动态绑定class(数组语法)

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.active {border: 1px solid red;width: 100px;height: 100px;}.error {background-color: orange;}</style>
</head>
<body><div id="app"><div v-bind:class='[activeClass, errorClass]'>测试样式</div><button v-on:click='handle'>切换</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'error'},methods: {handle: function(){this.activeClass = '';this.errorClass = '';}}});</script>
</body>

4、class绑定的3个细节用法

样式绑定相关语法细节：1、对象绑定和数组绑定可以结合使用2、class绑定的值可以简化操作3、默认的class如何处理？默认的class会保留

<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.active {border: 1px solid red;width: 100px;height: 100px;}.error {background-color: orange;}.test {color: blue;}.base {font-size: 28px;}</style>
</head>
<body><div id="app"><div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div><div v-bind:class='arrClasses'></div><div v-bind:class='objClasses'></div><div class="base" v-bind:class='objClasses'></div><button v-on:click='handle'>切换</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">/*样式绑定相关语法细节：1、对象绑定和数组绑定可以结合使用2、class绑定的值可以简化操作3、默认的class如何处理？默认的class会保留*/var vm = new Vue({el: '#app',data: {activeClass: 'active',errorClass: 'error',isTest: true,arrClasses: ['active','error'],objClasses: {active: true,error: true}},methods: {handle: function(){// this.isTest = false;this.objClasses.error = false;}}});</script>
</body>

5、动态绑定style（对象语法）

<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>
'50px’必须加上单引号, 否则是当做一个变量去解析

<head><meta charset="UTF-8"><title>Title</title><style>.title {font-size: 50px;color: red;}</style>
</head>
<body><div id="app"><!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>--><!--'50px'必须加上单引号, 否则是当做一个变量去解析--><!--<h2 :style="{fontSize: '50px'}">{{message}}</h2>--><!--finalSize当成一个变量使用--><!--<h2 :style="{fontSize: finalSize}">{{message}}</h2>--><h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2><h2 :style="getStyles()">{{message}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',finalSize: 100,finalColor: 'red',},methods: {getStyles: function () {return {fontSize: this.finalSize + 'px', backgroundColor: this.finalColor}}}})
</script></body>

6、动态绑定style（数组语法）

<div id="app"><h2 :style="[baseStyle, baseStyle1]">{{message}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',baseStyle: {backgroundColor: 'red'},baseStyle1: {fontSize: '100px'},}})
</script>

九、条件判断

1、v-if

<div id="app"><h2 v-if="isShow"><div>abc</div><div>abc</div><div>abc</div><div>abc</div><div>abc</div>{{message}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isShow: true}})
</script>

2、v-else

<div id="app"><h2 v-if="isShow"><div>abc</div><div>abc</div><div>abc</div><div>abc</div><div>abc</div>{{message}}</h2><h1 v-else>isShow为false时, 显示我</h1>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isShow: false}})
</script>

3、v-if、v-else、v-else-if的使用

<div id="app"><h2 v-if="score>=90">优秀</h2><h2 v-else-if="score>=80">良好</h2><h2 v-else-if="score>=60">及格</h2><h2 v-else>不及格</h2><h1>{{result}}</h1>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {score: 99}})
</script>

4、v-show

类似微信小程序的hidden

<div id="app"><!--v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中--><h2 v-if="isShow" id="aaa">{{message}}</h2><!--v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none--><h2 v-show="isShow" id="bbb">{{message}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isShow: true}})
</script>

十、循环遍历

1、v-for遍历数组

<div id="app"><!--1.在遍历的过程中,没有使用索引值(下标值)--><ul><li v-for="item in names">{{item}}</li></ul><!--2.在遍历的过程中, 获取索引值--><ul><li v-for="(item, index) in names">{{index+1}}.{{item}}</li></ul>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {names: ['why', 'kobe', 'james', 'curry']}})
</script>

2、v-for遍历对象

<div id="app"><!--1.在遍历对象的过程中, 如果只是获取一个值, 那么获取到的是value--><ul><li v-for="item in info">{{item}}</li></ul><!--2.获取key和value 格式: (value, key) --><ul><li v-for="(value, key) in info">{{value}}-{{key}}</li></ul><!--3.获取key和value和index 格式: (value, key, index) --><ul><li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li></ul>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {info: {name: 'why',age: 18,height: 1.88}}})
</script>

3、v-for使用过程添加key

<div id="app"><ul><li v-for="item in letters" :key="item">{{item}}</li></ul>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {letters: ['A', 'B', 'C', 'D', 'E']}})
</script>

4、哪些数组方法是响应式的

1、push方法
2、pop()
3、shift()
4、unshift()
5、splice()
6、sort()
7、reverse()
8、set()
注意: 通过索引值修改数组中的元素是非响应式的

<div id="app"><ul><li v-for="item in letters">{{item}}</li></ul><button @click="btnClick">按钮</button>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {letters: ['a', 'b', 'c', 'd']},methods: {btnClick() {// 1.push方法   在数组后面添加方法// this.letters.push('aaa')// this.letters.push('aaaa', 'bbbb', 'cccc')// 2.pop(): 删除数组中的最后一个元素// this.letters.pop();// 3.shift(): 删除数组中的第一个元素// this.letters.shift();// 4.unshift(): 在数组最前面添加元素// this.letters.unshift()// this.letters.unshift('aaa', 'bbb', 'ccc')// 5.splice作用: 删除元素/插入元素/替换元素// 删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素)// 替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素// 插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素// splice(start)// splice(start):// this.letters.splice(1, 3, 'm', 'n', 'l', 'x')// this.letters.splice(1, 0, 'x', 'y', 'z')// 5.sort()   用于对数组的元素进行排序。//如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。//如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：//若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。//若 a 等于 b，则返回 0。//若 a 大于 b，则返回一个大于 0 的值。// this.letters.sort()// 6.reverse()  用于颠倒数组中元素的顺序。 // this.letters.reverse()// set(要修改的对象, 索引值, 修改后的值)Vue.set(this.letters, 0, 'bbbbbb')// 注意: 通过索引值修改数组中的元素是非响应式的// this.letters[0] = 'bbbbbb';// this.letters.splice(0, 1, 'bbbbbb')}}})
</script>

十一、v-model 双向数据绑定

1、v-model基本使用

<div id="app"><div>{{msg}}</div><div><input type="text" v-model='msg'></div></div>

<script type="text/javascript">/*双向数据绑定1、从页面到数据2、从数据到页面*/var vm = new Vue({el: '#app',data: {msg: 'Hello Vue'}});
</script>

2、指令v-model 的原理

<div id="app"><div>{{msg}}</div><input type="text" v-bind:value="msg" v-on:input='handle'><input type="text" v-bind:value="msg" v-on:input='msg=$event.target.value'><input type="text" v-model='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">/*v-model指令的本质*/var vm = new Vue({el: '#app',data: {msg: 'hello'},methods: {handle: function(event){// 使用输入域中的最新的数据覆盖原来的数据this.msg = event.target.value;}}});
</script>

3、v-model结合radio类型

<div id="app"><label for="male"><input type="radio" id="male" value="男" v-model="sex">男</label><label for="female"><input type="radio" id="female" value="女" v-model="sex">女</label><h2>您选择的性别是: {{sex}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',sex: '女'}})
</script>

4、v-model结合checkbox类型

<div id="app"><!--1.checkbox单选框--><label for="agree">--><input type="checkbox" id="agree" v-model="isAgree">同意协议</label><h2>您选择的是: {{isAgree}}</h2>--><button :disabled="!isAgree">下一步</button><!--2.checkbox多选框--><input type="checkbox" value="篮球" v-model="hobbies">篮球<input type="checkbox" value="足球" v-model="hobbies">足球<input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球<h2>您的爱好是: {{hobbies}}</h2><label v-for="item in originHobbies" :for="item"><input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}</label>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isAgree: false, // 单选框hobbies: [], // 多选框,originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']}})
</script>

5、v-model结合select类型

<div id="app"><!--1.选择一个--><select name="abc" v-model="fruit"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>您选择的水果是: {{fruit}}</h2><!--2.选择多个--><select name="abc" v-model="fruits" multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>您选择的水果是: {{fruits}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',fruit: '香蕉',fruits: []}})
</script>

6、v-model修饰符的使用

<div id="app"><!-- 1.修饰符: lazy，将input事件切换为change事件，由input内容变化时响应事件变为input框失去焦点时响应事件 --><input type="text" v-model.lazy="message"><h2>{{message}}</h2><!-- 2.修饰符: number 转化为数值 --><input type="number" v-model.number="age"><h2>{{age}}-{{typeof age}}</h2><!-- 3.修饰符: trim 去掉开始和结尾的空格 --><input type="text" v-model.trim="name"><h2>您输入的名字:{{name}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',age: 0,name: ''}})var age = 0age = '1111'age = '222'
</script>

十二、自定义指令

Vue.directive('指令命', {inserted: function(el){// el表示指令所绑定的元素//方法}
});

1、自动获得焦点

<div id="app"><input type="text" v-focus><input type="text">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">/*自定义指令*/Vue.directive('focus', {inserted: function(el){// el表示指令所绑定的元素el.focus();}});var vm = new Vue({el: '#app',data: {},methods: {handle: function(){}}});
</script>

2、带参数的自定义指令

<div id="app"><input type="text" v-color='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">/*自定义指令-带参数*/Vue.directive('color', {bind: function(el, binding){// 根据指令的参数设置背景色// console.log(binding.value.color)el.style.backgroundColor = binding.value.color;}});var vm = new Vue({el: '#app',data: {msg: {color: 'blue'}},methods: {handle: function(){}}});
</script>

3、局部自定义指令

将代码写在Vue实例里

<div id="app"><input type="text" v-color='msg'><input type="text" v-focus>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">/*自定义指令-局部指令*/var vm = new Vue({el: '#app',data: {msg: {color: 'red'}},methods: {handle: function(){}},directives: {color: {bind: function(el, binding){el.style.backgroundColor = binding.value.color;}},focus: {inserted: function(el) {el.focus();}}}});
</script>

十三、计算属性 computed

1、基本使用

<div id="app"><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{getFullName()}}</h2><h2>{{fullName}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: 'Lebron',lastName: 'James'},// computed: 计算属性()computed: {fullName: function () {return this.firstName + ' ' + this.lastName}},methods: {getFullName() {return this.firstName + ' ' + this.lastName}}})
</script>

2、复杂操作

<div id="app"><h2>总价格: {{totalPrice}}</h2><h2>总价格: {{totalPrice}}</h2><h2>总价格: {{totalPrice}}</h2><h2>总价格: {{totalPrice}}</h2><h2>总价格: {{getTotalPrice()}}</h2><h2>总价格: {{getTotalPrice()}}</h2><h2>总价格: {{getTotalPrice()}}</h2><h2>总价格: {{getTotalPrice()}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {books: [{id: 110, name: 'Unix编程艺术', price: 119},{id: 111, name: '代码大全', price: 105},{id: 112, name: '深入理解计算机原理', price: 98},{id: 113, name: '现代操作系统', price: 87},]},methods: {getTotalPrice: function () {let result = 0for (let i=0; i < this.books.length; i++) {result += this.books[i].price}return result}},computed: {totalPrice: function () {let result = 0for (let i=0; i < this.books.length; i++) {result += this.books[i].price}return result}}})
</script>

3、计算属性的setter和getter

计算属性的完整写法

<div id="app"><h2>{{fullName}}</h2>
</div><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: 'Kobe',lastName: 'Bryant'},computed: {// fullName: function () {//   return this.firstName + ' ' + this.lastName// }// name: 'coderwhy'// 计算属性一般是没有set方法, 是只读属性.fullName: {set: function(newValue) {//app.fullName = 'zhang san' 给计算属性赋值const names = newValue.split(' ');//更改this.firstName = names[0];this.lastName = names[1];},get: function () {return this.firstName + ' ' + this.lastName}},}})
</script>

4、计算属性与方法对比

计算属性与方法分别调用4次，可以发现方法会重复调用，而计算属性自带缓存，如果数值不发生改变，那么只需要调用一次，计算属性性能更高。

<div id="app"><!--1.直接拼接: 语法过于繁琐--><h2>{{firstName}} {{lastName}}</h2><!--2.通过定义methods--><!--<h2>{{getFullName()}}</h2>--><!--<h2>{{getFullName()}}</h2>--><!--<h2>{{getFullName()}}</h2>--><!--<h2>{{getFullName()}}</h2>--><!--3.通过computed--><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2><h2>{{fullName}}</h2>
</div><script src="../js/vue.js"></script>
<script>// angular -> google// TypeScript(microsoft) -> ts(类型检测)// flow(facebook) ->const app = new Vue({el: '#app',data: {firstName: 'Kobe',lastName: 'Bryant'},methods: {getFullName: function () {console.log('getFullName');return this.firstName + ' ' + this.lastName}},computed: {fullName: function () {console.log('fullName');return this.firstName + ' ' + this.lastName}}})</script>

十四、侦听器

数据一旦发生变化，就通知侦听器所绑定的方法

1、应用场景

数据变化时执行异步或开销较大的操作

<div id="app"><div><span>名：</span><span><input type="text" v-model='firstName'></span></div><div><span>姓：</span><span><input type="text" v-model='lastName'></span></div><div>{{fullName}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">/*侦听器*/var vm = new Vue({el: '#app',data: {firstName: 'Jim',lastName: 'Green',fullName: 'Jim Green'},watch: {firstName: function(val) {this.fullName = val + ' ' + this.lastName;},lastName: function(val) {this.fullName = this.firstName + ' ' + val;}}});
</script>

十五、过滤器

1、自定义过滤器

Vue.filter('upper', function(val) {return val.charAt(0).toUpperCase() + val.slice(1);
});

2、使用过滤器

<div id="app"><input type="text" v-model='msg'><div>{{msg | upper}}</div>
</div>

1、过滤器可以用与插值表达式和属性绑定
2、过滤器支持级联操作
3、局部使用

<div id="app"><div>{{msg | upper | lower}}</div><div :abc='msg | upper'>测试数据</div>
</div>
<script type="text/javascript">Vue.filter('lower', function(val) {return val.charAt(0).toLowerCase() + val.slice(1);//第一个字母小写加其他小写});var vm = new Vue({el: '#app',data: {msg: ''},// 局部使用filters: {upper: function(val) {return val.charAt(0).toUpperCase() + val.slice(1);//第一个字母大写写加其他小写}}});
</script>

3、带参数的过滤器

<div id="app"><div>{{date | format('yyyy-MM-dd')}}</div>
</div>

接收的第一个参数默认是需要过滤的值

Vue.filter('format', function(value, arg) {if(arg == 'yyyy-MM-dd') {var ret = '';ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();return ret;}return value;
})
var vm = new Vue({el: '#app',data: {date: new Date()}
});

4、使用过滤器格式化日期的案例

<div id="app"><div>{{date | format('yyyy-MM-dd hh:mm:ss')}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">/*过滤器案例：格式化日期*/Vue.filter('format', function(value, arg) {function dateFormat(date, format) {if (typeof date === "string") {var mts = date.match(/(\/Date\((\d+)\)\/)/);if (mts && mts.length >= 3) {date = parseInt(mts[2]);}}date = new Date(date);if (!date || date.toUTCString() == "Invalid Date") {return "";}var map = {"M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 };format = format.replace(/([yMdhmsqS])+/g, function(all, t) {var v = map[t];if (v !== undefined) {if (all.length > 1) {v = '0' + v;v = v.substr(v.length - 2);}return v;} else if (t === 'y') {return (date.getFullYear() + '').substr(4 - all.length);}return all;});return format;}return dateFormat(value, arg);})var vm = new Vue({el: '#app',data: {date: new Date()}});
</script>

十六、Vue的MVVM

十七、Vue实例的生命周期

事物从诞生到消亡的整个过程

1、官方文档

十八、组件化开发

1、基本使用

<div id="app"><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn><my-cpn></my-cpn><div><div><!--3.使用组件--><my-cpn></my-cpn></div></div>
</div><my-cpn></my-cpn><script src="../js/vue.js"></script>
<script>// 1.创建组件构造器对象const cpnC = Vue.extend({template: `<div><h2>我是标题</h2><p>我是内容, 哈哈哈哈</p><p>我是内容, 呵呵呵呵</p></div>`})// 2.注册组件Vueponent('my-cpn', cpnC)const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>

2、全局组件和局部组件

全局组件, 意味着可以在多个Vue的实例下面使用

<div id="app"><cpn></cpn><cpn></cpn><cpn></cpn>
</div><div id="app2"><cpn></cpn>
</div><script src="../js/vue.js"></script>
<script>// 1.创建组件构造器const cpnC = Vue.extend({template: `<div><h2>我是标题</h2><p>我是内容,哈哈哈哈啊</p></div>`})// 2.注册组件(全局组件, 意味着可以在多个Vue的实例下面使用)// Vueponent('cpn', cpnC)const app = new Vue({el: '#app',data: {message: '你好啊'},//局部组件components: {// cpn使用组件时的标签名cpn: cpnC}})const app2 = new Vue({el: '#app2'})
</script>

3、父组件和子组件

在父组件中注册子组件

<div id="app"><cpn2></cpn2><!-- <cpn1></cpn1> 无法使用-->
</div><script src="../js/vue.js"></script>
<script>// 1.创建第一个组件构造器(子组件)const cpnC1 = Vue.extend({template: `<div><h2>我是标题1</h2><p>我是内容, 哈哈哈哈</p></div>`})// 2.创建第二个组件构造器(父组件)const cpnC2 = Vue.extend({template: `<div><h2>我是标题2</h2><p>我是内容, 呵呵呵呵</p><cpn1></cpn1></div>`,//在父组件中注册子组件components: {cpn1: cpnC1}})// root 根组件const app = new Vue({el: '#app',data: {message: '你好啊'},//注册父组件components: {cpn2: cpnC2}})
</script>

4、组件的语法糖（简写）注册方法

// 2.全局注册组件的语法糖
Vueponent('cpn1', {template: `<div><h2>我是标题1</h2><p>我是内容, 哈哈哈哈</p></div>`
})

// 2.注册局部组件的语法糖
const app = new Vue({el: '#app',data: {message: '你好啊'},components: {'cpn2': {template: `<div><h2>我是标题2</h2><p>我是内容, 呵呵呵</p></div>`}}
})

5、组件模板的分离写法

<div id="app"><cpn></cpn><cpn></cpn><cpn></cpn>
</div><!--1.script标签, 注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>--><!--<h2>我是标题</h2>--><!--<p>我是内容,哈哈哈</p>-->
<!--</div>-->
<!--</script>--><!--2.template标签-->
<template id="cpn"><div><h2>我是标题</h2><p>我是内容,呵呵呵</p></div>
</template><script src="../js/vue.js"></script>
<script>// 1.注册一个全局组件Vueponent('cpn', {template: '#cpn'})const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>

6、组件中的数据存放

<div id="app"><cpn></cpn><cpn></cpn><cpn></cpn>
</div>
<!--2.template标签-->
<template id="cpn"><div><h2>{{title}}</h2><p>我是内容,呵呵呵</p></div>
</template>

<script>// 1.注册一个全局组件Vueponent('cpn', {template: '#cpn',//在此存数据data() {return {title: 'abc'}}})const app = new Vue({el: '#app',data: {message: '你好啊',// title: '我是标题' 无效}})
</script>

十九、组件通信

1、父组件向子组件传递数据

父传子: props

<div id="app"><!--<cpn v-bind:cmovies="movies"></cpn>--><!--<cpn cmovies="movies" cmessage="message"></cpn>  会传递为字符串-->
<cpn :cmessage="message" :cmovies="movies"></cpn>
</div>
<template id="cpn"><div><ul><li v-for="item in cmovies">{{item}}</li></ul><h2>{{cmessage}}</h2></div>
</template><script src="../js/vue.js"></script>
<script>// 父传子: propsconst cpn = {template: '#cpn',//第一种写法，数组// props: ['cmovies', 'cmessage'],//第二种写法props: {// 1.类型限制// cmovies: Array,// cmessage: String,// 2.提供一些默认值, 以及必传值cmessage: {type: String,default: 'aaaaaaaa',required: true   //使用组件时必传变量},cmovies: {type: Array,  default() {   // 类型是对象或者数组时, 默认值必须是一个函数return []}}},data() {return {}},methods: {}}const app = new Vue({el: '#app',data: {message: '你好啊',movies: ['海王', '海贼王', '海尔兄弟']},components: {cpn}})
</script>

自定义验证函数 validator

zidingyi:{validator:function(value){//这个值必须匹配下列字符串中的一个return ['success','warning','danger'].indexOf(value) !== -1}
}

1.1、驼峰命名问题

必须以 ‘ - ’ 拆分

<div id="app"><cpn :c-info="info" :child-my-message="message" v-bind:class></cpn>
</div>

props: {cInfo: {type: Object,default() {return {}}},childMyMessage: {type: String,default: ''}
}

2、子组件向父组件传递数据

自定义事件进行传递
this.$emit(‘事件名’, 要传的值)

<!--父组件模板-->
<div id="app"><cpn @item-click="cpnClick"></cpn>
</div><!--子组件模板-->
<template id="cpn"><div><button v-for="item in categories"@click="btnClick(item)">{{item.name}}</button></div>
</template><script src="../js/vue.js"></script>
<script>
// 1.子组件const cpn = {template: '#cpn',data() {return {categories: [{id: 'aaa', name: '热门推荐'},{id: 'bbb', name: '手机数码'},{id: 'ccc', name: '家用家电'},{id: 'ddd', name: '电脑办公'},]}},methods: {btnClick(item) {// 发射事件: 自定义事件this.$emit('item-click', item)}}}// 2.父组件const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn},methods: {cpnClick(item) {console.log('cpnClick', item);}}})
</script>

二十、组件访问

1、父访问子

1.1、$children

<div id="app"><cpn></cpn><cpn></cpn><button @click="btnClick">按钮</button>
</div>
<template id="cpn"><div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {btnClick() {// 1.$childrenconsole.log(this.$children);this.$children[0].showMessage()}},components: {cpn: {template: '#cpn',methods: {showMessage() {console.log('showMessage');}}},}})
</script>

1.2、refs

用的最多

<div id="app"><cpn></cpn><cpn></cpn><cpn ref="aaa"></cpn><button @click="btnClick">按钮</button>
</div>
<template id="cpn"><div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {btnClick() {// 2.$refs => 对象类型, 默认是一个空的对象 // ref='aaa'时，值赋为对应组件对象 {aaa:VueComponent}console.log(this.$refs.aaa.name);}},components: {cpn: {template: '#cpn',data() {return {name: '我是子组件的name'}},methods: {showMessage() {console.log('showMessage');}}},}})
</script>

2、子访问父

2.1、访问父组件 $parent

2.2、访问根组件 $root

<div id="app"><cpn></cpn>
</div><template id="cpn"><div><h2>我是cpn组件</h2><ccpn></ccpn></div>
</template><template id="ccpn"><div><h2>我是子组件</h2><button @click="btnClick">按钮</button></div>
</template><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn',data() {return {name: '我是cpn组件的name'}},components: {ccpn: {template: '#ccpn',methods: {btnClick() {// 1.访问父组件$parentconsole.log(this.$parent);console.log(this.$parent.name);// 2.访问根组件$rootconsole.log(this.$root);console.log(this.$root.message);}}}}}}})
</script>

二十一、slot 插槽

1、基本使用

插槽的基本使用 <slot></slot>

给插槽添加默认值按钮

<template id="cpn"><div><h2>我是组件</h2><p>我是组件, 哈哈哈</p><slot><button>按钮</button></slot><!--<button>按钮</button>--></div>
</template>

<div id="app"><!-- 显示默认内容 --><cpn></cpn>  <!-- 替换内容 --><cpn><span>哈哈哈</span></cpn><cpn><i>呵呵呵</i></cpn><!-- 如果有多个值, 同时放入到组件进行替换时, 一起作为替换元素 --><cpn> <i>呵呵呵</i><div>我是div元素</div><p>我是p元素</p></cpn>
</div>

2、具名插槽

<div id="app"><cpn><span slot="center">标题</span></cpn><cpn><button slot="left">返回</button></cpn><cpn></cpn>
</div><template id="cpn"><div><slot name="left"><span>左边</span></slot><slot name="center"><span>中间</span></slot><slot name="right"><span>右边</span></slot></div>
</template><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn'}}})
</script>

3、作用域插槽

3.1、作用域概念

父组件模板的所有东西都会在父级作用域内编译；
子组件模板的所有东西都会在子级作用域内编译
如以下代码，isShow变量使用的是父组件里定义的变量

<div id="app"><cpn v-show="isShow"></cpn>
</div><template id="cpn"><div><h2>我是子组件</h2><p>我是内容, 哈哈哈</p></div>
</template><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isShow: true},components: {cpn: {template: '#cpn',data() {return {isShow: false}}},}})
</script>

而在子组件模板里使用的isShow，会在子组件里找变量
如下代码

<div id="app"><cpn v-show="isShow"></cpn>
</div><template id="cpn"><div><h2>我是子组件</h2><p>我是内容, 哈哈哈</p><!-- isShow: false --><button v-show="isShow">按钮</button></div>
</template><script src="../js/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isShow: true},components: {cpn: {template: '#cpn',data() {return {isShow: false}}},}})
</script>

3.2、作用域插槽的使用

父组件替换插槽的标签，但内容由子组件提供

注册组件，定义pLanguage变量

<script>const app = new Vue({el: '#app',data: {message: '你好啊'},components: {cpn: {template: '#cpn',data() {return {pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python', 'Go', 'Swift']}}}}})
</script>

在模板的 slot插槽中绑定data属性，传pLanguages变量

<template id="cpn"><div><slot :data="pLanguages"><ul><li v-for="item in pLanguages">{{item}}</li></ul></slot></div>
</template>

父组件使用时，在组件内用**<template slot-scope="slot"></template>**包裹要替换的模板（高版本不需要<template>包裹）
使用 **slot.data** 即可拿到传来的值

<div id="app"><cpn></cpn><cpn><!--目的是获取子组件中的pLanguages--><template slot-scope="slot"><!--<span v-for="item in slot.data"> - {{item}}</span>--><span>{{slot.data.join(' - ')}}</span></template></cpn><cpn><!--目的是获取子组件中的pLanguages--><template slot-scope="slot"><!--<span v-for="item in slot.data">{{item}} * </span>--><span>{{slot.data.join(' * ')}}</span></template></cpn><!--<cpn></cpn>-->
</div>