<div id="app">
            <div>{{message}}</div>
            <div v-text='message'></div><!--與innerText相似-->
            <div v-html='message'></div><!--與innerHtml相似-->
            <h1 v-bind:title='message'>文本</h1><!--鼠標(biāo)移上去時顯示提示信息-->
            <img v-bind:src='img_url'>

v-bind可以省略不寫，v-text將內(nèi)容以文本的方式展現(xiàn)，而v-html將內(nèi)容作為HTML語言代碼。

var a = new Vue({
    el:'#app',
    data:{
        message:'<h1>hello world</h1>',
        img_url:'https://offlintab.firefoxchina.cn/static/img/search/baidu_web.png',

el用于定位所作用的區(qū)塊。

對象語法

<div :class="{'active': isActive,'text-danger':hasError}">動態(tài)切換</div>
<!--動態(tài)地添加類，active和text-danger為類名，isActive和hasError為布爾型變量，當(dāng)為False時，不添加此類名，當(dāng)為True時添加類名-->
<div :class="{'active': isActive,'text-danger':!isActive}">動態(tài)切換</div>
<div :class='classObj'></div>
<!--classObj為兩個類名的組合-->

isActive:true,
hasError:true,
classObj:{
    'textColor':true,
    'textSize':false
    },

數(shù)組語法

<div :class="[style1,style2]">數(shù)組語法</div>
<div :class="[hasA ? styleA:styleB,style1]"></div>
<!--數(shù)組元素可以是三目表達式-->

style1:'active1',
style2:'text-red',
hasA:false,
styleA:'right',
styleB:'left',

Vue屬性綁定

支持對象綁定和數(shù)組綁定。
其中，數(shù)組元素可以是三目表達式。
對象綁定時，對象屬性的名稱代表樣式的名稱，屬性的值，表明了該樣式是否應(yīng)用。
數(shù)組綁定時，數(shù)組的值是一個變量名，變量的值就代表了樣式。

<p :style="{color:rcolor,fontSize:fsize+'px'}">駝峰命名</p>
<p :style="[styleObject,A]">數(shù)組綁定</p>

styleObject:{
        color:'red',
        fontSize:'19px'
},
A:{
    display:'block',
},
rcolor:'red',
fsize:24,

事件

<!-- <div v-on:click='changeBg' id='div1' :style="{background:bgColor}"></div> -->
<div @click="changeBg('red')" id='div1' :style="{background:bgColor}"></div>
<!--
    v-bind => :
    v-on   => @-->

methods:{
        changeBg(color){
            this.bgColor=color;
        },

事件修飾符

<!-- <button @click="counter += 1">{{counter}}</button> -->
<button @click.once="counter += 1">{{counter}}</button>
<!-- once表示此事件只執(zhí)行一次 -->
            
<div @click="outter" style="width: 300px;height: 300px;background: gray;">
    <div @click.stop="inner" style="width: 100px;height: 100px;background: green;"></div>
    <!-- stop可以阻止事件冒泡 -->
</div>
<a @click.prevent="no" >跳轉(zhuǎn)</a>
            
<!-- mouseup鼠標(biāo)松開時觸發(fā)，right代表鼠標(biāo)右鍵 -->
<button @mouseup.right='no'>點擊</button>
<!-- enter代表enter鍵 -->
<!-- <button @keyup.enter="keyup">按鍵</button> -->
<!-- keyup鍵盤松開時觸發(fā) $event表示觸發(fā)事件-->
<button @keyup="keyup($event)">按鍵</button>

outter(){
        alert("outter");
},
inner(){
    alert("inner");
},
no(){
    alert('跳不了');
},
keyup(e){
    //alert('enter');
    console.info(e.key);
},

條件渲染

v-if與v-show

            <div v-if='hasLogin'>
                您沒有登錄，請登錄。
                
            </div>
            <div v-if='score > 90'>優(yōu)秀</div>
            <div v-else-if='score > 70'>良好</div>
            <div v-else-if='score >= 60'>良好</div>
            <div v-else>不及格</div>
            <!-- v-show只改變元素的顯示方式（display:none）比v-if要快 -->
            <div v-show="loginType == 'phone'">
                <label for="phone">手機號碼</label>
                <!-- key的作用是當(dāng)切換時，清除輸入框的內(nèi)容 -->
                <input key="user-login" type="text" id="phone" placeholder="請輸入電話號碼" name="">
            </div>
            <div v-show="loginType == 'email'">
                <label for="email">郵箱</label>
                <input key="email-login" type="email" id="email" placeholder="請輸入郵箱" name="">
            </div>
            <button @click="change">切換登陸方式</button>

hasLogin:true,
score:80,
loginType:'email',

change(){
            if(this.loginType=="email"){
                this.loginType = "phone"
            }else{
                this.loginType = "email"
            }
        },

v-for

            <table>
                <!-- student表示列表中的每一行，key表示student的下標(biāo) -->
                <tr v-for="student,key in students">
                    <td>{{student.name}}-{{key}}</td>
                    <td>{{student.gender}}</td>
                    <td>{{student.age}}</td>
                </tr>
            </table>
            <!-- index表示屬性的名稱，value表示屬性的值 -->
            <ul>
                <li v-for="value,index in student">{{index}}-{{value}}</li>
            </ul>

students:[
            {name:"張三",gender:"男",age:20},
            {name:"張三1",gender:"男",age:20},
            {name:"張三2",gender:"男",age:20},
            {name:"張三3",gender:"男",age:20},
            {name:"張三4",gender:"男",age:20},
            {name:"張三5",gender:"男",age:20},
        ],
        student:{name:'張三',gender:"男",age:20},

計算屬性

<p>Original message:"{{message}}"</p>
<!-- 計算屬性將計算結(jié)果緩存起來，只要數(shù)據(jù)沒有改變，就會一直使用計算后的結(jié)果 -->
<p>Computed reversed message:"{{reversedMessage}}"</p>
<!-- 函數(shù)一句代碼執(zhí)行一遍 -->
<p>method reversed message:"{{reversedMessage1()}}"</p>
<button @click="changeMsg">改變message</button>

computed:{
        reversedMessage:function(){
            return this.message.split('').reverse().join('');
        }
    },

reversedMessage1(){
            return this.message.split('').reverse().join('');
        },

數(shù)據(jù)監(jiān)聽

<!-- 數(shù)據(jù)監(jiān)聽 -->
            <button @click="changeA">改變a</button>
            <button @click="changeStu">改變student</button>

student:{name:'張三',gender:"男",age:20},
a:1,

//監(jiān)聽器
watch:{
        a:function(val,oldval){
            console.info("新的值是"+val)
            console.info("舊的值是"+oldval)
        },
        student:{
            handler:function(val,oldval){
                console.info(oldval);
                console.info(val);
                console.info("student 改變了" +oldval.name + val.name);
            },
            deep:true//深度監(jiān)聽，可以監(jiān)聽到對象內(nèi)部的變化
        }
    },

changeA(){
            var newA = parseInt(Math.random()*10);
            this.a = newA;
        },
changeStu(){
            var num = parseInt(Math.random()*10);
            this.student.name = '李四' + num;
            this.student.age += 1;
        },

表單綁定

v-model綁定輸入的數(shù)據(jù)

            <input type="text" v-model.lazy="Username" name="username"><!--lazy當(dāng)按下回車后起作用-->
            <input type="text" v-model.trim="Username" name="username"><!--trim去掉兩端的空格-->
            <p style="display: inline-block;">{{Username}}</p>
            <input type="radio" name="gender" v-model="gender" value="男">男
            <input type="radio" name="gender" v-model="gender" value="女">女
            <span>你選擇的性別是: {{gender}}</span>

Username:"",
gender:'未知',

過濾器

將傳過來的value進行加工處理

            <!-- 全局注冊 在id不同的div中也可以用-->
            <p>{{message | toAdd}}</p>
            <!-- 局部注冊 -->
            <p>{{message | reversed}}</p>
            <p>{{message | param("A","B","C")}}</p>
            <!-- <input type="text" v-model='msg | filterHtml' name="">
<div id='demo'>{{message | toAdd}}</div>

全局注冊

Vue.filter("toAdd",function(value){
    return value + "-!!!"
});
new Vue({
    el:"#demo",
    data:{
        message:'<h1>hello world</h1>'
    }
})

局部注冊(本地過濾器)

new Vue({
......
    filters:{
            reversed:function(value){
                return value.split('').reverse().join('');
            },
            param:function(value,a,b,c){
                return value +"-"+a+"-"+b+"-"+c;
            },
        },
......

指令

            <!-- 全局指令 v后跟的參數(shù)與directive的參數(shù)相同 -->
            <p v-blue>aaaaaa</p>
            <p v-red>aaaaaa</p>
            <!-- 局部指令 v后跟的參數(shù)為函數(shù)名 -->
            <p v-color>aaaaaa</p>

全局指令

Vue.directive('blue',function(el){
    el.style.color='blue';//el指代元素本身
})

局部指令

new Vue({
......
    directives:{
        color:function(el){
            el.style.color = 'green'
        }
    }
......