vue.js常用指令
程序员文章站
2022-03-03 09:17:17
...
一、v-cloak
可以使用 v-cloak 指令设置样式，当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码，可以使用 v-cloak 指令来解决问题。
<style>
[v-cloak] {
display: none;
}
</style>
<body>
<div id="app">
<p v-cloak>{{msg+1+1+1+1+1+1+1+1+1+1+1}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
msg: 'Hello Word'
}
})
</script>
</body>
二、v-text
v-text不被编译
<body>
<div id="app">
<div v-text="mytext"></div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
msg:'Word',
mytext: '文本'
}
})
</script>
</body>
三、v-html
v-html被浏览器编译
<body>
<div id="app">
<div v-html="myhtml"></div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
myhtml: '<h1>Hi</h1>'
}
})
</script>
</body>
四、v-pre
v-pre不被编译
<body>
<div id="app">
<div v-pre>{{mypre}}</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
mypre: '不被编译'
}
})
</script>
</body>
五、v-once
v-once不被替换
<body>
<div id="app">
<div v-once>{{myonce}}</div>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
myonce: '最初的理想，是什么——'
},
mounted() {
this.msg = '后来我成为了工程师'
}
})
</script>
</body>
六、v-model
v-model双向数据绑定
<body>
<div id="app">
<input type="text" value="" v-model="mymodel">
<p>{{mymodel}}</p>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
mymodel: '今天学习了vue-model等'
}
})
</script>
</body>
七、v-on
v-on绑定事件，简写：@
<body>
<!-- 解放Dom -->
<div id="app">
<input type="text" v-model="num"><br />
<input type="button" value="+1" @click="add">
<input type="button" value="-1" @click="min">
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
num: 1
},
// 将num值进行操作
// methods：用来写页面需要的方法配置项
methods: {
add: function () {
this.num += 1;
},
min() {
this.num -= 1;
}
}
})
</script>
</body>
八、v-bind
v-bind: 用来绑定属性 简写成:
<body>
<div id="app">
<!-- <img v-bind:src="myimg"> -->
<img :src="myimg">
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
myimg: './img/cy.jpg'
},
mounted() {
// 这个this必须要，它是当前的vm实例
this.myimg = './img/lhz.jpg'
}
})
</script>
</body>
下一篇： vue系列教程（二）常用指令01