Vue學習筆記javascript
一、 vue是什麼?css
Vue是一套用於構建用戶界面的漸進式框架(漸進式框架:分層設計,即你須要使用一種框架或者工具的時候,引入便可使用他的大部分功能,須要使用其餘功能的時候只須要添加相應功能插件【作加法】,相似於Jquery,由簡單到複雜,優勢:節省成本https://www.zhihu.com/question/51907207)。與其餘大型框架不一樣的是,Vue被設計爲能夠自底向上逐層應用。Vue的核心層只關注視圖層,不只易於上手,還便於與第三方庫或既有項目整合。另外一方面,當與現代化的工具鏈以及各類支持類庫結合使用時,Vue也徹底可以爲複雜的單頁應用提供驅動。html
二、 Hello Vue!搭建一個Vue框架;vue
1> 定義Viewjava
2> 定義Modeljquery
3> 建立一個Vue實例或"ViewModel",它用於鏈接View和Modelnpm
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', name: 'Hello Vue!' }, // template: '<h1 style="color:red">我是選項模板2<br />{{ name }}</h1>', // template: '#demo3', /* el 被新建立的 vm.$el 替換,並掛載到實例上去以後調用該鉤子 * 能夠簡單的理解爲:就是渲染dom節點的時候使用 * vue加載完成後回調函數 * 運行AJAX事件請求數據 */ mounted: function () { //延遲迴調 this.$nextTick(function () { // $("#message").val("Hello Vue,I am message!"); // $("#name").val("Hello Vue,I am name!"); app.$data.message = "Hello Vue,I am message!"; app.$data.name = "Hello Vue,I am name!"; // alert(app.$data.name); var i = 0; var interIndex = setInterval(function(){ app.$data.name = (i++) + 1; }, 1000); }); //app.$data.name = "Hello World1!";//會報錯:app對象不存在 // alert($("#temp").is(':hidden')); }, methods: {//自定義方法 } })
三、 數據驅動?app
Vue是數據驅動的,那什麼叫作數據驅動,舉個例子,咱們電腦裝了一個顯卡,電腦是怎麼控制的呢,就是由於驅動,電腦經過顯卡驅動控制顯卡,同理,vue至關於驅動,元素至關於顯卡,咱們不直接操做元素,咱們只須要操做vue實例用以操做元素,好比咱們須要給一個id爲tem的dom元素賦值,Jquery的作法是$(「#tem」).val(‘aaa’),直接操做元素用以賦值,而vue的作法是它會建立一個實例直接將數據與dom進行綁定,數據與dom元素將保持同步,當數據變動,dom也會隨之更新;(dom元素隨數據改變而改變,那數據會不會隨dom元素改變而改變。這單向綁定,仍是雙向綁定?)引出MVVM模式
四、 MVVM模式(Model-View-ViewModel)框架
MVVM模式自己是實現了雙向綁定的,在Vue.js中可使用v-model指令在表單元素上建立雙向數據綁定。dom
下圖不只歸納了MVVM模式(Model-View-ViewModel),還描述了在Vue.js中ViewModel是如何和View以及Model進行交互的。
ViewModel是Vue.js的核心,它是一個Vue實例。Vue實例是做用於某一個HTML元素上的,這個元素能夠是HTML的body元素,也能夠是指定了id的某個元素。
當建立了ViewModel後,雙向綁定是如何達成的呢?
首先,咱們將上圖中的DOM Listeners和Data Bindings看做兩個工具,它們是實現雙向綁定的關鍵。
從View側看,ViewModel中的DOM Listeners工具會幫咱們監測頁面上DOM元素的變化,若是有變化,則更改Model中的數據;
從Model側看,當咱們更新Model中的數據時,Data Bindings工具會幫咱們更新頁面中的DOM元素。
五、 生命週期
六、 經常使用指令
v-if指令
年齡:<span v-if="age > 20">{{ age }}</span> <span v-else-if="age > 18">{{ age+"(未成年)" }}</span> <span v-else>{{ age+"(小孩)" }}</span><br />
v-show指令
<!-- v-if 直接刪除元素; v-show 修改style屬性:display:none; --> 性別:<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br />
v-for指令
<table> <tr> <th>姓名</th> <th>性別</th> <th>性別(我是簡寫)</th> <th>年齡</th> </tr>
<!-- temp 1 --> <tr v-for="emp in employees"> <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td> <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td> <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <!-- b-bind:attrbute="" 簡寫 :bind:attrbute="" --> <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <td v-if="emp.age>20">{{ emp.age }}</td> </tr>
<!-- temp 2 -->
<tr v-for="(emp, index) in employees">
<td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td>
<td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
<td v-if="emp.age>20">{{ emp.age }}</td>
</tr> </table>
v-bind指令
<td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <!-- b-bind:attrbute="" 簡寫 :bind:attrbute="" --> <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td>
v-on指令
<button type="button" v-on:click="remove">刪除</button> <!-- b-on:click="" 簡寫 @click="" --> <button type="button" @click="remove">刪除(我是簡寫)</button
<button v-on:click="removeByIndex(index)">刪除</button>
七、寫一個Demo
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基礎的VUE介紹</title> <link rel="stylesheet" href="../assets/css/index.css"> <style type="text/css"> html, body {width: 100%;} #app {width: 95%; margin: auto;} #app table {border-collapse: collapse;} #app table th,td {width: 200px; border: 1px #ccc solid; text-align: center;} #app .boy {background: blue;} #app .girl {background: red;} </style> </head> <body> <div id="app"> <h1>v-if/v-else/v-show</h1> 姓名:<span v-if="name.indexOf('某') >= 0">{{ name }}</span> <span v-else="name.indexOf('某') < 0">{{ name+"(缺某)" }}</span><br /> 年齡:<span v-if="age > 20">{{ age }}</span> <span v-else-if="age > 18">{{ age+"(未成年)" }}</span> <span v-else>{{ age+"(小孩)" }}</span><br /> <!-- v-if 直接刪除元素; v-show 修改style屬性:display:none; --> 性別:<span v-show="sex=='男'||sex=='女'">{{ sex }}</span><br /> <hr /><h1>v-on/v-model</h1> 姓名:<input type="text" id="name" v-model="name" /> <br /> 性別:<input type="radio" name="sex" value="男" v-model="sex" /> 男 <input type="radio" name="sex" value="女" v-model="sex" /> 女 <br /> 年齡:<input type="text" id="age" v-model="age" /><br /> <input type="button" value="添加" @click="save"/> <hr /><h1>v-for(1)</h1> <table> <tr> <th>姓名</th> <th>性別</th> <th>性別(我是簡寫)</th> <th>年齡</th> </tr> <tr v-for="emp in employees"> <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td> <td v-bind:id="'td'+emp.name" v-else>{{ emp.name+"(缺某)" }}</td> <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <!-- b-bind:attrbute="" 簡寫 :bind:attrbute="" --> <td :class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <td v-if="emp.age>20">{{ emp.age }}</td> </tr> </table> <hr /><h1>v-on</h1> <button type="button" v-on:click="remove">刪除</button> <!-- b-on:click="" 簡寫 @click="" --> <button type="button" @click="remove">刪除(我是簡寫)</button> <hr /><h1>v-for(2)</h1> <table> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>操做</th> </tr> <tr v-for="(emp, index) in employees"> <td v-bind:id="'td'+emp.name" v-if="emp.name.indexOf('某')>=0">{{ emp.name }}</td> <td v-bind:class="emp.sex=='男'?'boy':'girl'" v-if="emp.sex=='男'||emp.sex=='女'">{{ emp.sex }}</td> <td v-if="emp.age>20">{{ emp.age }}</td> <td><button v-on:click="removeByIndex(index)">刪除</button></td> </tr> </table> </div> <div style="height: 200px; width: 100%; text-align: center; margin-top: 200px;"><h1>看不見我,看不見我,看不見我</h1></div> </body> <script type="text/javascript" src="../assets/js/vue/dist/vue.js"></script> <script type="text/javascript" src="../assets/js/jquery.js"></script> <script type="text/javascript" src="index.js"></script> </html>
JS(index.js)
var app = new Vue({ el: '#app', data: { name: '金某某', age: 24, sex: '男', employees: [{ name: '金某某1', age: 24, sex: '男', },{ name: '金某某2', age: 21, sex: '女', },{ name: '金某某3', age: 23, sex: '男', }] }, mounted: function () { //延遲迴調 this.$nextTick(function () { }); Array.prototype.deleteByIndex = function(delIndex){ var temArray=[]; for(var i=0;i<this.length;i++){ if(i!=delIndex){ temArray.push(this[i]); } } return temArray; } }, methods: {//自定義方法 remove: function(){ if(app.$data.employees.length > 0) app.$data.employees = app.$data.employees.deleteByIndex(app.$data.employees.length - 1); else alert("列表被被刪完了 :(") }, removeByIndex: function(index){ app.$data.employees = app.$data.employees.deleteByIndex(index); }, save: function(){ var emp = {}; emp.name = app.$data.name; emp.age = app.$data.age; emp.sex = app.$data.sex; app.$data.employees.push(emp); } } })
敬謝:
http://www.javashuo.com/article/p-thghdyau-k.html
https://cn.vuejs.org/v2/guide/
Vue.js
<!-- 開發環境版本,包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產環境版本,優化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>