么是Vue.js

　　Vue.js是一個構(gòu)建數(shù)據(jù)驅(qū)動的web界面的庫。技術(shù)上，它重點集中在MVVM模式的ViewModel層，因此它非常容易學習，非常容易與其它庫或已有項目整合。

　　Vue.js的目標是通過盡可能簡單的API實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。

　　Vue.js 的核心是一個響應的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與DOM保持同步非常簡單。在使用jQuery手工操作DOM時，我們的代碼常常是命令式的、重復的與易錯的。Vue.js擁抱數(shù)據(jù)驅(qū)動的視圖概念。通俗地講，它意味著我們在普通HTML模板中使用特殊的語法將DOM “綁定”到底層數(shù)據(jù)。

安裝

獨立版本

　　直接下載并用 < script > 標簽引入，Vue會被注冊為一個全局變量。如下代碼，這樣就可以在腳本中使用Vue.js了。

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

CDN

　　也可以在 jsdelivr或 cdnjs獲取 (版本更新可能會略滯后)。

NPM

　　在用 Vue.js 構(gòu)建大型應用時推薦使用 NPM 安裝，NPM 能很好地和諸如 Webpack 或 Browserify 的 CommonJS 模塊打包器配合使用。Vue.js 也提供配套工具來開發(fā)單文件組件。

$ npm install vue
`# 獲取CSP兼容版本：
`$ npm install vue@csp
`# 獲取最新開發(fā)版本(來自于GitHub):
$ npm install yyx990803/vue#dev

Hello World

　　現(xiàn)在就讓我們來寫第一個vue.js的實例。如下代碼：

html代碼：

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

JavaScript代碼:

new Vue({
  el: '#demo',
  data: {
    message: 'Hello World!'
  }
})

　　上面代碼中div中的部分 {{ message }}為數(shù)據(jù)綁定，我們將會在后面的學習中講到。而vue.js代碼是實例化一個Vue對象。在使用vue之前必須要實例化。

構(gòu)造器

　　每個Vue.js應用的起步都是通過構(gòu)造函數(shù)Vue創(chuàng)建一個Vue的根實例：

var vm=new Vue({
  // 選項
})

　　一個Vue實例其實正是一個MVVM模式中所描述的 ViewModel - 因此在文檔中經(jīng)常會使用vm這個變量名。

屬性與方法

　　每個Vue實例都會代理其data對象里所有的屬性，如下代碼：

var data={ a: 1 }
var vm=new Vue({
  data: data
})
//vm.a===data.a  -> true
// 設置屬性也會影響到原始數(shù)據(jù)
vm.a=2
// data.a  -> 2
// ... 反之亦然
data.a=3
//vm.a -> 3

　　注意只有這些被代理的屬性是響應的。如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。

　　除了前面這些數(shù)據(jù)屬性，Vue 實例還有一些有用的實例屬性與方法。這些屬性與方法都有前綴 $，以便與代理的數(shù)據(jù)屬性區(qū)分。例如：

var data={ a: 1 }
var vm=new Vue({
  el: '#example',
  data: data
})

vm.$data===data // -> true
vm.$el===document.getElementById('example') // -> true

// $watch 是一個實例方法
vm.$watch('a', function (newVal, oldVal) {
  // 這個回調(diào)將在 `vm.a`  改變后調(diào)用
})

插值

　數(shù)據(jù)綁定最基礎的形式是文本插值，使用 {{}} 語法（雙大括號）：

<span>Message: {{ msg }}</span>

　　{{ msg }} 標簽會被相應數(shù)據(jù)對象的 msg 屬性的值替換。每當這個屬性變化時它也會更新。

　　也可以只處理單次插值，今后的數(shù)據(jù)變化就不會再引起插值更新了：

<span>This will never change: {{* msg }}</span>

如下JavaScript代碼:

var data={msg:'Hello Vue.js!'};
new Vue({
  el: '#demo',
  data: data
 })
data.msg="Hello World!";

原始的HTML

　　雙大括號標簽將數(shù)據(jù)解析為純文本而不是HTML。為了輸出真的HTML字符串，需要用三大括號標簽：

<div>{{{ msg }}}</div>

　　如下javascript代碼：

var data={msg:'<p>Hello Vue.js!</p>'};
new Vue({
    el: '#demo',
    data: data
   })

HTML特性

　　雙大括號標簽也可以用在 HTML 特性 (Attributes) 內(nèi)：

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

javascript代碼如下：

var data={id:'demo'};
new Vue({
  el: 'div',
  data: data
 })

我們?nèi)ゲ榭碒TML源碼，是不是id已經(jīng)變成我們設置的id了。

JavaScript表達式

　　Vue.js 在數(shù)據(jù)綁定內(nèi)支持全功能的JavaScript表達式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

過濾器

　　Vue.js 允許在表達式后添加可選的“過濾器 (Filter) ”，以“管道符(|)”指示。過濾器本質(zhì)上是一個函數(shù)，這個函數(shù)會接收一個值，將其處理并返回。

{{ message | uppercase }}

　　這里我們將表達式 message 的值“管輸（pipe）”到內(nèi)置的 uppercase 過濾器，這個過濾器其實只是一個 JavaScript 函數(shù)，返回大寫化的值。Vue.js 提供數(shù)個內(nèi)置過濾器，在后面我們會談到如何開發(fā)自己的過濾器。

　　可以串聯(lián)多個過濾器：

{{ message | filterA | filterB }}

html代碼：　　

<div id='demo'>
<span>{{msg | lowercase | capitalize}}</span>
</div>

javaScript代碼：

 var data={msg:'heLLO!'};
 new Vue({
  el: '#demo',
  data: data
 })

運行結(jié)果為：Hello

指令

　　Vue.js指令 (Directives) 是特殊的帶有前綴 v- 的特性。本質(zhì)是模板中出現(xiàn)的特殊標記，讓處理模板的庫知道需要對這里的DOM元素進行一些對應的處理。指令的職責就是當其表達式的值改變時把某些特殊的行為應用到 DOM 上。

<p v-if="msg">Hello!</p>

　　這里 v-if 指令將根據(jù)表達式 msg 值的真假刪除/插入 < p > 元素。

　　在Vue.js中為我們提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同學們可以去查看Vue.js的指令api(cn.vuejs.org/api/#指令)。

javascript代碼：

 var data={msg:0};
 new Vue({
  el: '#demo',
  data: data
 })

計算屬性

　　在模板中表達式非常便利，但是它們實際上只用于簡單的操作。模板是為了描述視圖的結(jié)構(gòu)。在模板中放入太多的邏輯會讓模板過重且難以維護。這就是為什么 Vue.js 將綁定表達式限制為一個表達式。如果需要多于一個表達式的邏輯，應當使用計算屬性。

　　在 Vue.js 中，你可以通過 computed 選項定義計算屬性：

<div id="example">
  a={{ a }}, b={{ b }}
</div>
var vm=new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一個計算屬性的 getter
    b: function () {
      // `this` 指向 vm 實例
      return this.a + 1
    }
  }
})

運行結(jié)果為：a=1,b=2。

更多內(nèi)容如 Class 與 Style 綁定、 渲染指令、 表單控件綁定、 自定義指令和過濾器、 方法與事件處理器、組件等請參考： http://www.hubwiz.com/course/566e67417e7d40946afc5ddc/

板語法

Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上。

文本插值

• 最基本的數(shù)據(jù)綁定形式是文本插值，它使用的是“Mustache”語法 (即雙大括號)：

<span>Message: {{ msg }}</span>

原始 HTML

雙大括號會將數(shù)據(jù)解釋為純文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

這里我們遇到了一個新的概念。這里看到的 v-html attribute 被稱為一個指令。

• 安全警告

在網(wǎng)站上動態(tài)渲染任意 HTML 是非常危險的，因為這非常容易造成 XSS 漏洞。請僅在內(nèi)容安全可信時再使用 v-html，并且永遠不要使用用戶提供的 HTML 內(nèi)容。

屬性綁定

• 雙大括號不能在 HTML attributes 中使用。想要響應式地綁定一個 attribute，應該使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

• v-bind 指令指示 Vue 將元素的 id attribute 與組件的 dynamicId 屬性保持一致。如果綁定的值是 null 或者 undefined，那么該 attribute 將會從渲染的元素上移除。

簡寫(實際開發(fā)常見)

因為 v-bind 非常常用，我們提供了特定的簡寫語法：

<div :id="dynamicId"></div>

布爾屬性

<button :disabled="isButtonDisabled">Button</button>

當 isButtonDisabled 為真值或一個空字符串 (即 <button disabled="">) 時，元素會包含這個 disabled attribute。而當其為其他假值時 attribute 將被忽略。

動態(tài)綁定多個值

通過不帶參數(shù)的 v-bind，你可以將它們綁定到單個元素上：

const objectOfAttrs={
  id: 'container',
  class: 'wrapper'
}

<div v-bind="objectOfAttrs"></div>

使用 JavaScript 表達式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

在 Vue 模板內(nèi)，JavaScript 表達式可以被使用在如下場景上：

1. 在文本插值中 (雙大括號)
2. 在任何 Vue 指令 (以 v- 開頭的特殊 attribute) attribute 的值中

僅支持表達式

每個綁定僅支持單一表達式，也就是一段能夠被求值的 JavaScript 代碼。一個簡單的判斷方法是是否可以合法地寫在 return 后面。

無效示例：

<!-- 這是一個語句，而非表達式 -->
{{ var a=1 }}

<!-- 條件控制也不支持，請使用三元表達式 -->
{{ if (ok) { return message } }}

調(diào)用函數(shù)

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

綁定在表達式中的方法在組件每次更新時都會被重新調(diào)用，因此不應該產(chǎn)生任何副作用，比如改變數(shù)據(jù)或觸發(fā)異步操作。

受限的全局訪問

1. 模板中的表達式將被沙盒化，僅能夠訪問到有限的全局對象列表。該列表中會暴露常用的內(nèi)置全局對象，比如 Math 和 Date。
2. 沒有顯式包含在列表中的全局對象將不能在模板內(nèi)表達式中訪問，例如用戶附加在 window 上的屬性。然而，你也可以自行在 app.config.globalProperties 上顯式地添加它們，供所有的 Vue 表達式使用。

指令 Directives

指令是帶有 v- 前綴的特殊 attribute。Vue 提供了許多內(nèi)置指令，包括上面我們所介紹的 v-bind 和 v-html。

指令 attribute 的期望值為一個 JavaScript 表達式 (除了少數(shù)幾個例外，即之后要討論到的 v-for、v-on 和 v-slot)。

一個指令的任務是在其表達式的值變化時響應式地更新 DOM

<p v-if="seen">Now you see me</p>

<a v-bind:href="url"> ... </a>

<!-- 簡寫 -->
<a :href="url"> ... </a>

<a v-on:click="doSomething"> ... </a>

<!-- 簡寫 -->
<a @click="doSomething"> ... </a>

指令 簡寫 v-bind ： v-on @

動態(tài)參數(shù)

同樣在指令參數(shù)上也可以使用一個 JavaScript 表達式，需要包含在一對方括號內(nèi)：

• 動態(tài)屬性 v-bind:href 或者 動態(tài)事件 v-on:focus

<!--
注意，參數(shù)表達式有一些約束，
參見下面“動態(tài)參數(shù)值的限制”與“動態(tài)參數(shù)語法的限制”章節(jié)的解釋
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 簡寫 -->
<a :[attributeName]="url"> ... </a>


<a v-on:[eventName]="doSomething"> ... </a>

<!-- 簡寫 -->
<a @[eventName]="doSomething">

• 動態(tài)參數(shù)值的限制

動態(tài)參數(shù)中表達式的值應當是一個字符串，或者是 null。特殊值 null 意為顯式移除該綁定。其他非字符串的值會觸發(fā)警告。

• 動態(tài)參數(shù)語法的限制

動態(tài)參數(shù)表達式因為某些字符的緣故有一些語法限制，比如空格和引號，在 HTML attribute 名稱中都是不合法的。例如下面的示例：

<!-- 這會觸發(fā)一個編譯器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要傳入一個復雜的動態(tài)參數(shù)，我們推薦使用計算屬性替換復雜的表達式

當使用 DOM 內(nèi)嵌模板 (直接寫在 HTML 文件里的模板) 時，我們需要避免在名稱中使用大寫字母，因為瀏覽器會強制將其轉(zhuǎn)換為小寫：

<a :[someAttr]="value"> ... </a>

修飾符 Modifiers

修飾符是以點開頭的特殊后綴，表明指令需要以一些特殊的方式被綁定。例如 .prevent 修飾符會告知 v-on 指令對觸發(fā)的事件調(diào)用 event.preventDefault()：

ue是什么？

Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也完全能夠為復雜的單頁應用提供驅(qū)動。
創(chuàng)作者：尤雨溪
作用：動態(tài)構(gòu)建用戶界面。

VUE.JS的優(yōu)點

1.編碼簡潔，體積小運行效率高，適合移動/PC端開發(fā)：壓縮后33k
2.更高的運行效率：基于虛擬dom，一種可以預先通過javaScript進行各種計算，把最終dom操作計算出來并優(yōu)化的技術(shù)，由于這個Dom操作預處理操作，并沒有真實的操作DOM，所以叫做虛擬DOM。
3.雙向數(shù)據(jù)綁定：讓開發(fā)者不用再去操作dom對象，把更多的精力投入到業(yè)務邏輯上。
4.生態(tài)豐富、學習成本低
5.遵循MVVM模式
6.它本身只關注UI，可以輕松引入vue插件或其他第三方庫開發(fā)項目

搭建Vue環(huán)境

• 安裝Vue可以使用<script>標簽引用，也可以使用CDN方法，感興趣的童鞋可以去查閱。這里著重整理npm的安裝方法，因為npm能很好地和Webpack等模塊配合使用，在用Vue.js構(gòu)建大型應用時推薦使用npm安裝方法。

Vue運行環(huán)境的搭建需要具備的東西：

• node.js環(huán)境：npm包管理器
• cnpm：npm的淘寶鏡像
• vue-cli：腳手架構(gòu)建工具

node.js 我們可以在官網(wǎng)下載，然后一路next安裝就ok了，必要的話更改安裝路徑。安裝完成后，可以在電腦上打開命令行工具（win+R），輸入node -v命令，查看node的版本，如果出現(xiàn)相應的版本號，則說明安裝成功了。

note：npm包管理器是集成在node中的，安裝了node也就有了npm，輸入npm -v命令，會顯示npm的版本信息。

cnpm的安裝
在命令行中輸入npm install -g cnpm --registry=http://registry.npm.taobao.org ,等待其安裝完畢。沒有報錯則表明安裝成功。

vue-cli的安裝
在命令行輸入npm install -g vue-cli，等待安裝完成。

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.普通頁面，引入vue.js: <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>即可實現(xiàn)vue

MVVM
M: data，數(shù)據(jù)模型，數(shù)據(jù)對象 model
V: view視圖展示，模板頁面
VM: viewmode 視圖模型（Vue的實例）（頁面監(jiān)聽，數(shù)據(jù)綁定）

VUE擴展插件

1.vue-cli:vue 腳手架
2.vue-resource(axios):ajax請求
3.vue-roter:路由
4.vuex:狀態(tài)管理
5.vue-lazyload:圖片懶加載
6.vue-scroller:頁面滑動相關
7.mint-ui:基于vue的UI組件庫(移動端)
8.element-ui:基于vue的UI組件庫(PC端)

目錄解析

VUE內(nèi)嵌指令

• v-model: 數(shù)據(jù)綁定
• data: 返回對象用 return
• v-for: 循環(huán) 格式 v-for=”字段名 in(of) 數(shù)組json”
• v-show: 顯示 隱藏 傳遞的值為布爾值 true false 默認為false
• v-if: 顯示與隱藏 和v-show對比的區(qū)別 就是是否刪除dom節(jié)點 默認值為false
• v-else-if: 必須和v-if連用
• v-else: 必須和v-if連用 不能單獨使用 否則報錯 模板編譯錯誤
• v-bind: 動態(tài)綁定 作用： 及時對頁面的數(shù)據(jù)進行更改
• v-on: 綁定事件 函數(shù)必須寫在methods里面
• @click: 快捷方法
• v-text: 解析文本
• v-html: 解析html標簽
• v-bind:class: 三種綁定方法 1、對象型 ‘{red:isred}’ 2、三目型 ‘isred?”red”:”blue”‘ 3、數(shù)組型 ‘[{red:”isred”},{blue:”isblue”}]’
• v-once: 進入頁面時 只渲染一次 不再進行渲染
• v-cloak: 防止閃爍
• v-pre: 把標簽內(nèi)部的元素原位輸出

用法

v-text

v-text主要用來更新textContent，等同于JS的text屬性。
<span v-text="msg"></span>

這兩者等價：
<span>{{msg}}</span>

v-html

雙大括號的方式會將數(shù)據(jù)解釋為純文本，而非HTML。為了輸出真正的HTML，可以用v-html指令。它等同于JS的innerHtml屬性。
<div v-html="Hello Baby！"></div>
這個div的內(nèi)容將會替換成屬性值Hello Baby！，直接作為HTML進行渲染。

v-pre

v-pre主要用來跳過這個元素和它的子元素編譯過程。可以用來顯示原始的Mustache標簽。跳過大量沒有指令的節(jié)點加快編譯。
<div id="app">
    <span v-pre>{{msg}}</span>  //這條語句不進行編譯
    <span>{{msg}}</span>
</div>
最終僅顯示第二個span的內(nèi)容

v-cloak

這個指令是防止閃現(xiàn)
<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>
在頁面加載時會閃爍，先顯示:
<div>
    {{message}}
</div>

然后才會編譯為：
<div>
    hello world!
</div>

v-once

v-once關聯(lián)的實例，只會渲染一次。之后的重新渲染，實例及其所有的子節(jié)點將被視為靜態(tài)內(nèi)容跳過，這可以用于優(yōu)化更新性能。
<span v-once>This will never change:{{msg}}</span>  //單個元素
<div v-once>//有子元素
    <h1>comment</h1>
    <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //組件
<ul>
    <li v-for="i in list">{{i}}</li>
</ul>
上面的例子中，msg,list即使產(chǎn)生改變，也不會重新渲染。

v-if

v-if可以實現(xiàn)條件渲染，Vue會根據(jù)表達式的值的真假條件來渲染元素。
<a v-if="ok">yes</a>
如果屬性值ok為true，則顯示。否則，不會渲染這個元素。

v-else

v-else是搭配v-if使用的，它必須緊跟在v-if或者v-else-if后面，否則不起作用。
<a v-if="ok">yes</a>
<a v-else>No</a>

v-else-if

v-else-if充當v-if的else-if塊，可以鏈式的使用多次。可以更加方便的實現(xiàn)switch語句。
<div v-if="type==='A'">
    A
</div>
<div v-if="type==='B'">
    B
</div>
<div v-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

v-show

<h1 v-show="ok">hello world</h1>

也是用于根據(jù)條件展示元素。和v-if不同的是，如果v-if的值是false，則這個元素被銷毀，不在dom中。但是v-show的元素會始終被渲染并保存在dom中，它只是簡單的切換css的dispaly屬性。

注意：v-if有更高的切換開銷
v-show有更高的初始渲染開銷。
因此，如果要非常頻繁的切換，則使用v-show較好；如果在運行時條件不太可能改變，則v-if較好

v-for

用v-for指令根據(jù)遍歷數(shù)組來進行渲染
有下面兩種遍歷形式
<div v-for="(item,index) in items"></div>   //使用in，index是一個可選參數(shù)，表示當前項的索引
<div v-for="item of items"></div>   //使用of

下面是一個例子，并且在v-for中，擁有對父作用域?qū)傩缘耐耆L問權(quán)限。
<ul id="app">
    <li v-for="item in items">
        {{parent}}-{{item.text}}
    </li>
</ul>
<script type="text/javascript">
    var example=new Vue({
      el:'#app',
      data:{
        parent:'父作用域'
        items:[
          {text:'文本1'},
          {text:'文本2'}
        ]
      }
    })
</script>

會被渲染為：
<ul id="app">
    <li>父作用域-文本1</li>
    <li>父作用域-文本2</li>
</ul>
注意：當v-for和v-if同處于一個節(jié)點時，v-for的優(yōu)先級比v-if更高。這意味著v-if將運行在每個v-for循環(huán)中

v-bind

v-bind用來動態(tài)的綁定一個或者多個特性。沒有參數(shù)時，可以綁定到一個包含鍵值對的對象。常用于動態(tài)綁定class和style。以及href等。
簡寫為一個冒號【  ：】
<1>對象語法：
//進行類切換的例子
<div id="app">
    <!--當data里面定義的isActive等于true時，is-active這個類才會被添加起作用-->
    <!--當data里面定義的hasError等于true時，text-danger這個類才會被添加起作用-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>

渲染結(jié)果：
<!--因為hasError: false，所以text-danger不被渲染-->
<div class="is-active"></div>

<2>數(shù)組語法
<div id="app">
    <!--數(shù)組語法：errorClass在data對應的類一定會添加-->
    <!--is-active是對象語法，根據(jù)activeClass對應的取值決定是否添加-->
    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            activeClass: false,
            errorClass: 'text-danger'
        }
    })
</script>

渲染結(jié)果：
<!--因為activeClass: false，所以is-active不被渲染-->
<p class="text-danger"></p>

<3>直接綁定數(shù)據(jù)對象
<div id="app">
    <!--在vue實例的data中定義了classObject對象，這個對象里面是所有類名及其真值-->
    <!--當里面的類的值是true時會被渲染-->
    <div :class="classObject">12345</div>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            classObject:{
                'is-active': false,
                'text-danger':true
            }           
        }
    })
</script>

渲染結(jié)果：
<!--因為'is-active': false，所以is-active不被渲染-->
<div class="text-danger"></div>

v-model

這個指令用于在表單上創(chuàng)建雙向數(shù)據(jù)綁定。
v-model會忽略所有表單元素的value、checked、selected特性的初始值。因為它選擇Vue實例數(shù)據(jù)做為具體的值。
<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            somebody:'小明'
        }
    })
</script>

這個例子中直接在瀏覽器input中輸入別的名字，下面的p的內(nèi)容會直接跟著變。這就是雙向數(shù)據(jù)綁定。
v-model修飾符
<1>  .lazy
默認情況下，v-model同步輸入框的值和數(shù)據(jù)。可以通過這個修飾符，轉(zhuǎn)變?yōu)樵赾hange事件再同步。
<input v-model.lazy="msg">

<2>  .number
自動將用戶的輸入值轉(zhuǎn)化為數(shù)值類型
<input v-model.number="msg">

<3>  .trim
自動過濾用戶輸入的首尾空格
<input v-model.trim="msg">

v-on

v-on主要用來監(jiān)聽dom事件，以便執(zhí)行一些代碼塊。表達式可以是一個方法名。
簡寫為：【  @  】
<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app=new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

事件修飾符


.stop  阻止事件繼續(xù)傳播

.prevent 事件不再重載頁面

.capture 使用事件捕獲模式,即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進行處理

.self 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù)

.once 事件將只會觸發(fā)一次

.passive 告訴瀏覽器你不想阻止事件的默認行為

<!-- 阻止單擊事件繼續(xù)傳播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件監(jiān)聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發(fā)的事件先在此處處理，然后才交由內(nèi)部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發(fā)處理函數(shù) -->
<!-- 即事件不是從內(nèi)部元素觸發(fā)的 -->
<div v-on:click.self="doThat">...</div>

<!-- 點擊事件將只會觸發(fā)一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā) -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修飾符時，順序很重要；相應的代碼會以同樣的順序產(chǎn)生。因此，用v-on:click.prevent.self會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

熟悉Vue模板

<template>//***************************************************************************html代碼start
<div class="wrapper">
          此處編寫你的頁面元素
</div>
</template>//**************************************************************************html代碼end
 
<script>//********************************************************************************js代碼start
 
 
export default {
data(){
return {//存放當前組件變量的值
 
 
}
},
computed:{//計算屬性：監(jiān)控數(shù)據(jù)使用有變動，一旦有變動則自動觸發(fā)
},
methods:{//存放頁面操作方法
},
created(){//請求接口數(shù)據(jù)
}
}
</script>//*********************************************************************************js代碼end
 
 
<style lang="scss" scoped>//*******************************************************css樣式代碼start
.wrapper{}
//編寫樣式
</style>//*********************************************************************************css樣式代碼end

npm run dev 打包運行
npm run build 打包
npm install -g server 使用靜態(tài)服務器工具包
serve dist http://localhost:5000

發(fā)布使用動態(tài)的web服務器
修改配置webpack.prod.conf.js

output:{
    publicPath:'/xxx/'  //打包文件的名稱
}

重新打包
npm run build
修改dist文件夾為項目名稱:xxx
將xxx拷貝到運行的tomcat的webapps目錄下
訪問:http://localhost:8080/xxx

config 文件中
port :設置端口號
autoOpenBrower: false\true 是否自動打開瀏覽器

組件間通信 SLOT

• 此方式用于組件向子組件傳遞”標簽數(shù)據(jù)”

使用localStorage存儲數(shù)據(jù)的工具模塊
函數(shù)
對象
需要向外面暴露七個功能還是多個功能

Vue項目中常用的2個ajax庫
vue-resource:vue插件，非官方庫，vue1.x使用廣泛
npm install vue-resource --save
axios:通用的ajax請求庫，官方推薦，vue2.x使用廣泛
npm install axios --save

歡迎大家提議、分享、交流、共同學習進步