一、vue的功能及作用

• 工作方式如下

1.不用操作DOM

2.單頁面應用web專案 簡稱：SPA

3.當下各種新框架都採用的類似Vue或者類似React的語法去作為主語法，微信小程式/MpVue......

4.掌握Vue的開發語法，相當於掌握了新的開發模式，可以適應目前絕大多數的技術環境

• Vue特點

1.資料驅動檢視，可以讓我們只關注資料

2.MVVM雙向繫結

3.通過指令增強了html功能

4.元件化，複用程式碼

5.開發者一般只關注資料

• Vue的安裝及使用

1.直接通過路徑引入，地址：https://vuejs.org/js/vue.min.js

2.直接下載在本地引入

3.採用npm安裝的方式，命令：npm install vue

提示：注意Vue.js不支援IE8及其以下版本

示例demo：

<script src="https://vuejs.org/js/vue.min.js"></script>

<div  id="app">
        {{msg}}
    </div>
    
    <script>
        var vm = new Vue({
            //el可以使用id選擇器、calss選擇器、dom物件
            //el不能嘗試使用html以及body
            el:document.getElementById("
 
app"),
            data: {
                    msg:"Hello world!"
                
            },
        });
    </script>

　　　　在插值表示式中使用js表示式、三元運算子、方法呼叫 -->

        <p>{{string}}</p>
        <p>{{count == 100}}</p>
        <p>{{count < 100}}</p>
        <p>{{count+10
 
}}</p>
        <p>{{string.split("|")}}</p>
        <p>{{count < 100?"小於"：“大於}}</p>

指令--凡是以v-開頭的都叫vue指令

• v-text和v-html 與 innerText和innerHTML相比較
• 插值表示式 1.是插入時的資料渲染 2.尚未渲染完成時會出現醜醜的大括號
• v-text、v-html是整體式的資料替換 2.尚未渲染完成時不會出現東西（渲染標籤中事先有內容除外）
• 注意，非必要時儘量不要使用或者禁止使用v-html，因為會有xss跨站指令碼攻擊

<div id="app">
        <p v-text ="string"> 1236</p>
        <p v-html ="string">46413</p>
    </div>

• v-if 更大的開銷 適用於不平凡切換顯示狀態，並且初始渲染時不必渲染，多重判斷時適合使用
• v-show 開銷較小 適用於平凡切換顯示狀態

     <p v-if ="isShow"> {{string}}</p>
     <p v-show ="isShow">{{46413}}</p>

• v-on ：click 簡寫（@click）
• @click.once只觸發一次
• click.prevent 阻止預設事件
• click.stop 阻止冒泡事件

<button v-on:click="clickMe('Ultraman')">點選我</button>
        <!-- click.once 只會觸發一次 -->
        <button @click.once="clickOnce">只觸發一次</button>
        <!-- click.prevent 阻止預設事件 -->
        <a href="http://www.baidu.com" @click.prevent="stopjump">百度</a>
        <div @click="alert(1)">
            <!-- click.stop 阻止冒泡事件 -->
            <div>
                <div @click.stop="alert(3)">
                    我是div
                </div>
            </div>
        </div>

• input標籤 change v-bind模擬v-model的底層

　　　　<input type="text" @change="change">
　　　　<input type="text" v-bind:value="string" @input="inputChange($event)">

                change(){
                    alert("資料改變了");
                },
                inputChange(e){
                    console.log("變了");
                    this.string = e.target.value;
                }                

• v-for 迭代；迴圈

<ul>
            <!-- array是需要渲染的物件 而item是每次接受迭代物件的別名 -->
            <li v-for="item in array">{{item}}</li>
            <!-- 始終記住，第一個引數是獲取每次迭代的資料，第二個引數看實際情況，如果是迭代陣列，則為陣列的索引 -->
            <li v-for="item in objectArray">{{item.id}}----{{item.name}}</li>
            <!-- 如果是迭代物件，則順序不同，第一個引數是屬性的value，第二個引數為屬性的key，第三個引數才是索引 -->
            <li v-for="obj in object">{{boj}}</li>
            <li v-for="(v,k,i) in object">{{k}}--{{v}}--{{i}}</li>
            <!-- for迴圈 -->
             <li v-for="num in 10">{{num}}--指定資料</li>
 </ul>

• v-bind 其作用是繫結標籤上的所有屬性
• 當標籤上的屬性變數或者動態的亦或需要改變的
• 簡寫“：”

<p v-bind:id="'ptest'"></p>
        <p :id="idName"></p>
        <p :class="showStyle?'p-style1':''">pppppp</p>
        <p :class="'p-style1':showStyle">pppppp</p>
        <p :class="'[bolder',showStyle?'p-style1':'p-style2']">pppppp</p>
        <p :class="'[bolder',{'p-style1':'p-style2'}]">pppppp</p>
        <p :style="color:'red'">ppppppp</p>
        <button @click="changeColor">變色</button>


CSS
<style>
        .p-style1{
            background-color: aquamarine;
            color:red;
        }
        .p-style2{
            background-color: aquamarine;
            color:red;
        }
</style>

• v-model、v-cloakd和v-once的作用

　　<div id="app" v-cloak>
        {{msg}}
        {{range}}
        <br>
        <!-- v-model 可以處理input、textArea、select、radio、checkbox、botton -->
        <!-- c-cloak cue中自帶的指令，作用是當載入完成後移除指令的屬性 即，我們希望任何沒有在載入完成前呈現的樣式都可通過v-cloak呈現-->
　　　　　<!-- v-once 使用該指令，頁面檢視只渲染一次 --> 　
        <!-- <input type="text" :value="msg" @input="changeInput($event)"> -->
        <input type="text" v-model="msg">
        <input type="text" v-model="range">
        <input type="range" v-model="range">
     </div>
     <script>
       setTimeout(function(){
        var vm = new Vue({
            el:"#app",
            data: {
                msg:"Hello",
                range:100
            },
            methods: {
                changeInput(e){
                    this.msg = e.target.value;
                }
            },
        });},5000)