Vue.js

1、Vue的下载安装：Vue.js官网 | 学习 | 教程 | 安装。 2、Vue.js的版本：2.6.10。 3、Vue的第一个程序：Hello,World!

var vm=new Vue({ el:‘#box’, data:{ message:‘Hello,World!’ } });

（1）vm：Vue实例，利用Vue构造函数/构造器创建。

（2）Vue选项： A .el，指定哪个DOM结构和Vue实例进行绑定。 B .data，指定与Vue实例绑定的DOM结构中可以使用的数据。

（3）挂载点：与Vue实例通过el选项所绑定的DOM结构被称为“挂载点”。

计算属性与侦听属性

一、计算属性：

1、计算属性在Vue实例中使用computer选项来实现。

2、计算属性的书写格式： computed:{ 属性名:function(){ return 返回值; } } 在computed中定义的function不是方法，而是属性。 计算属性在data中不用书写。

3、例1：实现两个数值的相加。

computed:{ add:function(){ return this.numA+this.numB; } }

（1）上述代码中的计算属性是add。 （2）计算属性执行的function中涉及到的数据量被称为计算属性的依赖数据。 （3）计算属性：当该属性的依赖数据发生变化时，则该属性会重新进行计算。 （4）计算属性执行的function中renturn的返回值是计算属性计算的最终结果。 例2：实现两个数值的加减乘除运算（add、sub、mul、div）。

4、计算属性包含两个操作： （1）getter，获取计算属性的结果，默认的function是获取结果。用get:function(){}实 现。当依赖数据发生变化时会自动执行get函数。 （2）setter，设置计算属性的结果。用set:function(){}实现。 当计算属性通过v-model绑定在表单元素上，用户对表单元素的值进行了修改时 执行set函数。 computed:{ result:{ get:function(){ return 返回值; }, set:function(参数){ } } }

二、侦听属性：

1、侦听属性依靠watch选项来实现对自身变量的检测。 侦听属性只能检测在data中设置好的数据。 当侦听的属性值发生变化时，执行侦听属性所对应的函数。

watch:{ 侦听属性：function(newValue,oldValue){ //当侦听属性的取值发生变化时所执行的代码 } } 例：watch:{ kb:function(newValue,oldValue){ this.b=newValue*1024; } }

2、侦听属性的第二种语法格式：可以为侦听属性添加新的属性。

watch:{ 侦听属性:{ handler:function(newValue,oldValue){ //当侦听属性的取值发生变化时所执行的代码 } } } 例：watch:{ kb:{ handler:function(newValue,oldValue){ this.b=newValue*1024; }, immediate:true //当Vue实例创建成功后自动执行kb的handler函数。 } }

3、侦听属性的新属性： immediate：逻辑值。若设置为true，则当Vue实例创建时会自动执行一次侦听属性的 函数。 deep：逻辑值。设置是否进行深层的监听（针对自定义对象来进行设置的）。 （1）当侦听属性是一个对象时，改变对象内属性的取值时无法让侦听属性执行函数的。 （2）除非改变侦听属性的完整对象，才可以执行侦听属性的函数。 （3）当设置了deep:true时，利用对象的属性进行修改，对象属性的原值无法得到保留。

例：data:{ obj:{a:10,b:20} } （A）watch:{ obj:function(newValue,oldValue){ console.log('旧值：a=' + oldValue.a + ",b=" + oldValue.b); console.log('新值：a=' + newValue.a + ",b=" + newValue.b); } } 测试：vm.obj.a=100; //不触发侦听属性obj的function函数 vm.obj={a:100,b:500}; //触发侦听属性obj的function函数 旧值：a=10,b=20 新值：a=100,b=400 （B）watch:{ obj:{ handler:function(newValue,oldValue){ console.log('旧值：a=' + oldValue.a + ",b=" + oldValue.b); console.log('新值：a=' + newValue.a + ",b=" + newValue.b); }, deep:true } } 测试：vm.obj.a=‘A’ //触发侦听属性obj的handler函数 旧值：a=‘A’,b=20 新值：a=‘A’,b=20

4、可以通过$watch形成Vue实例的方法：

vm.$watch(‘kb’,function(newValue,oldValue){ this.b=newValue*1024; }) 5、计算属性和侦听属性的区别： （1）计算属性使用computed选项实现；侦听属性使用watch选项或者$watch()方法实现。 （2）计算属性无需在data数据中定义；侦听属性必须侦听data数据中已有的变量。 （3）计算属性是依赖变量发生变化自动再次计算该属性的值。 侦听属性是被侦听的变量发生变化执行指定的函数。 （4）计算属性无法完成异步操作；侦听属性可以完成异步操作。

组件与复用技术

组件（Component）：组件是可以复用的Vue实例。

一、组件的分类与注册： 1、组件的分类： （1）局部组件：在Vue实例内部使用components选项注册局部组件，只能适用在本 Vue实例的挂载点内部。 （2）全局组件：使用Vue.component()方法注册全局组件，可以使用在所有Vue实例的 挂载点内部。 2、局部组件的注册与使用： （1）在JS文件中注册局部组件： var vm=new Vue({ el:‘#app’, data:{}, components:{ ‘my-button’:{ template:‘<button class=“btn”>单击按钮</button>’ } } }) （2）在HTML文件中使用局部组件： <my-button></my-button>

（3）组件名称：

A .若组件名称为全小写模式：mybutton，则使用时也是全小写模 式 <mybutton></mybutton>。 B .若组件名称采用PascalCase【大驼峰命名】:MyButton，则使用时必须采用-修正 组件名称：<my-button></my-button>。 C .若组件名称采用CamelCase【小驼峰命名】:myButton，则使用时必须采用-修正 组件名称：<my-button></my-button>。 D .若组件名称采用kebebCase【短横线间隔符】：my-button，则使用时也是用短横 线间隔符的形式：<my-button></my-button> 3、全局组件的注册与使用：

Vue.component(‘my-button’,{ template:‘<button class=“btn”>单击命令按钮</button>’ }) 二、组件的选项： 1、template选项：为组件规划DOM结构。 （1）“单个根元素”特性：template选项在规划DOM结构时必须有一个根元素。 （2）语法格式： ES4/ES5：使用单引号引住DOM结构，配合折行转义字符 \ 例：template:‘\ <div>\ <button>单击</button>\ <a href=“#”>超级链接</a>\ </div>\ ’ ES6：使用字符串模板来实现DOM结构的规划。 例：template:` <div> <button>单击</button> <a href=“#”>超级链接</a> ` 2、data选项： 组件中的data选项必须是一个function，==所有的数据必须使用return语句返回一个对象== 来实现。 例：data:function(){ return { message:‘xxxxxx’ } } 3、methods选项：为template选项指定的DOM结构绑定事件。 4、computed、watch选项：为组件实例设置计算属性和侦听属性。 5、props选项：为组件注册由用户使用时提供的属性。 取值：（1）字符串数组 （2）对象 A .字符串数组：props:[‘linkUrl’,‘title’,‘target’,‘txt’] 注册的属性名称若采用驼峰式命名，则使用时必须转换为“短横线间隔符”方式。 <my-link link-url=“http://www.qq.com” title=“走进腾讯” txt=“腾讯视频”> </my-link> B .对象：允许对组件的属性实现数据验证。 props:{ propA:Number, //限制propA属性必须是数值 propB:[Number,String], //限制propB属性可以是数值，也可以是字符 propC:{ type:Number, //限制propC属性必须是数值 default:100, //为propC设置默认取值为100 required:true, //设置PropC属性为必备属性 validator:function(value){ //为PropC属性设置范围验证机制 return value>20 //propC的取值必须大于20 } }, propD:{ type:Array, //限制propD属性必须为数组 default:function(){ //数组类型属性的默认值必须是一个函数的返回值 return [‘元素1’,‘元素2’] } } } 例：制作一个<my-book></my-book>的组件。 （1）包括bookName、author、price、count四个属性。 （2）bookName是必须书写的属性。 （3）author是一个数组，并带有默认值（作者一、作者二） （4）price是一个数值，默认值为0，取值必须大于20。 （5）count可以是数值，也可以是字符串。