vue生命周期
- beforeCreat
- created
- beforeMount
- mounted
- beforeDestroy
- destroyed
- beforeUpdate
- updated
模板语法
- v-html
- v-text
计算属性 方法 侦听器
var vm = new Vue({
el: "#app",
data: {
firstName: 'zhao',
lastName: 'gary',
fullName:'gary zhao',
age: 28
},
watch:{
firstName: function () {'' +
console.log('计算了一次')
this.fullName = this.firstName +' '+ this.lastName
},
lastName: function () {
console.log('计算了一次')
this.fullName = this.firstName +' '+ this.lastName
}
},
methods:{
// 计算属性
fullName:function () {
console.log('计算了一次')
return this.firstName +" "+this.lastName
}
},
// 、、计算属性 有缓存
computed: {
fullName: function () {
console.log('计算了一次')
return this.firstName + " " + this.lastName
}
}
})
computed get set 属性
computed: {
fullName: {
get:function(){
return this.firstName + this.lastName
},
set:function (value) {
var arr = value.split(" ")
console.log(arr)
}
}
}
vue 绑定样式
：class = "{}" 对象
：class = "[]" 数组 变量 可以有多个变量
：style 对象
：style ="[{},{}]" 数组
条件渲染
v-show display:none
v-if 不渲染
v-if
v-else-if
v-else
条件渲染时，当条件不同时VUE会尝试复用相同的DOM，若希望不被复用，就需要对每个情况的DOM元素取个key名
input 加key值 可以清除input缓存
列表渲染
- 数组直接改变不起作用，需要用下面的方法
pop
push
shift
unshift
splice
sort
reverse
- 通过改变数据的引用地址，来改变数据
占位符
<template></template>
对象循环
动态加属性不行，通过下面方法来改属性
Vue.set()
vm.$set()
事件绑定
@click.prevent 阻止默认行为
@click.self self 要求 click事件只有在e.tartget = e.currentTaget
@click.once 只执行一次
@click.capture 事件捕获，遵循从外部到内部（事件冒泡是从内部到外部
@keydowm.ctrl 键盘修饰符
@click.right/left/middle 鼠标修饰符
表单绑定
v-model
v-model.lazy 输入框失去焦点时加载，提高性能
v-model.number 输入框中的数字转化成数字类型
v-model.trim 去除输入框内容的首尾空格
