Vue
一套用于构建用户界面的渐进式JavaScript框架。
渐进式:vue可以自底向上逐层应用;简单应用:只需一个轻量小巧的核心库;复杂应用:可以引入各式各样的的vue插件。
华人 尤雨溪;
vue2(攻壳机动队) vue3(海贼王)
vue官网:https://cn.vuejs.org/v2/guide/
Document
hello {{name}}
写法:{{xxx}}
功能:用于解析标签体内容
new Vue({
el: ‘#root’,
data: {
name: ‘vue’
}
});
功能: 解析标签包括标签属性、解析标签体内容、绑定事件
举例:或简写为,xxx同样要写js表达式,且可以直接读取到data中的所有属性
说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子
hello {{name}}
new Vue({
el: ‘#root’,
data: {
name: ‘vue’,
url: ‘www.xxxx.xx’
}
});
数据绑定
单向数据绑定:
双向数据绑定:
Vue中有2种数据绑定的方式:
备注:
el与data的两种写法
Hello,{{name}}!
el有2种写法:
data有2种写法:
对象式
data:{}
函数式
data:function(){
return {
}
}
由Vue管理的函数,一定不要写箭头函数,否则this就不再是Vue实例了
M:模型(Model),对应data中的数据
V:视图(View):对应模板
VM:视图模型(ViewModel):对应Vue实例对象
data(M)中多有属性最后都出现在了vm身上
vm身上所有属性及Vue原型上所有属性,在vue模板(V)中都可以直接使用
功能:给对象添加属性
语法:
Object.defineProperty(对象名,新属性名,{value:新属性值[,其他配置]})
其他配置项例如:
let person = {
name: 'zhangsan',
sex: 'nan'
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true, //控制属性是否可以枚举,默认值是false
writable: true, //控制属性是否可以被修改,默认值是false
configurable: true //控制属性是否可以被删除,默认值是false
})
console.log(person);
借助Object.defineProperty方法让对象和数据产生关联:
let number = 14;
let person = {
name: 'zhangsan',
sex: 'nan'
}
Object.defineProperty(person, 'age', {
//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get() {
console.log('有人读取age属性了');
return number;
},
//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value) {
console.log('有人修改了age属性,且值为' + value);
number = value;
}
})
console.log(person);
5.3、理解数据代理
什么是数据代理:通过一个对象代理对另一个对象中属性的操作(读写)
例如一个简单的数据代理:
let obj1 = {
x: 100
}
let obj2 = {
y: 200
}
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x;
},
set(value) {
obj1.x = value
}
})
在vue中,通过vm对象来代理data对象中的属性的操作(读写)
模板中直接写属性名就可以读写操作,这就用到了数据代理,如下有:
学校:{{name}}
地址:{{address}}
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
name: 'beida',
address: 'beijing'
}
})
模板中用的是name,而不是data.name(即data.name),这里就用到了数据代理,vue对象代理了data对象;通过vm.name就可以读写_data中的name。
这里vm.name和vm.data.name的值相同,修改vm.name的值,vm.data.name也会改变。
基本原理:
数据代理,通过Object.defineProperty()方法把data对象中所有属性添加到vm,为每一个添加到vm上的属性,都指定一个getter/setter,getter/setter内部去操作(读写)data中对应的数据
vue中数据代理的好处:
更加方便的操作data中的数据
欢迎来到{{name}}学习
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
name: 'atshanggui'
},
methods: {
showInfo1(event) {
console.log(event.target);
console.log(this);
alert('同学你好')
},
showInfo2(a, event) {
console.log(event.target);
console.log(this);
alert(a + '同学你好')
}
}
})
事件修饰符
Vue中的事件修饰符:
修饰符可以连续写,比如可以这么用:@click.prevent.stop=“showInfo”
(1)常用的两个键盘触发事件:
(2)Vue中按键别名
上面代码中通过Enter键按下后抬起触发事件,enter为vue中Enter的别名
常用的按键别名有:
Vue未提供别名的按键,可以使用按键原始的key值去绑定,但要注意驼峰命名法的原始key值要转化为短横线命名,例如大小写转换键KebabCase就要写成kebab-case。
系统修饰键(用法特殊):ctrl、alt、shift、meta,用法如下:
配合keyup使用:按下修饰键的同时再按下其他键,随着释放其他键,事件才被触发
配合kedown使用:正常触发事件
如果只想要修饰键+一个其他键 才能触发事件可以连续写,例如下面这行代码就是只有按下ctrl+y才能触发事件:
@keyup.ctrl.y=“xxx”
Vue.config.keyCodes.自定义键名 =键码,可以自定义按键别名。
在事件触发函数中获取键名和键码:
showInfo(e) {
console.log(e.key, e.keyCode);
}
可以使用keyCode去指定具体的按键,比如:@keydown.13=“showInfo”,但不推荐这样使用
计算属性
姓:
名:
姓名:{{fullName}}
多数情况只读不改,所以只读情况set就不用写,就可以直接写一个函数:
fullName() {
return this.firstName + '-' + this.lastName;
}
这个函数的功能就是get函数的功能,最后还是会把fullName配置到vm对象下,所以模板中写的是fullName,而不是fullName(),写fullName()就相当于调用get(),是错误的。
(1)监视属性(watch)可以监视数据的变化,data和computed中的数据都可以被监视。
例如:
监视属性
今天天气好{{info}}!
监视属性watch:
vm.$watch("isHot", {
immediate: true, //初始化时让handler调用一下
handler(newValue, oldValue) {
console.log('isHot被修改了', newValue, oldValue);
}
});
(2)深度监视
Vue中的监视属性watch默认不监视对象内部值的改变(只监视一层),比如:
深度监视
a的值是:{{numbers.a}}
b的值是:{{numbers.b}}
(3)监视属性的简写
前面学习计算属性computed的时候,只有get函数不写set函数时可以简写该属性;在这监视属性watch也一样,只写handler函数不写deep,immediate时也可以简写。
例如上面写过的如果只写hander就可以简写为:
同样为了不改变函数的this指向,也能写成箭头函数;即一般在Vue内管理的函数都不要写箭头函数。
(1)computed能完成的功能,watch都可以完成
(2)watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
(3)都能完成的尽量用computed,因为computed是声明式的,watch是命令式的
下面这个姓名案例两种属性都可以实现:
姓:
名:
全名:{{fullName}}
计算属性实现:
Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三'
},
computed: {
fullName() {
return this.firstName + '-' + this.lastName;
}
}
})
监视属性实现:
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三',
fullName: "张三"
},
watch: {
firstName(newValue, oldValue) {
this.fullName = newValue + '-' + this.lastName;
},
lastName(newValue, oldValue) {
this.fullName = this.firstName + '-' + newValue;
}
}
})
但是异步任务用计算属性就很难实现,用监视属性就很好实现,比如加一个计时器,让全名的姓延迟一秒更新:
const vm = new Vue({
el: "#root",
data: {
firstName: '张',
lastName: '三',
fullName: "张三"
},
watch: {
firstName(newValue, oldValue) {
setTimeout(() => {
this.fullName = newValue + '-' + this.lastName;
}, 1000)
},
lastName(newValue, oldValue) {
this.fullName = this.firstName + '-' + newValue;
}
}
})
总结:
两个重要的小原则: