Vue
采用簡潔的模板語法來，聲明式地將數(shù)據(jù)渲染進去DOM系統(tǒng)：
< div id = "app">
{ {message} }
</div>
let app = new Vue ({
el : '#app',
data:{
message:' Hello Vue! '
}
})
這就創(chuàng)建了一個 VUE 應用！ 看起來這跟 渲染一個 字符串模板 非常類似，但是 Vue 做了大量的工作，現(xiàn)在數(shù)據(jù)和DOM 已經(jīng)被建立了關聯(lián)，所有東西都是響應式的。
在 javaScript 控制臺，并修改 app.message 的值，上面例子的 值 也會發(fā)生改變。
綁定元素的 特性
v - bind
<div id = ' app - 2 '>
<span v - bind:title = ' message '>
//鼠標懸停幾秒鐘查看此處動態(tài)綁定的提示信息！
</span>
</div>
var app2 = new Vue({
el : '#app2',
data : {
message : ' 頁面加載與 ' + new Date() . toLocaleString()
// 現(xiàn)在的時間 轉換了 時間格式。
}
})
條件 與 循環(huán)
控制切換一個元素是否顯示。
v - if
<div id = "app-3">
<p v - if = "seen"> 現(xiàn)在你看到我了 </p>
</div>
let app3 = new Vue({
el : ' #app - 3 ',
data:{
seen : true
}
})
// 在 控制臺 輸入 app3.seen = false.
顯示的信息消失、
vue 不僅可以 把 數(shù)據(jù) 綁定到 DOM 文本或特性， 還可以 綁定到 DOM 結構，此外，Vue 也提供，一個強大的 過渡效果系統(tǒng)，可以在 Vue 插入 更新 移除 元素 時 自動應用，過渡效果。
指令 ：
v - for 可以綁定 數(shù)組的 數(shù)據(jù) 來 渲染 一個 項目列表：
<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 : ' 學習 JavaScript ' },
{ text : ' 學習 Vue ' },
{ text: '整個牛項目 ' }
}
}
})
在控制臺 ，輸入 app4.todos.push( text: ' 新項目 ' ) ， 添加了新項目。
處理用戶輸入
v-on 添加一個事件監(jiān)聽器， 調(diào)用 它在 Vue 中 定義的方法：
<div id = "app-5">
<p>
{{ message }}
</p>
<button v - on : click = ' reverseMessage '>
逆轉消息
</button>
</div>
let app5 = new Vue({
el : '#app-5',
data: {
message: ' Hello Vue.js! '
},
methods: {
reverseMessage: function(){
this.message = this.message.split('').reverse().join('')
}
}
})
v - model 指令 ， 它能輕松實現(xiàn) 表單輸入 和 應用狀態(tài)之間的 雙向綁定。
<div id = "app-6">
<p> {{message}}</p>
<input v-model =" message ">
</div>
let app6 = new Vue({
el : ' #app-6 ',
data : {
message : ' Hello Vue ! '
}
})
組件化應用構建
<ol>
// 創(chuàng)建 一個 todo - item 組件的 實例
<todo-item></todo-item>
</ol>
Vue.component ( 'todo-item',{
template : ' <li> 這是誰??？ </li>'
} )
