Vue.js 前端框架学习笔记（二）
v-html 指令
<script src="https://npmcdn.com/vue/dist/vue.js">
new Vue({
el: '#app',
data: {
message :'哎呦，不错哦',
}
})
</script>
<div id="app"><div v-html = "message">
</div>
</div>
v-bind 指令
<script src="https://npmcdn.com/vue/dist/vue.js">
new Vue({
el: '#app',
data: {
h: true
}
})
</script>
<div id="app"><label for="r1">修改颜色</label><input type="checkbox" v-model="h" id="r1">
<br><br>
<div v-bind:class="{'h': h}">
看我七十二变
</div>
</div>
<script src="https://npmcdn.com/vue/dist/vue.js">
new Vue({
el: '#app',
data: {
url: 'www.baidu.com'
}
})
</script>
<div id="app"><pre><a v-bind:href="url">百度一下</a></pre>
</div>
href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。
<!-- 缩写 --> <a :href="url"></a>
指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上
点击事件
<script src="https://npmcdn.com/vue/dist/vue.js">
new Vue({
el: '#app',
data: {
messsage:"欢迎来到王者荣耀",
},
methods: {
test: function () {
alert(this.messsage);
}
}
})
</script>
<div id="app"><button v-on:click="test">快点我</button>
</div>
<!-- 缩写 --> <a @click="doSomething"></a>
条件判断
<script src="https://npmcdn.com/vue/dist/vue.js">
new Vue({
el: '#app',
data: {
test : true,
}
})
</script>
<div id="app"><p v-if="test">现在你看到我了</p>
</div>
v-if 指令将根据表达式 的值(true 或 false )来决定是否插入 p 元素。
v-for 迭代对象
<script src="https://npmcdn.com/vue/dist/vue.js">
new Vue({
el: '#app',
data: {
son:{
name :'vue.js',
url:'http://www.runoob.com/vue2/vue-loop.html',
title:'发家致富道道多'
}
}
})
</script>
<div id="app">
<ul>
<li v-for="(value,key) in son">
{{key}} : {{value}}
</li>
</ul>
</div>