Vue實例與渲染

1 Vue框架

1.1 vue與jQuery區別

• jQuery仍然是操做DOM的思想，jQuery主要用來寫頁面特效
• Vue是前端框架(MVVM)，對項目進行分層。處理數據

1.2 前端框架

• angular google
• react facebook
• vue 全世界，社區維護

1.3 單頁面應用

1.4 MVVM

• M模型層 Model
• V視圖層 View
• VM(控制層)VIEW-MODEL

2 VUE實例

let app = new Vue({ el:'#app', //掛載元素 data:{ //數據 屬性名:值 }, methods:{ 屬性名:function(){ } //方法 }, computed:{ 屬性名:function(){ } //計算屬性 被動 別人改--本身改 }, watch:{ 屬性名:function(){ } //監聽屬性 主動 本身改--別人改 }, //生命週期的鉤子函數 beforeCreate:function(){ //實例剛建立時，只有this,但沒有任何屬性 }, created:function(){ //方法屬性等都已經建立，能夠在這裏獲取後端數據 }, beforeMount:function(){ //掛載完成前 }, mounted:function(){ //掛載完成，DOM操做寫在這，可是建議不使用DOM }, beforeUpdate:function(){ //數據更新前 }, upeated:function(){ //數據更新完成 }, //不多用 <!--activated--> <!--deactivated--> <!--beforeDestory--> <!--destoryed--> }) 注：function中調用屬性須要用this.屬性名 

3 Vue視圖

3.1 基本模塊語法

文本插值

{{ title }}
<p v-text='title'></p>
<p v-once>{{ title }}</p>  值一經設置不能改動 

HTML

<div v-html='message'></div> 

綁定屬性

<img v-bind:scr='imgSrc' v-bind:title='title'> 縮寫： <img :scr='imgSrc' :title='title'> 

防止閃爍

<style> [v-cloak] { display:none !important } </style> <div id='app' v-cloak> 

3.2 指令

* v-text * v-html * v-show * v-if * v-else-if * v-else * v-for * v-on 縮寫 @事件 * v-bind 縮寫 :屬性 * v-model * v-pre * v-cloak * v-once 

3.3 條件渲染

v-if v-else-if v-else true時顯示,false時什麼都沒 v-show v-show控制隱藏和顯示(改變display) 

3.4 列表渲染

v-for 例子:<li v-for="(item,index) in itemList"> {{index}} {{item}} </li>