v-for
v-for用于遍历数据,用在table和ur标签里面是可以自动生成遍历结果和标签效果
<div id="app">
<ul>
<li v-for="item in movice">{{item}}</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
message:"你好",
movice:["海贼王","火影","龙珠"]
}
})
</script>
v-on
v-on绑定事件监听器。事件类型由参数指定。其语法糖是@(v-on=“click”,简写为:@=“click”)
<body>
<div id="app">
<h1>{{count}}</h1>
<button @click="Increase">+</button>
<button @click="decrease">-</button>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
count:0,
},
methods:{
Increase (){this.count++},
decrease: function (){this.count--},
}
})
</script>
以上代码实现点击按钮增加减少数字。
v-once
默认情况下,界面上的模板语法mustache插值会根据M的变化而变化,有时需要将初次的值渲染到界面上,随后界面上的值不会根据M的改变而改变,无表达式的指令v-once告诉浏览器的Vue编译器,只渲染该元素或组件一次.
<body>
<div id="app">
<h1 v-once>有v-once:{{count}}</h1>
<h1>无v-once:{{count}}</h1>
<button @click="Increase">+</button>
<button @click="decrease">-</button>
</div>
</body>
<script>
const app = new Vue({
el:"#app",
data:{
count:0,
},
methods:{
Increase (){this.count++},
decrease: function (){this.count--},
}
})
</script>
v-html
当data对象里面存储了一个html标签,我们需要在mustache语法中读出这个标签具体的内容时,需要用的v-html去解译。
<body>
<div id="app">
<h2>{{url}}</h2>
<h2 v-html="url"></h2>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
url: '<a href="http://www.baidu.com">百度一下</a>'
}
})
</script>
</body>
v-text
v-text用于渲染普通文本,无论何时,绑定的数据对象上 msg属性发生了改变,插值处的内容都会更新。(我理解的和mustache语法相同结果)
<body>
<div id="app">
<h2>{{message}}, 路飞!</h2>
<h2 v-text="message">, 路飞!</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})
</script>
</body>
v-pre
一些静态的内容不需要编辑加这个指令可以加快编辑
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-pre>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
v-cloak
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码,这时使用v-cloak会使这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。
<body>
<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
// 在vue解析之前, div中有一个属性v-cloak
// 在vue解析之后, div中没有一个属性v-cloak
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
//setTimeout延迟1000毫秒
</script>
</body>
v-bind
主要用于属性绑定,普通形式:v-bind:,语法糖形式::
<body>
<div id="app">
<!-- 错误的做法: 这里不可以使用mustache语法-->
<!--<img src="{{imgURL}}" alt="">-->
<!-- 正确的做法: 使用v-bind指令 -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!--<h2>{{}}</h2>-->
<!--语法糖的写法-->
<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
imgURL: '图片地址',
aHref: 'http://www.baidu.com'
}
})
</script>
</body>