常用指令
1.v-text :innertext
2.v-html :innerhtml
3.v-for
4.v-if v-else-if v-else
5.v-show :display
6.v-on :@xxx='处理方法'
7.v-bind :属性名称=属性值
8.v-model -- input -- textarea -- select
指令修饰符:.lazy .number .trim
计算属性:computed 放入缓存 只有数据改变的时候才会重新计算
数据的监听: watch 注意可变数据类型跟不可变数据类型的区别
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="static/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ name }}
{{ hobby }}
<button @click="changedata">点我改变数据</button>
</div>
<script>
let app =new Vue({
el:'#app',
data:{
name:'alex',
hobby:['抽烟','喝酒']
},
methods:{
changedata:function () {
app.$set(this.hobby,0,'抽二手烟')
}
},
watch:{
hobby: {
handler: function (val, oldVal) {
console.log(val);
console.log(oldVal);
}
}
}
})
</script>
</body>
</html>
获取Dom: 给标签绑定ref属性 ref = "属性值" this.$refs.属性值
自定义指令:Vue.directive("指令名称", function(el, binding){
el 绑定指令的标签元素
binding 指令的所有信息
<div id="app01">
<div v-text="vue" v-pos="position" :class="{box:show} "> </div>
</div>
<script src="static/vue.min.js"></script>
<script>
Vue.directive('pos',function (el,bindding) {
if (bindding.value){
el.style['position']='fixed';
el.style['right']=0;
el.style['bottom']=0
}
})
let vm =new Vue({
el:'#app01',
data:{
vue:'hello vue',
show:true,
position:true
}
})
