vue.js是一套构建用户界面的渐进式框架,采用自底向上增量开发的设计。Vue的核心库只关注图层。
声明式渲染
运用简洁的模板语法来声明式地将数据渲染进DOM系统:
<div id="app">
{{message}}
</div>
var app = new Vue({
el:'#app',
data:{
message:'Hello Vue!'
}
})
显示效果
Hello Vue!
属性
v-bind指令绑定属性
例如:v-bind:class 可用于判断指定的样式
v-bind:title
条件与循环
v-if控制切换元素的显示
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el:'#app-3',
data:{
seen:true
}
})
显示效果:
Now you see me
v-for指令可以绑定数据到数据来渲染一个列表
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el:'#app-4',
data:{
todos:[
{ text : 'Learn JavaScript' },
{ text : 'Learn Vue' },
{ text : 'Build something awesome' }
]
}
})
显示效果:
1.Learn JavaScript
2.Learn Vue
3.Build something awesome
app4.todos.push({ text: 'New item' })
可向列表中新增一条新内容
处理用户输入
v-on指令绑定监听事件用于调用Vue实例中定义的方法:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
v-model双向数据绑定★★★★★
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
当改变input中的值时,p元素中的值也会改变。
用组件构建(应用)component★★★★★
全局component:
<ul>
<todo-item></todo-item>
</ul>
Vue.component('todo-item',{
template: '<li>This is a todo</li>'
})
以上会为每个todo渲染同样的文本,应该将数据从父作用域传到子组件,可运用prop字段,利用v-bind指令将todo传到每一个重复的组件中:
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
显示效果:
Vegetables
Cheese
Whatever else humans are supposed to eat