1、v-test:渲染数据
2、v-if:控制显示
<div id="app3">
<p v-if="seen">现在你看到我了</p>
</div>
//在控制台输入app3.seen = false 如上就会在浏览器上影藏掉
var app3 = new Vue({
el:'#app3',
data:{
seen:true
}
})
3、v-on:绑定事件
<div id="app5">
<p>{{message}}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
new Vue({
el:'#app5',
data:{
message:'Hello Vue.js!'
},
methods:{
reverseMessage:function(){
this.message = this.message.split('').reverse().join('')
}
}
})
4、v-for:循环渲染
<div id="app4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
//在控制台上输入app4.todos.push({text:'这是我最后添加的'})就会在后面添加序号为4的一条数据
var app4 = new Vue({
el:'#app4',
data:{
todos:[
{text :'学习 JavaScript'},
{text :'学习 VUE'},
{text : '整个项目学习'}
]
}
})
5、v-model:能轻松实现表单输入和应用状态之间的双向绑定
div id="app6">
<p>{{message}}</p>
<input v-model="message" />
</div>
var app6 = new Vue({
el:'#app6',
data:{
message:'Hello Vue'
}
})
6、鼠标点击到上方会有提示
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处冬天绑定的提示信息!
</span>
</div>
//在控制台上输入app2.message = "新消息"页面上鼠标点击到上方就会换成此提示
var app2 = new Vue({
el:'#app-2',
data:{
message:'页面加载于'+new Date().toLocaleString()
}
})