#v-bloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕
<style>
[v-v-cloak]{
display: none;
}
</style>
引入文件vue.js
<script src="./js/vue.js"></script>
用法
<!-- 对于MVVM的理解 -->
<!-- 解放DOM -->
<!-- 指令:就是vue.js为我们提供的方便操作的自定义属性 -->
<!-- <-- View -->
<div id="app">
<!-- 1.使用模板语法的标签上添加v-cloak 的指令 -->
<p v-cloak>{{msg+1+1+1}}</p>
<!-- 模板语法 -->
</div>
<!-- View end -->
<script>
//创建一个vue环境,创建一个VM层
let vm = new Vue({
el:'#app',
data:{//Model层
msg:'hello word'
}
})
</script>
#v-text
数据绑定语法 - 插值
<script src="./js/vue.js"></script>
<body>
<div id="app">
<!-- {{myDiv}} -->
<p v-text="myDiv"></p>
</div>
<script>
new Vue({
el:'#app',
data:{
myDiv:'hahhhahah'
}
})
</script>
</body>
#v-html
数据绑定语法 - 插值
更新元素的 innerHTML
<script src="./js/vue.js"></script>
<div id="app">
<!-- {{myDiv}} -->
<div v-html="myDiv"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
myDiv:'<h2>hello</h2>'
}
})
</script>
#v-once
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
<script src="./js/vue.js"></script>
<div id="app">
<p v-once>{{msg}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'哈哈哈哈'
},
mounted(){
this.msg ='洗我洗我嘻嘻嘻我嘻嘻嘻'
}
})
</script>
#v-pre
跳过这个元素和它的子元素的编译过程
<script src="./js/vue.js"></script>
<!-- 不被解析出来 -->
<div id="app">
<p v-pre>{{msg}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '不想被解析!'
}
})
</script>
#v-model
在表单控件或者组件上创建双向绑定
参考
1.表单控件绑定
2.组件-在输入组件上使用自定义事件
<script src="./js/vue.js"></script>
<!-- 双向绑定 -->
<div id="app">
<input type="text" value="" v-model="username">
<p>{{username}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
username:'花花'
}
})
</script>
#v-on
v-on缩写:@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略
<script src="./js/vue.js"></script>
<div id="app">
<input type="text" value="" v-model="num">
<input type="button" value="+1" v-on:click="add">
<input type="button" value="-1" @click="sun">
</div>
<script>
new Vue({
el:'#app',
data:{
num:1
},
//将num值进行操作
//methods:用来写页面需要的方法的配置
methods:{
add:function(){
this.num += 1;
},
sun(){
this.num -= 1;
}
}
})
</script>
#v-bind
v-bind缩写是 “:”
动态地绑定一个或多个 attribute,或一个组件 prop 到表达式
<script src="./js/vue.js"></script>
<!-- v-mind用来绑定属性 -->
<div id="app">
<!-- <img v-bind:src="msg"> -->
<img :src="msg">
</div>
<script>
new Vue({
el:'#app',
data:{
msg:'./src/timg.jpg'
},//这个逗号必须有
mounted(){
//这个this必须有,他用来指定当前的vm实例
this.msg = './src/timg1.jpg'
}
})
</script>