一、引入Vue
<!-- 开发环境版本,包含了用帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
二、声明式渲染
<div id="app">
{{messsage}}
</div>
<script type="text/javascript" charset="utf-8">
var app = new Vue({
el:'#app',
data:{
messsage:'wangxuan'
}
});
</script>
Vue在背后做了大量的工作,现在数据和DOM已经被关联了起来,可以通过修改app.message来更新页面。
三、绑定元素特征
<div id='app-2'>
<span v-bind:title="message">
悬停查看效果
</span>
</div>
var app2 = new Vue({
el:"#app-2",
data:{
message:'页面加载于'+new Date().toLocaleString()
}
})
v-bind特性被称为指令,v-为前缀的是Vue提供的特殊特性,v-bind的意思是绑定,这里指将title与message属性保持一致
四、条件
<div id="app-3">
<span v-if='seen'>不可见</span>
</div>
var app3 = new Vue({
el:"#app-3",
data:{
seen:false
}
})
Vue提供了强大的过滤系统,可以在插入/更新/移除元素时进行应用过滤。这里seen来控制span的可见性,false时不可见,将app3.seen改为true便可见了。
五、循环
<div id="app-4">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
var app4 = new Vue({
el:"#app-4",
data:{
todos:[{
text:1
},{
text:2
},{
text:3
}]
}
})
v-for可以绑定数组来渲染列表,我们可以操作app4.todos.push({text:4})来增加新项目
六、处理用户输入
为了能与用户进行交互,我们可以用v-on指令添加一个事件监听器,通过它调用在Vue实例中定义的方法。
<div id="app-5">
<span>{{message}}</span>
<button v-on:click='reverseMessage'>翻转字符串</button>
</div>
var app5 = new Vue({
el:"#app-5",
data:{
message:"Hello Vue!"
},
methods:{
reverseMessage:function(){
this.message = this.message.split("").reverse().join("");
}
}
})
Vue提供v-model来实现表单输入与应用状态之间的双向绑定,当在输入框输入时,span的内容也会同步更新
<div id="app-6">
<span>{{message}}</span><br>
<input v-model='message'/>
</div>
var app6 = new Vue({
el:"#app-6",
data:{
message:"Hello wangxuan"
}
})
七、组件化应用构建
在Vue里,一个组件本质上是一个拥有预定义选项的Vue实例。
<div id="app-7">
<ul>
<!--每个list-item提供todo对象,它是变量,即其内容是动态的。我们为每个组件提供了一个key-->
<list-item v-for='item in lists' v-bind:todo='item' v-bind:key='item.id'></list-item>
</ul>
</div>
/*新建了一个名为list-item的组件*/
Vue.component('list-item',{
props:['todo'],
template:'<li>{{todo.text}}</li>'
})
var app7 = new Vue({
el:"#app-7",
data:{
lists:[{
id:0,text:1
},{
id:1,text:2
}]
}
})