Vue.js教程学习笔记
官方視頻簡(jiǎn)易教程：https://learning.dcloud.io/
1. 安裝與部署
第一階段（初學(xué)）可以通過(guò)在html文件中引入腳本來(lái)完成安裝
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>如果后期熟悉了CLI安裝器，則生成的可以不是html后綴的文件，而以vue為后綴。
2. 第一個(gè)Vue應(yīng)用
通過(guò)雙括號(hào)可以進(jìn)行變量雙向綁定。Vue()函數(shù)是Vue.js的主要函數(shù)。
var vm = new Vue();3. 數(shù)據(jù)與方法
對(duì)于
<div id="app"></div>可以用ID選擇器進(jìn)行選擇
var data = {a: 1,b: 1 }; var vm = new Vue({el: "#app",data: data });需要綁定的變量，必須先定義，然后才能生效。一下這兩種寫(xiě)法的效果是一樣的
vm.$data.b = "bbbBBB"; data.a = "aaaAAA";可以用watch來(lái)監(jiān)視變量的變化并進(jìn)行處理，但是一定只對(duì)定義watch來(lái)監(jiān)視變量的變化并進(jìn)行處理，但是一定只對(duì)定義watch來(lái)監(jiān)視變量的變化并進(jìn)行處理，但是一定只對(duì)定義watch之后發(fā)生的變化生效。
vm.$watch('a', function(newVal, oldVal){console.log(oldVal, ' change to ' ,newVal); }); data.a = "AAaa";上面的兩句交換位置就不生效了。
4. 生命周期
主要生命周期如下
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
5. 模板語(yǔ)法-插值
使用雙花括號(hào)進(jìn)行文本綁定；
使用v-html進(jìn)行HTML標(biāo)簽綁定；
使用v-bind進(jìn)行HTML標(biāo)簽屬性綁定；
插值內(nèi)容也支持Javascript表達(dá)式
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}6. 模板語(yǔ)法-指令
指令是以“v-”開(kāi)頭的vue標(biāo)簽屬性，例如：
v-if（條件渲染）
v-bind（屬性綁定）后用冒號(hào)帶參數(shù)，如上面的例子
指令后還可以使用修飾符，例如在下面的代碼中，click后面的stop修飾符用于阻止click事件向外層傳遞到click1：
<div @click="click1"><div @click.stop="click2">click here</div> </div> var vm = new Vue({el: '#app',data: { },methods:{click1: function() {console.log("this is click1");},click2: function() {console.log("this is click2");}} });7. class / style動(dòng)態(tài)綁定
如下面的代碼所示：
class1，class2，class3是3個(gè)不同的class，其中class2和class3通過(guò)isClass2，isClass3開(kāi)關(guān)進(jìn)行控制。通過(guò)v-bind:class可以將多個(gè)class綁定到同一個(gè)div上。
:style（注意必須有冒號(hào)），可以將style動(dòng)態(tài)綁定。注意動(dòng)態(tài)綁定style的時(shí)候，要使用{ }，且使用逗號(hào)進(jìn)行分隔。
8. 條件渲染
主要有v-if（也包括了v-else-if，v-else）和v-show。
前者是真的“條件渲染”，后者是渲染后控制“顯示或隱藏”。
相對(duì)而言，前者的切換成本高，后者的初始化成本高。
9. 列表渲染
使用v-for可以進(jìn)行列表渲染，其中循環(huán)的目標(biāo)可以是數(shù)組的不同元素，也可以是對(duì)象的不同屬性。如下面的代碼所示：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="vue.js" type="text/javascript" charset="UTF-8"></script></head><body><div id="app"><ul><li v-for="item, index in items" :key="index">{{index}} - {{ item.msg }}</li></ul><ul><li v-for="value, key in object" :key="key">{{key}} : {{ value }}</li></ul></div><script type="text/javascript">var vm = new Vue({el: '#app',data: {items: [{msg: 'one'},{msg: 'two'},{msg: 'three'}],object: {name: 'xiaoming',age: 7}}});</script></body> </html>10. 事件綁定
使用v-on進(jìn)行事件綁定，它可以綁定當(dāng)前元素所支持的任意一種事件。事件處理函數(shù)可以傳參，也可以使用修飾符。如下：
<div id="app"><button v-on:click="onClicked('abc', $event)">click me</button> </div><script type="text/javascript">var vm = new Vue({el: '#app',data: {name: 'vue'},methods: {onClicked : function(str, e) {alert('Hello '+this.name+', '+str);console.log(e);}}}); </script>11. 表單輸入綁定
使用 v-model 進(jìn)行表單輸入綁定。
不同的輸入元素使用不同的 property 并拋出不同的事件：
- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段將 value 作為 prop 并將 change 作為事件。
v-model 是雙向綁定，可以通過(guò)給data中的變量設(shè)置初始值的方法，反向設(shè)定表單元素的默認(rèn)值。
詳見(jiàn)：https://cn.vuejs.org/v2/guide/forms.html
12. 組建基礎(chǔ)
用Vue.component()方法聲明組件：
組件可以復(fù)用
組件的data是一個(gè)方法
組件的prop可以用來(lái)向內(nèi)傳遞數(shù)據(jù)
組件必須有一個(gè)根元素，否則后續(xù)元素?zé)o法渲染
組件可以通過(guò)$emit方法向外傳遞事件，或者拋出值
通過(guò)組件的slot可以支持在外部向組件中插入html元素
詳見(jiàn)：
https://cn.vuejs.org/v2/guide/components.html
https://learning.dcloud.io/#/?vid=12
13. 相關(guān)工具的安裝
- npm安裝
安裝完node.js后，npm包管理工具就自動(dòng)安裝好了 - cnpm
這是中國(guó)版的npm，由于mirror的原因，可以更快的安裝所需的包
- vue-cli 腳手架工具
- webpack （JavaScript打包器）
總結(jié)
以上是生活随笔為你收集整理的Vue.js教程学习笔记的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Nginx反向代理多个应用时，通过Blu
- 下一篇： Vue前端-Flask后台跨域访问问题的