标签：指令 循环 resume vue 动态绑定 鼠标 todo dom 应用
引入vue.js:
<script src="https://unpkg.com/vue/dist/vue.js"></script>
可以通过这种简洁的模板语法来声明式的将数据渲染进 DOM：
<div id="app">{{msg}}</div>
var app = new Vue({
el:‘#app‘,
data: {
msg:‘resume vue‘
}
})
v-bind称为指令，主要用于绑定DOM元素属性，指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。以下是v-bind的应用：
<div id="app2">
<span v-bind:title="msg">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el:‘#app2‘,
data: {
msg:‘页面加载于 ‘ + new Date()
}
})
v-if、v-for分别用于条件与循环。
<div id="app-3">
<p v-if="seen">你现在可以看到我了</p>
</div>
var app3 = new Vue({
el: ‘#app-3‘,
data: {
seen: false
}
})
此时当我们在浏览器console里输入app-3.seen=true，就可以发现在页面上的“你现在可以看到我了”
<div id="app4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var app4 = new Vue({
el : "#app4",
data : {
todos:[
{text : ‘javascript‘},
{text : ‘vue‘},
{text : ‘angular‘},
{text : ‘react‘}
]
}
})
标签：指令 循环 resume vue 动态绑定 鼠标 todo dom 应用
原文地址：http://www.cnblogs.com/dayaodao/p/6878387.html
