vue指令

在vue中，所有的数据需要放在data属性中
例如：

var app = new Vue({
	el:'#app',		//该对象作用于id = app的元素
	data:{
		name:'XXX',
		age:20,
		sex:'male',
	}
})

vue常用指令
v-model：双向绑定

<div id="app">
    <input type="text" v-model="name">
    <span>你的名字：{{name}}</span>
    <br>
    <input type="text" v-model="age">
    <span>你的年龄：{{age}}</span>
    <br>
    <input type="text" v-model="sex">
    <span>你的性别：{{sex}}</span>
</div>

v-show:控制元素的隐藏，如果vue对象的data属性有值，则会显示，如果无值，则会隐藏
v-if:与v-show 不同的地方是，如果data中无值，则会在DOM中删除这个元素

<div id="app">
    <input type="text" v-model="name">
    <span v-show="name">你的名字：{{name}}</span>
    <br>
    <input type="text" v-model="age">
    <span v-show="age">你的年龄：{{age}}</span>
    <br>
    <input type="text" v-model="sex">
    <span v-show="sex">你的性别：{{sex}}</span>
</div>

效果图

v-for:用于迭代的指令，可以遍历数组，字符串，数字，对象
v-for="(value, index) in objin前后的空格不能省略

 <div id="app">
        <ul>
<!--            <li v-for="(value, index) in list">{{index+1}}&#45;&#45;{{value}}</li>-->
<!--            <li v-for="(value, index) in 'abcdefg'">{{index+1}}&#45;&#45;{{value}}</li>-->
<!--            <li v-for="(value, index) in 5">{{index+1}}&#45;&#45;{{value}}</li>-->
            <li v-for="(value, key) in obj">{{key}}--{{value}}</li>
        </ul>
    </div>
    <script>
            let vue = new Vue({
                el:'#app',
                data:{
                    list:["张三","李四","王五"],
                    obj:{
                        name:'John',
                        age:999,
                        gender:'male'
                    }
                },
            });
    </script>

v-bind:用于绑定数据和元素属性

• 这个地方也可以用v-model，但是v-model只能用于input/textarea/select，是有局限性的。
• 如果要用v-bind直接给元素绑定类名，首先会默认在model中查找，如果没有找到就不赋值，会造成绑定无效的情况，如果需要在style中查找，则需要将类名放在数组中，然后再用引号把数组括起来才能正常绑定。
• 如果需要给一个标签绑定多个Vue中的类对象，需要用[]把类名包起来并用,隔开,例如<p v-bind="[obj1,obj2]">我是段落</p>
• v-bind可以缩写成一个:

<div id="app">
        <a v-bind:class="{active:isActive}" v-bind:href='url'>点我</a>
    </div>
    
    <script>
    window.onload = function () {
    var app = new Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com',
            class:'btn btn-default',
            isActive:false,
        }
    });
};
    </script>

v-on:绑定事件
有两种绑定方式
快捷方式：@

<button @ :click="onClick">点我</button>		//直接跟事件名称
<button v-on=“{click: onClick}">点我</button>		//{}内的键是事件名称，值是事件触发的函数

如果需要取消某些事件（例如提交按钮）的默认行为，在vue中可以用.prevent方法

.once：回调函数只执行一次
 	<button v-on:click.once="Func1">点我</button>
 .prevent:阻止元素的默认行为，例如a标签的跳转。
 	<a href="http://www.baidu.com" v-on:click.Prevent="Func1">标签</a>
 .stop:阻止事件冒泡
 .self:当该元素被选中时才会触发相应的事件。但是self不能阻止事件冒泡，除非是嵌套内的所有元素都绑定了self
 <div v-on:click.stop="Func1" style="width: 400px;height: 400px;background-color:red;">
            123
            <div v-on:click.stop="Func2" style="width: 300px;height: 300px;background-color:blue;">
                456
                <div v-on:click.stop="Func3" style="width: 200px;height: 200px;background-color:aqua;">
                    789
                </div>
            </div>
        </div>
.capture：事件捕获，（反事件冒泡）