安裝npm

簡單的說，npm就是JavaScript的包管理工具。相似Java語法中的maven，gradle，python中的pip。去nodejs官網下載nodejs傻瓜式安裝便可，默認會安裝npm。可是這個npm可能不是最新的，更新：npm install npm@latest -gcss

使用步驟：html

初始化：npm init
安裝包：npm install jquery@2.0.1 --save --save 或者 npm install jquery --save
卸載包：npm uninstall jquery --save

vue的MVVM模式

MVP

Model 層：模型層
Presenter 層：呈現層(業務邏輯控制層)
View 層：視圖層（DOM 展現）過程：視圖層（V）發出一個事件交給控制器（P 呈現層）,控制器調用 Ajax 去模型層（M）獲取數據 ; 或者直接去視圖層（V）進行DOM 操做。控制器（P 呈現層）是核心，是模型層（M）和視圖層（V）的中轉站，其中大部分代碼在進行 DOM 操做以前的開發是面向 DOM 開發，其中模型層（M）比較邊緣(僅僅從M取點數據)

MVVM

MVVM分爲三個部分：分別是M（Model，模型層），V（View，視圖層），VM（ViewModel，V與M鏈接的橋樑，也能夠看做爲控制器）vue

M：模型層，主要負責業務數據相關，在vue中模型層能夠先簡單地看做是vue對象的data屬性裏定義的變量值
V：視圖層，顧名思義，負責視圖相關，細分下來就是html+css層；
VM：V與M溝通的橋樑，負責監聽M或者V的修改，是實現MVVM雙向綁定的要點； MVVM支持雙向綁定，意思就是當M層數據進行修改時，VM層會監測到變化，而且通知V層進行相應的修改，反之修改V層則會通知M層數據進行修改，以此也實現了視圖與模型層的相互解耦；理解MVVM雙向綁定是開始vue的第一步，其次編寫vue代碼是面向數據(模型層)開發，這是和之前單純地寫jquery代碼很大的一點不一樣

指令

官網這樣描述指令：指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外狀況，稍後咱們再討論)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM。其實說的更明白一點，指令系統可看做是一種聲明式編程，原先寫jquery代碼的時候都是寫js代碼去頁面添加，刪除DOM等，修改DOM的屬性和class都須要拿到這個DOM，而後調用prop，addClass這一系列方法命令頁面作改動。可是vue不同，它的思想是把咱們想要顯示或隱藏的DOM寫出來，DOM可能須要(也可能不須要)的屬性等都寫出來，也就是說把咱們指望的都 <font color='red'>聲明在html文檔中</font>，根據model的改變去控制DOM,也就是說頁面須要的DOM在剛開始就已經所有寫在html文檔中了，幾乎不存在後續在添加刪除DOM，只是須要面向數據編程便可，極大地解放了雙手，哈哈！node

v-if 操做

v-if 的做用是控制DOM是否顯示官網示例：python

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-if=‘str' 表示是否顯示取決於vue對象的data屬性中定義的str變量的真假與否jquery

<div id='app'>
        <h3 v-if="str">hello</h3>
        <h3 v-else></h3>

        <h3 v-if="love === hzw">海賊王</h3>
        <h3 v-else-if="love === hyrz">火影忍者</h3>
        <h3 v-else>微動漫</h3>
    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
             el: '#app',   // 表示id 爲app 的標籤使用vue的語法
             data: {
                 str: true,
                 love:hzw,
             }
         })

    </script>

v-show

v-show也是控制dom顯示與否的，v-show 沒有v-if的多個判斷功能，並且v-show是把dom渲染到文檔中，只是加了display:none而已。 v-if 是「真正」的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。相比之下，v-show 就簡單得多——無論初始條件是什麼，元素老是會被渲染，而且只是簡單地基於 CSS 進行切換。通常來講，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。所以，若是須要很是頻繁地切換，則使用 v-show 較好；若是在運行時條件不多改變，則使用 v-if 較好。npm

v-bind

v-bind用於綁定DOM 屬性，即經過更改model層的data達到更改DOM屬性的效果，而不是一開始把DOM屬性寫死。其中v-bind 綁定的屬性中屬class比較特殊編程

動態綁定普通屬性

<div id='app'>
        <h3 v-bind:title="t">hello</h3>
        <h3 :title="t">hello</h3>

    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
             el: '#app',   // 表示id 爲app 的標籤使用vue的語法
             data: {
                 t:'sb',
             }
         })

    </script>

綁定class

經過綁定class能動態切換已經在style定義好的class數組

字典形式

<div id='app'>
        <h3 v-bind:class="{red:is_red, blue: is_blue}">hello</h3>
        <h3 :title="t">hello</h3>

    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
             el: '#app',   // 表示id 爲app 的標籤使用vue的語法
             data: {
                 is_red: true,
                 is_blue: true
             }
         })

    </script>

渲染的結果緩存

數組

<div id='app'>
        <h3 v-bind:class="[red, blue]">hello</h3>
        <h3 :title="t">hello</h3>

    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
             el: '#app',   // 表示id 爲app 的標籤使用vue的語法
             data: {
                 red: 'aaa',
                 blue: 'bbb'
             }
         })

    </script>

數組套字典

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

v-for

循環，又叫列表渲染，在須要顯示多個的標籤上加這個。

循環單個對象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})

結果

值得注意的是vue默認循環的是values，和py默認循環keys不同也能夠這樣

<div id='app'>
        <ul id="v-for-object" class="demo">
            <li v-for="(value,key) in object">
                {{ value }}----- {{ key }}
            </li>
        </ul>
    </div>

結果爲

循環多個對象的數組

<div id='app'>
        <ul class="demo">
            <li v-for="(item,key) in objs">
                {{ item }}----- {{ key }}
            </li>
        </ul>

        <ul class="demo">
            <li v-for="item in objs">
                {{ item }}
            </li>
        </ul>

    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
              el: '#app',
              data: {
                objs: [{name: 'John',age: 30},
                    {name: 'Jack',age: 20},
                    {name: 'lisz',age: 30}]
              }
            })

    </script>

結果爲

v-on

v-on表示事件監聽

<div id='app'>
        {{ count }}
        <button v-on:click="count += 1">點我加1</button>
        <button v-on:click="sub">點我減1</button>
    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
              el: '#app',
              data: {
                count:1
              },

               methods: {
                  sub(){
                      this.count -= 1
                  }
               }

            })

    </script>

<font color='red'>v-bind能夠簡寫爲：、v-on: 能夠簡寫@</font>

計算屬性computed

雖然{{}}支持寫複雜的表達式邏輯，可是不推薦這麼作，推薦用計算屬性計算得出

<div id='app'>
        <!-- reverseStr 看成是data的變量同樣調用 -->
        {{ reverseStr }}
    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
              el: '#app',
              data: {
                str:'hello'
              },

               computed:{
                  reverseStr(){
                      return this.str + 'world'
                  }
               }

            })

    </script>

<div id='app'>
        {{ str }}
        <button @click="change">點我</button>
    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
              el: '#app',
              data: {
                str:'hello'
              },
             methods:{
                  change(){
                      this.changeStr = 'haha'
                  }
             },

              computed:{
                changeStr:{
                    get:function () {
                        return this.str
                    },
                    set: function (new_value) {
                        this.str = new_value;
                    }
                }
              }
             }
         )

    </script>

由於計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要msg尚未發生變化，屢次訪問currentMsg計算屬性會馬上返回以前計算的結果，而不比再次執行函數。一樣的。每當觸發從新渲染時，調用方法將總會執行函數。一旦計算屬性中的值發生變化，那麼計算屬性的值也就會立馬發生改變(實時監聽計算屬性表示式的值)

v-model

v-model很好地體現了vue雙向綁定的理念。單向綁定很是簡單，就是把Model綁定到View，當咱們用JavaScript代碼更新Model時，View就會自動更新。有單向綁定，就有雙向綁定。若是用戶更新了View，Model的數據也自動被更新了，這種狀況就是雙向綁定。什麼狀況下用戶能夠更新View呢？填寫表單就是一個最直接的例子。當用戶填寫表單時，View的狀態就被更新了，若是此時MVVM框架能夠自動更新Model的狀態，那就至關於咱們把Model和View作了雙向綁定。

<div id='app'>
        <input v-model="str">
        {{ str }}
    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
              el: '#app',
              data: {
                str:'hello'
              },
             }
         )

    </script>

雙向數據綁定=單向數據綁定+UI事件監聽參考：https://cn.vuejs.org/v2/guide/forms.html

v-html

<div id='app'>
        <div v-html="str"></div>
    </div>

    <script src="./vue.js"></script>
    <script>
         var app = new Vue({
              el: '#app',
              data: {
                str:'<p>hello</p>'
              },
             }
         )

    </script>

輪播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li {
            list-style: none;
            float: left;
            width: 30px;
            height: 30px;
            background-color: #5cb85c;
            margin-right: 10px;
        }
        .red {
            background-color: red;
        }
    </style>


</head>
<body>

    <div id='other'>
        <h3 v-if="str">hello</h3>


        <img :src="src" @mouseenter="stop" @mouseleave="start">
        <ul>
            <li v-for="(item,i) in imgs" @click="changeImg(i)" :class="{red:item.show}">
                {{ i}}
            </li>
        </ul>
        <button @click="prePage">上一頁</button>
        <button @click="nextPage">下一頁</button>

    </div>

    <script src="./vue.js"></script>
    <script>
         var other = new Vue({
            el:'#other',
            data:{
                imgs:[{name:'1.jpg',show:false},
                    {name:'2.jpg',show:false},
                    {name:'3.jpg',show:false},
                    {name:'4.jpg',show:false},
                    {name:'5.jpg',show:false}],
                src:'1.jpg',
                index:0,
                cl: null
            },
            methods:{
                changeImg(i){
                    this.src = this.imgs[i].name;
                },
                nextPage(){
                    cur = this.imgs.indexOf(this.src)
                    cur += 1;
                    cur = cur % this.imgs.length
                    this.src = this.imgs[cur].name;
                    this.imgs[cur].show = true;
                    for (let i=0;i<other.imgs.length;i++){
                        if (cur != i){
                            other.imgs[i].show = false;
                        }
                    }
                },
                prePage(){
                    cur = this.imgs.indexOf(this.src)
                    cur -= 1;
                    if (cur < 0){
                        cur = 4
                    }
                    this.src = this.imgs[cur].name;
                    for (let i=0;i<other.imgs.length;i++){
                        if (cur != i){
                            other.imgs[i].show = false;
                        }
                    }
                },
                stop(){
                    clearInterval(this.cl);
                },
                start(){
                    this.cl = setInterval(function(){
                    other.index += 1;
                    if (other.index == 5){
                        other.index = 0
                    }
                    other.src = other.imgs[other.index].name;
                    other.imgs[other.index].show = true;
                    for (let i=0;i<other.imgs.length;i++){
                        if (other.index != i){
                            other.imgs[i].show = false;
                        }
                    }
                }, 1000);
                }


            },
             created(){
                this.cl = setInterval(function(){
                    other.index += 1;
                    if (other.index == 5){
                        other.index = 0
                    }
                    other.src = other.imgs[other.index].name;
                    other.imgs[other.index].show = true;
                    for (let i=0;i<other.imgs.length;i++){
                        if (other.index != i){
                            other.imgs[i].show = false;
                        }
                    }
                }, 1000);
             }

        })

    </script>

</body>
</html>

vue指令和事件綁定