<div id="app">
            <div>{{message}}</div>
            <div v-text='message'></div><!--与innerText相似-->
            <div v-html='message'></div><!--与innerHtml相似-->
            <h1 v-bind:title='message'>文本</h1><!--鼠标移上去时显示提示信息-->
            <img v-bind:src='img_url'>

v-bind可以省略不写，v-text将内容以文本的方式展现，而v-html将内容作为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用于定位所作用的区块。

对象语法

<div :class="{'active': isActive,'text-danger':hasError}">动态切换</div>
<!--动态地添加类，active和text-danger为类名，isActive和hasError为布尔型变量，当为False时，不添加此类名，当为True时添加类名-->
<div :class="{'active': isActive,'text-danger':!isActive}">动态切换</div>
<div :class='classObj'></div>
<!--classObj为两个类名的组合-->

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

数组语法

<div :class="[style1,style2]">数组语法</div>
<div :class="[hasA ? styleA:styleB,style1]"></div>
<!--数组元素可以是三目表达式-->

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

Vue属性绑定

支持对象绑定和数组绑定。
其中，数组元素可以是三目表达式。
对象绑定时，对象属性的名称代表样式的名称，属性的值，表明了该样式是否应用。
数组绑定时，数组的值是一个变量名，变量的值就代表了样式。

<p :style="{color:rcolor,fontSize:fsize+'px'}">驼峰命名</p>
<p :style="[styleObject,A]">数组绑定</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表示此事件只执行一次 -->
            
<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" href="https://www.baidu.com/">跳转</a>
            
<!-- mouseup鼠标松开时触发，right代表鼠标右键 -->
<button @mouseup.right='no'>点击</button>
<!-- enter代表enter键 -->
<!-- <button @keyup.enter="keyup">按键</button> -->
<!-- keyup键盘松开时触发 $event表示触发事件-->
<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'>优秀</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的作用是当切换时，清除输入框的内容 -->
                <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的下标 -->
                <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>
<!-- 计算属性将计算结果缓存起来，只要数据没有改变，就会一直使用计算后的结果 -->
<p>Computed reversed message:"{{reversedMessage}}"</p>
<!-- 函数一句代码执行一遍 -->
<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('');
        },

数据监听

<!-- 数据监听 -->
            <button @click="changeA">改变a</button>
            <button @click="changeStu">改变student</button>

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

//监听器
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//深度监听，可以监听到对象内部的变化
        }
    },

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绑定输入的数据

            <input type="text" v-model.lazy="Username" name="username"><!--lazy当按下回车后起作用-->
            <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后跟的参数与directive的参数相同 -->
            <p v-blue>aaaaaa</p>
            <p v-red>aaaaaa</p>
            <!-- 局部指令 v后跟的参数为函数名 -->
            <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'
        }
    }
......