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可以是数值,也可以是字符串。