v-cloak
给闪烁的元素加上v-cloak指令 解决差值表达式闪烁的问题
当vue结束编译后（vue文件加载完成后）v-cloak会被删除
{{name}}
ref
ref属性代表对dom的引用，随便取值，不能重复
monted
mounted钩子函数，表示页面加载的时候执行里面内容
名字不能随便取，且不能写在methods里面
mounted(){
this.$refs.name.focus()
}
Vue.directive()自定义指令
Vue.directive(name,{})包含两个参数，name必须小写；{}为指令的配置项
Vue.directive(name,{
inserted(el,binding){
console.log(el)
el.focus()
}
})
inserted同为钩子函数，表示指令插入到标签中的时候执行
el表示自定义指令的元素，binding表示自定义指令的信息
Vue.directive('mycolor', {
inserted(el, binding) {
console.log(binding);
// binding.value可以获取传入自定义指令中的属性的值
el.style.color = binding.value
}
})
Vue.filter过滤器
Vue.filter（）
有两个参数，第一个是过滤器的名字；第二个是过滤器的处理函数，这个函数有默认参数，表示需要过滤的数据
Vue.filter（'fmttime',(time,seprator) => {
var y = time.getFullYear(),
m = time.getMonth + 1,
d = time.getDate();
return y+seprator+m+seprator+d
})
computed计算属性
根据data已有的属性计算得出新的属性
创建计算属性需要computed关键字，它是一个对象
计算属性基于依赖进行缓存的
computed: {
// 这里fullName就是一个计算属性，它是一个函数，但这个函数可以当成属性来使用
fullName () {
return this.firstName + this.lastName
}
}
watch监听器
watch用来监听data数据
watch: {
// 这里面的函数名很特殊，它是你需要监听的data的名字，这个函数包含两个参数，一个是newVal,一个是oldVal
firstName (newVal, oldVal) {
console.log(newVal, oldVal);
this.watchFullName = newVal + this.lastName
},
lastName (newVal, oldVal) {
this.watchFullName = this.firstName + newVal
}
}
能用computed实现就用computed
需要执行异步操作的时候使用watch
深度监听
watch: {
// 监听对象不能使用下面这种写法，要使用深度监听
// user(newVal, oldVal) {
// console.log('改变了');
// }
user: {
// hanlder这个函数名字固定
handler (newval) {
console.log('改变了');
console.log(newval.name);
},
// deep:true表示深度监听
deep: true
}
}
axios
axios.get('接口名称'.{
params:{
ID:123
}
})
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})
axios.post('接口名称'.{
name:"zs",
age:18
})
.then(res => {
console.log(res)
})
.catch(error => {
console.log(error)
})
过渡和动画
vue提供了多重方式应用过渡效果。有一下工具：
-在在 CSS 过渡和动画中自动应用 class
-可以配合使用第三方 CSS 动画库，如 Animate.css
-在过渡钩子函数中使用 JavaScript 直接操作 DOM
-可以配合使用第三方 JavaScript 动画库，如 Velocity.js
transition封装组件，下列情形，可以给任何元素组件添加进入/离开过渡
-v-if条件渲染
-v-show条件展示
-动态组件
-组件根节点