一、vue介紹 + vue類似於高級的模版引擎 + vue的核心思想就是：數據驅動視圖 MVVM 1. 每一個vue程式都是以 new Vue()開始的 2. 每一項vue實例都接收一個選項對象來配置vue應用 3. 選項的 el 屬性用來高數 vue的啟動入口節點 + 入口節點中所有的節點就可以使 ...
一、vue介紹
- vue類似於高級的模版引擎
vue的核心思想就是：數據驅動視圖 MVVM
<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
- 每一個vue程式都是以 new Vue()開始的
- 每一項vue實例都接收一個選項對象來配置vue應用
選項的 el 屬性用來高數 vue的啟動入口節點
- 入口節點中所有的節點就可以使用vue的語法了,從某種意義上，vue就是一種高級的模版引擎
- 入口id不能掛載到html,body 元素，只能是一個普通的元素，所以一般我們的頁面一開始就來一個 div#app
vue的模版對象數據通過data 選項來指定
以前我們使用
template('tpl',{f00: 'bar' <%=foo %>},或者 {{ foo }})- 創建vue程式之後可以通過返回值拿到我們的vue實例，我們可以通過vue實例直接訪問data中的成員
data中的數據是響應式的
- data中數據發生改變，則所有綁定了data數據的DOM都會發生改變，這就是所謂的"數據驅動視圖"模式mvvm
我們可以通過實例選項的methods來配置實例方法
- 我們建議把數據放到 data 中
- 把方法放到 methods 選項中
- 在方法中我們可以通過 this 來訪問 Vue 實例
vue操作自增示例
<!-- el: '#app' 這裡節點是被 Vue 管理的模板 --> <div id="app"> <h1>{{ num }}</h1> <h2>{{ num }}</h2> <p>{{ num + 1 }}</p> <ul> <li>{{ num }}</li> </ul> <!-- 事件註冊，綁定了 data 中的 increment 方法 --> <button v-on:click="increment">點我讓num+1</button> </div> var app = new Vue({ el: '#app', data: { // 模板數據對象，在模板中可以直接使用 foo: 'bar', num: 10 }, methods: { increment: function () { // 我們利用數據驅動視圖的方式，改數據，從而改DOM // 不建議直接使用實例的名稱，因為一旦實例名稱發生改變，這裡都得修改 // app.num++ this.num++ } } })二、數據綁定
屬性綁定
<h1>{{ message }}</h1> <!-- {{}} 不能用於屬性綁定 --> <!-- 屬性綁定使用 v-bind:屬性名="數據成員" -->1.v-model 雙向綁定 v-bind單向綁定 v-if 指令
指令名稱：v-model
- 語法：v-model="綁定的成員"所謂的雙向綁定只是針對錶單控制項的例如：文本框、單選框、覆選框數據的改變會影響這個表單控制項表單控制項的改變會影響數據
- 使用場景
- 帶有 value 的 input 都可以使用雙向綁定
- 覆選框使用雙向綁定
+
<input type="checkbox" v-model="checkboxValue">覆選框雙向綁定需要給一個布爾值, 布爾值為真的時候，覆選框被占用,布爾值為假的時候，覆選框取消選中。當數據發生變化的時候會影響 checkbox，當 checkbox 發生變化的時候會影響數據
v-bind單向綁定
- v-bind 是單向的，只能被數據影響，但是不會影響數據
v-if 指令
- 給一個 Boolean 值，該指令會根據布爾值的真假來顯示和隱藏
<div id="box" v-if="seen"></div>
todo-list案例
- 給一個 Boolean 值，該指令會根據布爾值的真假來顯示和隱藏
<style>
.done {
text-decoration: line-through;
color: #ccc;
}
</style>
</head>
<body>
<div id="app">
<h1>Todo</h1>
<!-- {{ }} 中也可以調用方法，將方法的返回值渲染到這裡 -->
<p> {{ calculate() }} of {{ array.length }} remaining <a href="#" v-on:click="clearAll">archive</a></p>
<ul>
<li v-for="item in array">
<!-- 因為 checkbox 是雙向綁定，所以當 checkbox 發生變化的時候就把改變同步到數據中了
也就是 item.done 會隨著 checkbox 的改變而改變-->
<input type="checkbox" v-model="item.done">
<!-- class 比較特殊
如果是動態的 class 我們也是使用 v-bind 來綁定
但是我們需要給 class 一個對象
對象的 key 是類名，值是一個布爾值
當布爾值為真的時候，則作用這個類名
反之去除這個類名
同樣的，也是響應式的，當數據發生改變的時候，class 綁定也會受影響 -->
<span v-bind:class="{ done: item.done }">{{ item.title }}</span>
</li>
</ul>
<input type="text" placeholder="add new todo here"
v-model="inputText">
<button v-on:click="addArray">add</button>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var array=[
{
title: '吃飯',
done: true
},
{
title: '睡覺',
done: false
},
{
title: '寫代碼',
done: false
},
{
title: '吃飯',
done: true
}
]
var app=new Vue({
el:'#app',
data: {
array,
inputText:'',
},
methods: {
addArray: function(){
this.array.push({title:this.inputText,done:false})
this.inputText='' //清空文本框
},
clearAll: function(){
//找到所有為done:true 的元素從數組中刪除
var newArry=this.array.filter(function(item){
return !item.done
})
this.array=newArry
},
//計算剩餘為執行的個數 返回done:fase的數組的lenght
calculate: function(){
return this.array.filter(function(item){return !item.done}).length
}
}
})
</script>
