Vue.js學習筆記總結1
阿新 • • 發佈：2018-04-01
tle clas 吃飯 line als list bool 都是 數據驅動
一、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>實例完
Vue.js學習筆記總結1