vue.js核心最基本的功能是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn)DOM的系統(tǒng)。vue.js的核心功能使得我們可以很方便地控制切換一個(gè)元素是否顯示。

本文操作環(huán)境：windows10系統(tǒng)、vue 2.5.2、thinkpad t480電腦。

Vue.js的核心是一個(gè)允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。

下面讓我們來詳細(xì)看下。

<div id="app">   {{ message }} </div>

var app = new Vue({   el: '#app',   data: {     message: 'Hello Vue!'   } })

除了文本插值，我們還可以像這樣來綁定元素特性：

<div id="app-2">   <span v-bind:title="message">     鼠標(biāo)懸停幾秒鐘查看此處動(dòng)態(tài)綁定的提示信息！   </span> </div>

var app2 = new Vue({   el: '#app-2',   data: {     message: '頁面加載于 ' + new Date().toLocaleString()   } })

控制切換一個(gè)元素是否顯示也相當(dāng)簡單：

<div id="app-3">   <p v-if="seen">現(xiàn)在你看到我了</p> </div>

var app3 = new Vue({   el: '#app-3',   data: {     seen: true   } })

還有其它很多指令，每個(gè)都有特殊的功能。例如，v-for 指令可以綁定數(shù)組的數(shù)據(jù)來渲染一個(gè)項(xiàng)目列表：

<div id="app-4">   <ol>     <li v-for="todo in todos">       {{ todo.text }}     </li>   </ol> </div>

var app4 = new Vue({   el: '#app-4',   data: {     todos: [       { text: '學(xué)習(xí) JavaScript' },       { text: '學(xué)習(xí) Vue' },       { text: '整個(gè)牛項(xiàng)目' }     ]   } })

為了讓用戶和你的應(yīng)用進(jìn)行交互，我們可以用 v-on 指令添加一個(gè)事件監(jiān)聽器，通過它調(diào)用在 Vue 實(shí)例中定義的方法：

<div id="app-5">   <p>{{ message }}</p>   <button v-on:click="reverseMessage">逆轉(zhuǎn)消息</button> </div>

var app5 = new Vue({   el: '#app-5',   data: {     message: 'Hello Vue.js!'   },   methods: {     reverseMessage: function () {       this.message = this.message.split('').reverse().join('')     }   } })

Vue 還提供了 v-model 指令，它能輕松實(shí)現(xiàn)表單輸入和應(yīng)用狀態(tài)之間的雙向綁定。

<div id="app-6">   <p>{{ message }}</p>   <input v-model="message"> </div>

var app6 = new Vue({   el: '#app-6',   data: {     message: 'Hello Vue!'   } })

組件系統(tǒng)是 Vue 的另一個(gè)重要概念，因?yàn)樗且环N抽象，允許我們使用小型、獨(dú)立和通常可復(fù)用的組件構(gòu)建大型應(yīng)用。仔細(xì)想想，幾乎任意類型的應(yīng)用界面都可以抽象為一個(gè)組件樹：

在 Vue 里，一個(gè)組件本質(zhì)上是一個(gè)擁有預(yù)定義選項(xiàng)的一個(gè) Vue 實(shí)例。在 Vue 中注冊(cè)組件很簡單：

// 定義名為 todo-item 的新組件 Vue.component('todo-item', {   template: '<li>這是個(gè)待辦項(xiàng)</li>' })

現(xiàn)在你可以用它構(gòu)建另一個(gè)組件模板：

<ol>   <!-- 創(chuàng)建一個(gè) todo-item 組件的實(shí)例 -->   <todo-item></todo-item> </ol>

但是這樣會(huì)為每個(gè)待辦項(xiàng)渲染同樣的文本，這看起來并不炫酷。我們應(yīng)該能從父作用域?qū)?shù)據(jù)傳到子組件才對(duì)。讓我們來修改一下組件的定義，使之能夠接受一個(gè) prop：

Vue.component('todo-item', {  // todo-item 組件現(xiàn)在接受一個(gè)  // "prop"，類似于一個(gè)自定義特性。  // 這個(gè) prop 名為 todo。  props: ['todo'],  template: '<li>{{ todo.text }}</li>' })

現(xiàn)在，我們可以使用 v-bind 指令將待辦項(xiàng)傳到循環(huán)輸出的每個(gè)組件中：

<div id="app-7">   <ol>     <!--       現(xiàn)在我們?yōu)槊總€(gè) todo-item 提供 todo 對(duì)象       todo 對(duì)象是變量，即其內(nèi)容可以是動(dòng)態(tài)的。       我們也需要為每個(gè)組件提供一個(gè)“key”，稍后再       作詳細(xì)解釋。     -->     <todo-item v-for="item in groceryList" v-bind:todo="item" ></todo-item>   </ol> </div>

Vue.component('todo-item', {   props: ['todo'],   template: '<li>{{ todo.text }}</li>' })  var app7 = new Vue({   el: '#app-7',   data: {     groceryList: [       { id: 0, text: '蔬菜' },       { id: 1, text: '奶酪' },       { id: 2, text: '隨便其它什么人吃的東西' }     ]   } })

學(xué)習(xí)推薦：php培訓(xùn)