vue_簡介_漸進式 js 框架_內置指令_自定義指令_自定義插件

vue

• 尤雨溪 華裔 Google 工程師
• 遵循 MVVM 模式
• 編碼簡潔，體積小，運行效率高，適合 移動 / PC 端 開發
• 動態構建用戶界面： 異步獲取後臺數據，展示到頁面
• 漸進式 js 框架

漸進式： 核心庫開始項目，需求引入插件

發展 

借鑑了 angular 的 模板語法 和 數據綁定技術

借鑑了 react 的 組件化 和 虛擬 DOM 技術

vue 擴展插件

vue-cli ---- 腳手架 command line interface

vue-resource/axios ---- ajax 請求

vue-router ---- 路由

vuex --- 狀態管理

vue-lazyload ---- 圖片懶加載

vue-scroller ---- 頁面滑動相關

mint-ui ---- 基於 vue 的 UI 組件庫 (移動端) ---- 餓了麼

element-ui ---- 基於 vue 的 UI 組件庫 (PC 端) ---- 餓了麼

簡單實用 ---- 動態顯示數據 ---- 雙向數據綁定 -------- data 普通屬性、computed 計算屬性(有緩存，屢次讀取，只計算一次)、watch 監視屬性

<div id="test">

// <標籤 v-model="模板變量"> -------- v-指令 ---- 指令： vue 自定義的標籤修飾屬性

<input type="text" v-model="myVueData" />

 

// {{模板變量}} -------- 插值 ------- 模板變量就是 js 表達式，注意： 不可加分號, 且只能寫在標籤體中

<p>{{myVueData}}</p>

<p>{{myVueData.toUpperCase()}}</p>

 

// v-bind 強制數據綁定 ---- M->V ---- 獲得一個動態的屬性值

<a v-bind:href="myUrl">百度</a><br />

<a :href="myUrl">簡寫 - 百度</a>

 

// v-on:事件名="method函數名"

<button v-on:click="myConsole">打印</button>

<p @click="myConsole">簡寫 - 打印</p>

 

// 雙向數據綁定

請輸入新姓名： <input type="text" v-model="myVueData"/>

請輸入新網址： <input type="text" v-model="myUrl"/>

result： <input type="text" v-model="myUnionStr"/>

</div>

<p>----------------------- 模板中關聯的 變量/函數 都是 viewModel 對象的方法 ---------------</p>

<script src="./js/vue.js"></script>

<script>

new Vue({

el:"#test",

data() {

    return{    // vue 會將 給 vm 添加全部 data 中的屬性及其屬性值

myVueData: "kjf",

myUrl: "https://www.baidu.com"

}

},

computed: {    // 雙向數據綁定：初始顯示、先關的狀態數據 發生變化

    // 避免重複計算，提升效率 -------- 計算屬性是有緩存的，除了第一次獲取數據，之後讀取直接從緩存中取得數據

unionStr(){    // 默認 getter

return this.myVueData+myUrl

}

myUnionStr: {

get(){

return this.myVueData+"-"+myUrl

}

set(newValue){

let names = newValue.split("-");

this.myVueData = name[0]

this.myUrl = names[1]

}

}

}

watch: {    // 單向數據綁定

myVueData(newValue){

this.myUnionStr = newValue + 

}

}

methods: {    // vue 也會添加 全部 methods 中的方法

myConsole(){

console.log("myConsole: 全部 vue 相關的方法中的 this 都是 vm");

console.log("組件數據的常規訪問： this._data.myVueData = "+this._data.myVueData);

console.log("組件的數據代理 - 簡化狀態讀寫： this.myVueData = "+this.myVueData);

}

}

})；

vm.$watch("myUrl", function(newValue){    // API 寫法，單項數據綁定，數據的監視，及其響應

this.myUnionStr = this.myVueData + "-" + newValue;

});     // -------- 目前的這種數據監視，只是監視通常類型的數據有效，若是是數組或者對象，則須要進行深度監視

</script>

 

 

 vue 的 核心語法 Object.defineProperty(

 

vue 內置指令 - 操做指定的標籤

<p v-html="content">原理： p.innerHTML=content</p>

------------------------------------------------------------------

<p v-text="content">原理： p.textContent=content</p>

------------------------------------------------------------------

<p ref="myName">kjf</p>

<button @click="showMyName">點擊</button>

********* js *********

methods: {

showMyName(){

alert(this.refs.myName.textContent);

}

}

自定義 指令 directive  - 複用，簡化編碼，功能擴展

<p v-upper-text>全局註冊自定義指令</p>

<p v-lower-text>局部註冊自定義指令</p>

********* js *********

Vue.directive("upper-text", function(el, binding){

el.innerHTML = bindinf.value.toUpperCase()

});

new Vue({

el: "test",

directive:{

"lower-text": function(){

el.innerHTML = bindinf.value.toLowerCase()

}

}

})

自定義插件

vue-my-plugin.js 匿名函數自調用 IIFE ----------------------------------------------

(function(){

const MyPlugin = {}

 

// 必須有 install 方法，不禁咱們直接調用

MyPlugin.install = function(){

// 個人全局方法

Vue.myGolbalFunc(){

console.log("個人全局方法")

}

 

// 個人全局指令

Vue.directive("my-d", function(el, binding){

console.log("個人指令");

})

 

// 個人混合 mixins

 

// 個人 vm 實例方法

Vue.prototype.$haha = function(){

console.log("個人實例方法： 哈哈");

}

}

window.MyPlugin = MyPlugin;        // 向外暴露

})()

-----------------------------------------------------------------------------------------

<script src="./js/vue-my-plufin.js"></script>

<script>

Vue.use(MyPlugin);        // 聲明使用 vue 插件，內部會自調用 MyPlugin.install(Vue);

</script>