VUE入門指令學習--＞黑馬程式員

框架和庫的區別：

1. 框架：一套解決方案，堆專案的侵入大，更換框架則專案要重構，如：Node 中express

2. 庫(插件)：提供某個功能，專案中可隨意切換， 如：從Jq切換到Zepto

打包工具 Webpack, Gulp

發展歷程：

Js ->JQ(解決兼容)->模板引擎(解決字串拼接)->vue/react(減少DOM操作)

框架優點:

• 不再操作dom

• 提高渲染效率

• 雙向資料系結

MVVM: model, view, VM, ViewModel

使用步驟：

1. Js匯入vue框架

2. 上圖，app標簽就是view層，script代碼時VM層，其中的data是model層，

指令：

**{{ }}：**插值運算式

<P v-cloak>{{ msg }}</P>
<h2 v-text="msg"></h2>

v-cloak： 能夠解決插值運算式{{}}閃爍問題(display增加none屬性)

v-text: 默認沒有閃爍問題，但是它將完全覆寫元素內容，

**v-html： **輸出html格式，會覆寫內容，

**v-bind： **用于系結屬性的指令，還可以加運算式，簡寫形式：，

v-on: 用于系結事件，mouseover、click等，簡寫形式@

<input type="button" value="點擊" v-on:click="show">

方法的定義也可以簡寫：

    var vm = new Vue({

     el:'#app',

      data:{

        msg:'啤酒飲料礦泉水，瓜子花生八寶粥，'

     },

     methods:{

       run(){

         console.log(this.msg)

        }

      }

    })

方法里必須用this.來呼叫msg，substring截取字串

定時器 ： setInterval(function()=>{},400)

符號=>解決this指向問題

事件修飾符@click.prevent.once

• Stop：阻止冒泡(點擊按鈕不會同時觸發外層的事件)

• Prevent：阻止默認事件(比如點擊鏈接阻止跳轉)

• Capture：添加事件偵聽器時使用時間捕獲模式(從外到里觸發事件)

• Self：只當事件在該元素本身(比如不是子元素)觸發時觸發回呼

• Once：事件只觸發一次

v-model和雙向資料系結:

瀏覽器控制臺查看VM物件：window.vm

v-bind只能實作資料的單向系結，M到V.

**v-model：**可以實作表單元素和Model中資料的雙向資料系結，只能運用在表單元素中

使用樣式：

1. 使用陣列，如

   <h1 :class="['thin','red']">
   

2. 陣列使用三元運算式

   <h1 :class="['thin','red',flag?'active':'']">
   

3. 物件的形式

   <h1 :class="['thin','red',{'active':flag}]">
   

4. 直接使用

   <h1 :class="[thin: true,red:false]">
   

使用行內樣式：

1. 直接在元素上使用

2. 將樣式物件定義到data，直接參考style

3. 通過陣列參考data上的樣式物件

V-for和key：

v-for陣列

普通陣列（直接列印）

<p v-for="item in list">{{item}}</p>
<p v-for="(item,i) in list">索引值{{i}}---{{item}}</p>

全陣列(data中用[ ]保存)

 <p v-for="(user,i) in list">ID:{{user.id}}---{{user.name}}--- 索引{{i}}</p>

物件(data中用{ } 保存)

<p v-for="(val,key,index) in user"> {{index}}---{{val}}---{{value}}</p>

v-for迭代

從1開始

<p v-for="count in 10">這是第{{count}}次回圈</p>

注意事項:

v-for的key屬性只能使用number獲取string

使用key的時候,必須使用v-bind屬性系結的形式,指定key的值

在組件中,或一些特殊情況,v-for如果有問題,必須指定唯一的字串/數字 型別:key 值-

v-if / v-show

 <input type="button" value="rto" @click="flag=!flag">

?    <h3 v-if="flag">v-if</h3>

?    <h3 v-show="flag">v-show</h3>

v-if的特點是,每次都會洗掉或創建元素.有較高的切換性能消耗

v-show只是切換元素的display:none樣式,不洗掉創建.有較高的初始渲染消耗

如果涉及頻繁的切換,推薦使用v-show,如果元素可能永遠也不會被顯示出來給用戶看到,則推薦使用v-if.

**不需要使用Jquery,在VUE中不推薦使用

**

品牌案例:

通過索引, 使用Some, findIndex完成洗掉操作

Vue-devtools的兩種安裝方式:

**注意：**forEach some filter findIndex 這些都屬于陣列的新方法，都會對陣列每一項進行遍歷， forEach不能終止，filter過濾，findIndex找索引，

ES6為字串提供了一個新方法，叫做String.prototype.includes(‘要包含的字串’)，包含回傳true，否則回傳false

過濾器 {{ name | 過濾器名稱 }}，管道符 |

  <div id="app">
        <p> {{ msg | msgFormat}}</p>
  </div>
   

 <script>
    //定義一個Vue全域過濾器

?    Vue.filter('msgFormat',function(msg){

?      // return msg.replace('蕪湖','哈哈')

?      //這個只能換第一個，

?      return msg.replace(/蕪湖/g,'哈哈')

?    })

?    var vm = new Vue({

?      el: '#app',

?      data: {

?        msg: '蕪湖，曾經，我蕪湖蕪湖起飛'

?      },

?      methods: {}

?    });

可以多次呼叫：

   <div id="app">

       <p> {{ msg | msgFormat('瘋狂','123') | test }}</p>

 </div>
   <script>

//定義一個Vue全域過濾器

?    Vue.filter('msgFormat',function(msg,arg,arg2){

?      // return msg.replace('蕪湖','哈哈')

?      //這個只能換第一個，

?      return msg.replace(/蕪湖/g,arg+arg2)

?    })



?    Vue.filter('test',function(msg){

?      // return msg.replace('蕪湖','哈哈')

?      //這個只能換第一個，

?      return msg+'========='

?    })



?    var vm = new Vue({

?      el: '#app',

?      data: {

?        msg: '蕪湖，曾經，我蕪湖蕪湖起飛'

?      },

?      methods: {}

?    });

繼續做品牌案例

定義私有的過濾器:

Body中新建id為app2的div

在js代碼中新建vm2

他們不屬于一個vm物件,但是可以呼叫全域的過濾器

如果私有和全域的過濾器同名,則優先呼叫私有過濾器

ES6字串新方法，padtoStart，字串補0

var hh = dt.getHours().toString().padStart(2,'0')

按鍵修飾符：@keyup.enter=“add”

.tab .delete .up……更多按鍵可以查看js對應的按鍵碼 @keyup.ente.(碼值)

自定義全域按鍵修飾符： Vue.config.keyCodes.f2 =113

文本框獲取焦點

? //定義全域指令,引數一指令的名稱，指令名前不需要加v-前綴,呼叫時必須加v-

? Vue.directive(‘focus’,{引數二 }) 引數二有bind: inserted: updated

?

    Vue.directive('focus',{

?      inserted:function(el){

?        el.focus()

?      }

?    })

Bind:執行一次，系結好之后，Inserted插入到DOM時執行一次，Updated更新就觸發

定義私有指令：

  directives:{ //自定義私有指令

?    'fontweight':{

?      bind: function (el,binding){

?        el.style.fontWeight = binding.value

?      }

指令函式的簡寫形式：不寫function

**生命周期：**各種事件

生命周期鉤子=生命周期函式=生命周期事件

第一個生命周期函式： 此時data和method都沒初始化好

BeforeCreate( ){ }

**第二個生命周期函式：**此時data和method可以使用

Created

第三個生命周期函式： 此時模板在記憶體編輯完成，但是尚未渲染到頁面

BeforeMount( ){ }

**第四個生命周期函式：**表示記憶體中模板已真實掛載到頁面,最后一個生命周期函式，

Mounted( ){ }

//接下來是運行中的兩個事件

BeforeUpdate( ) { } 此時頁面顯示資料還是舊的，data是最新的，二者尚未保持同步，

Update(){} 此時顯示資料已經更新，保持同步，

第二節：資料請求

除了vue-resource之外，還可以使用’axios’的第三方包實作資料的請求

vue-resource 實作get，post，jsonp請求

步驟：

首先需要js導包，vue-resource依賴于vue.js所以需要先匯入vue.js再匯入vue-resource

其中post請求多兩個引數，需要表單資料

Vue.js Ajax(axios)

Vue.js 2.0 版本推薦使用 axios 來完成 ajax 請求，

Axios 是一個基于 Promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中，

Then方法中的回呼函式會在請求成功或失敗時觸發