Vue基础语法

1. 使用 el 绑定dom

• el绑定dom采用css选择器，支持多种选择方式，但推荐使用id选择器，因为id具有唯一性。
• 当选择器可以匹配多个dom时，只对第一个有效。
• 可以用,隔开多个选择器，如el: "p, .d, #d",，只对第一个匹配的生效。
  

2. data数据

• 支持格式：字符串，数组，对象。
• 使用复杂类型时遵从js语法即可
• data数据更新，html中引用会同步更新
• $.watch()监视数据触发回调

<div id="d">{{mes}}</div> //此处mes会和data中绑定mes同步更新

var d = new Vue({
    el: "#d",
    data: {
        mes: "hi vue"
    }
});
//Vue实例内部通过 this.mes 获取和改变data数据
//Vue实例外部通过 d.mes 或 d.$data.mes 获取和改变数据
//扩展：使用$.watch()监视数据，数据改变触发回调
d.$watch('mes', function (newValue, oldValue) {
    console.log(oldValue + "=>" + newValue);
});

3. {{}} 双大括号引用

• 括号内部可使用表达式，如+，-，==，&等（v-text内部也支持表达式）
• 相较于v-text较为灵活，只替换括号内部而不会覆盖原有字符

mes: "hi"
<div id="d">{{mes + " a"}}，好久不见</div>      //hi a，好久不见
<div id="d" v-text="mes + ’ a‘">，好久不见</div>//hi a，

4. v-text, v-html

• 就是设置dom元素的textContent属性和inneHTMl属性
• 内部支持表达式

5. v-on 事件

• 用于绑定事件方法
• 语法：v-on:事件==“方法名”， 配合methods使用
• 简写：v-on:替换为@

<div id="d" @click="c"></div> 

var div = new Vue({
    el: "#d",
    methods: {
		c: function (){
            //具体逻辑
        },
	}
});

• 传参

传入自定义参数：
@click="tm(123)"
tm:function(e){
    console.log(e);
}

传入事件对象：
@click="tm"
tm:function(e){
    console.log(e);
}

传自定义参数同时传入事件对象：
@click="tm($event,123)"
tm:function(e,value){
    console.log(e);
    console.log(value);
}
参考：https://blog.csdn.net/little_kid_pea/article/details/89736282

• 修饰符，加修饰符使事件触发更精确，具体参照官网

@click.prevent //触发点击事件并阻止标签默认事件，如a标签
@keyup.enter   //按下enter键触发事件，如输入框中

6. v-show，v-if

• 条件渲染，值都是布尔类型，都支持表达式，配合data和methods使用。
• v-show是切换display属性，显示与隐藏。v-if是操作dom树，动态渲染。
• 频繁显示隐藏的用v-show，反之v-if，具体案例具体分析

<div v-show=“true|false”></div>
<div v-if=“true|false”></div>
<div v-if=“num > 100”></div> //num为data中定义属性

7. v-bind

• 动态绑定attribute，
• 简写，v-bind可省略，v-bind:xxx等于:xxx
• 三元运算可用对象方式简写，推荐使用，对比如下所示

<li :class="isActive?'active':''" @click="toggleActive"></li>
<li :class="{active:isActive}" @click="toggleActive"></li>

let app = new Vue({
	el: "#app",
	data: {
		isActive: true
	},
	methods: {
		toggleActive: function() {
			this.isActive = !isActive;
		}
	}
});

8. v-for

• v-for="value in list"，value为值。
• v-for="(value,index) in list"，value为值，index为索引。

<ul>
    <li v-for="(v,i) in list" :key="i">{{i}},{{v}}</li>
</ul>

9. v-model，数据双向绑定

input和h2的数据将会同步更新，不管改变了双方中任意一个，另一个都会同步更新。
<input type="text" v-model="mes">
<h2>{{ mes }}</h2>