Vue.js教程学习笔记
官方視頻簡易教程：https://learning.dcloud.io/
1. 安裝與部署
第一階段（初學）可以通過在html文件中引入腳本來完成安裝
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>如果后期熟悉了CLI安裝器，則生成的可以不是html后綴的文件，而以vue為后綴。
2. 第一個Vue應用
通過雙括號可以進行變量雙向綁定。Vue()函數是Vue.js的主要函數。
var vm = new Vue();3. 數據與方法
對于
<div id="app"></div>可以用ID選擇器進行選擇
var data = {a: 1,b: 1 }; var vm = new Vue({el: "#app",data: data });需要綁定的變量，必須先定義，然后才能生效。一下這兩種寫法的效果是一樣的
vm.$data.b = "bbbBBB"; data.a = "aaaAAA";可以用watch來監視變量的變化并進行處理，但是一定只對定義watch來監視變量的變化并進行處理，但是一定只對定義watch來監視變量的變化并進行處理，但是一定只對定義watch之后發生的變化生效。
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. 模板語法-插值
使用雙花括號進行文本綁定；
使用v-html進行HTML標簽綁定；
使用v-bind進行HTML標簽屬性綁定；
插值內容也支持Javascript表達式
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}6. 模板語法-指令
指令是以“v-”開頭的vue標簽屬性，例如：
v-if（條件渲染）
v-bind（屬性綁定）后用冒號帶參數，如上面的例子
指令后還可以使用修飾符，例如在下面的代碼中，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動態綁定
如下面的代碼所示：
class1，class2，class3是3個不同的class，其中class2和class3通過isClass2，isClass3開關進行控制。通過v-bind:class可以將多個class綁定到同一個div上。
:style（注意必須有冒號），可以將style動態綁定。注意動態綁定style的時候，要使用{ }，且使用逗號進行分隔。
8. 條件渲染
主要有v-if（也包括了v-else-if，v-else）和v-show。
前者是真的“條件渲染”，后者是渲染后控制“顯示或隱藏”。
相對而言，前者的切換成本高，后者的初始化成本高。
9. 列表渲染
使用v-for可以進行列表渲染，其中循環的目標可以是數組的不同元素，也可以是對象的不同屬性。如下面的代碼所示：
<!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進行事件綁定，它可以綁定當前元素所支持的任意一種事件。事件處理函數可以傳參，也可以使用修飾符。如下：
<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 進行表單輸入綁定。
不同的輸入元素使用不同的 property 并拋出不同的事件：
- text 和 textarea 元素使用 value property 和 input 事件；
- checkbox 和 radio 使用 checked property 和 change 事件；
- select 字段將 value 作為 prop 并將 change 作為事件。
v-model 是雙向綁定，可以通過給data中的變量設置初始值的方法，反向設定表單元素的默認值。
詳見：https://cn.vuejs.org/v2/guide/forms.html
12. 組建基礎
用Vue.component()方法聲明組件：
組件可以復用
組件的data是一個方法
組件的prop可以用來向內傳遞數據
組件必須有一個根元素，否則后續元素無法渲染
組件可以通過$emit方法向外傳遞事件，或者拋出值
通過組件的slot可以支持在外部向組件中插入html元素
詳見：
https://cn.vuejs.org/v2/guide/components.html
https://learning.dcloud.io/#/?vid=12
13. 相關工具的安裝
- npm安裝
安裝完node.js后，npm包管理工具就自動安裝好了 - cnpm
這是中國版的npm，由于mirror的原因，可以更快的安裝所需的包
- vue-cli 腳手架工具
- webpack （JavaScript打包器）
總結
以上是生活随笔為你收集整理的Vue.js教程学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Nginx反向代理多个应用时，通过Blu
- 下一篇： Vue前端-Flask后台跨域访问问题的