vue2 --- vue模板语法中的语法和指令语法，v-bind指令、v-model双向数据绑定、v-on事件绑定

一、vue模板语法

1.插值语法

• {{xxx}}：xxx为js表达式，可以直接读取到data中的所有属性。

• 读取methods中的方法时，需要写为{{xxx()}}才能读取函数的返回值。

前引知识：
js表达式：可以被求值的代码，写在赋值语句的右侧。
js语句：可以执行的代码，不一定有值。

2.指令语法

指令：v-开头都是vue里的指令

2.1 v-bind：单向数据绑定。

 <div id="root">
   // 普通的href标签属性，值为字符串url 
   <a href="url">百度</a>
   // 绑定之后将url作为表达式去执行 
   // 相当于<a href="https://www.baidu.com">百度</a>
   <a v-bind:href="url">百度</a>
   // v-bind:简写为: 
   <a :href="url">百度</a>
  </div>
  <script>
    new Vue({
      el:'#root',
      data:{
        url:'https://www.baidu.com'
      }
    })
  </script>

2.2 v-model：双向数据绑定，

v-model：只能应用在表单类元素上，元素要有value值，v-model依赖value进行数据绑定。v-model:value=““简写为v-model=””，因为value默认收集value值。

v-model中的3个修饰符：

1）v-model.number：将输入字符串转为有效的数字，一般和type="number"配合使用。

2）v-model.lazy：将输入的value失去焦点时再收集数据。

3）v-model.trim：将输入的value去掉前后的空格，中间的空格不能去掉，只能去掉前后的空格。

 收集表单数据：
	若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
	若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
	若：<input type="checkbox"/> 多选框
		1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
		2.配置input的value属性:
			(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
			(2)v-model的初始值是数组，那么收集的的就是value组成的数组		

2.3 v-on：事件绑定。

v-on:事件名=“回调函数”，@事件名=“函数”。
1）函数不传参，默认传递event事件对象。event.target可以拿到事件发生的事件目标

2）函数传1个参数，function(param){ 返回param }

3）函数传2个参数，function(param,event){ 返回param和event }

<div id="root">
  <h3>{{name}}</h3>
  <!-- <button v-on:click="showInfo">提示信息</button> -->
  <!-- 简写形式：@替换v-on: -->
  <button @click="showInfo">不传参数，默认传$event</button>
  <button @click="showInfo($event)">传1个参数$event</button>
  <button @click="showInfo1(11)">传1个参数</button>
  <button @click="showInfo2(11,$event)">传2个参数</button>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      name: "张三",
    },
    methods: {
      // 不传参，默认传递event事件对象，event可以不写，写了event可以使用事件对象的方法和属性
       showInfo() {
        // console.log(event.target);
        console.log(this); // 指向vm或vc组件实例对象
      },
      // 传1个参数
      showInfo(event) {
        // console.log(event.target);
        console.log(this); // 指向vm或vc组件实例对象
      },
​
      // 传1个参数
      showInfo1(number) {
        console.log(number); // 11
      },
​
      // 传2个参数
      showInfo2(number, event) {
        console.log(number, event); // 11 event事件对象
      },
    },
  });
</script>

2.3.1 Vue中的事件修饰符：修饰符可以连续使用

1.prevent：阻止默认事件（常用）；e.preventDefault()
2.stop：阻止事件冒泡（常用）；e.stopPropagation()

<div @click="showAddress">
  <!-- 先阻止冒泡事件，再阻止默认事件 -->
  <a href="http://www.baidi.com" @click.stop.prevent="showAddress"></a>
</div>

3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；父元素->子元素
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
​

2.3.2 触发事件

@click：点击事件
@scroll：滚动条的滚动，滚动条不能往下滚动时不会再触发
@wheel：滚轮事件，鼠标滚动轮的滚动，滚到滚动条终点不能滚动时还是会触发
键盘事件
@keydown、@keyup

2.3.3 vue常用的按键别名

修饰符
1.回车 enter
2.删除 delete 退格和删除
3.退出 esc
4.空格 space
5.换行 tab 特殊：@keyup.tab=““失效，要使用@keydown.tab=””
6.上 up 下 down 左 left 右 right
系统修饰键：ctrl1、alt、shift、meta(win键)

(1)配合@keyup使用，与任何一个键配合使用，按下、抬起，事件才被触发。

(2)配合@keydown使用，正常触发事件。

自定义键名：Vue.config.keyCodes.自定义键名 = 键码

绑定事件的时候@xxx=“yyy”，yyy可以写一些简单的语句。

<div id="root">
  <h2>天气很{{info}}</h2>
  <!-- <button @click="changeWeather">切换天气</button> -->
  绑定事件的时候@xxx="yyy"，yyy可以写一些简单的语句。
  <button @click="isHot = !isHot;">切换天气</button>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      isHot: true,
    },
    // methods: {
    //   changeWeather() {
    //     this.isHot = !this.isHot;
    //   },
    // },
    computed: {
      info() {
        return this.isHot ? "炎热" : "凉爽";
      },
    },
  });
</script>