基础语法
v-bind
<div id="app">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息!
</span>
</div>
12345
你看到的 v-bind 等被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
如果你再次打开浏览器的 JavaScript 控制台,输入 app.message = ‘新消息’,就会再一次看到这个绑定了 title 特性的 HTML 已经进行了更新。
v-if,v-else
<div id="app">
<h2 v-if="ok">Yes</h2>
<h2 v-else>No</h2>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
//viewModel 实现与Model双向绑定,动态更新视图
var vm = new Vue({
el:"#app",
// model :数据
data:{
ok: true
}
});
</script>
v-for
<div id="vue">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
注:items
是数组,item
是数组元素迭代的别名。
<div id="app">
<li v-for="item in items">
{{item.message}}
</li>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
//viewModel 实现与Model双向绑定,动态更新视图
var vm = new Vue({
el:"#app",
// model :数据
data: {
items: [
{message: "java"},
{message: "pyhon"},
{message: "vue"}
]
}
});
</script>
v-on
<div id="app">
<button v-on:click="sayHello">点我</button>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
//viewModel 实现与Model双向绑定,动态更新视图
var vm = new Vue({
el:"#app",
data: {
message : "vue"
},
methods: {
sayHello : function() {
alert(this.message);
}
}
});
</script>
v-on
监听事件
事件有Vue的事件、和前端页面本身的一些事件!我们这里的click
是vue的事件,可以绑定到Vue中的methods
中的方法事件!