vue基础语法-vue基本指令的使用方法

vue是渐进式的javascript框架，框架就是自己的规则的一套语法。本文记录了常用的vue语法以及使用方法。

1.差值表达式（声明式渲染/文本差值/胡子语法）

• 语法：{{表达式}}
• 作用：可以把vue数据变量直接显示在标签内
• vue数据变量存放位置：data函数return的对象里面

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  data(){  // 格式固定, 定义vue数据之处
    return{
      msg:'hello vue'
    }
  }
}
</script>
...

2.v-bind指令

• 语法：v-bind:属性名=“vue变量”
• 简写：：属性名=“vue变量”
• 动态属性获取到的是vue变量的值，静态属性获取到的是‘vue变量’字符串

...
<a v-bind:herf="link">给链接绑定herf属性<a>
...
<script>
export default {
  data(){  // 格式固定, 定义vue数据之处
    return{
      link:'http://www.baidu.com'
    }
  }
}
</script>
...

3.v-on指令

• 作用：给标签绑定事件
• 语法：v-on:事件名=“要执行的少量代码”
  或者：v-on:事件名=“methods里的函数名”
  或者： v-on:事件名=“函数名（实参）”
• 简写：@事件名=“函数名”

...
 <p>显示数字{{num}}</p>
// 在vue事件中，可以直接访问data中的数据,一旦data中数据改变就会自动更新到视图中
 <button v-on:click="num=100">+1</button>  
 <button v-on:click="add">+1</button> 
 <button v-on:click="updata(5)">+</button>
...
<script>
export default {
  data(){  
    return{
      num:1
    }
  },
  methods:{   //vue方法定义在methods属性中
	add(){
		this.num++;   //通过this访问data中的数据
	},
	updata(count){
		if(num>50){
			this.num+= count;
		}else{
			this.num++;
		}
	}
}
}
</script>
...

4.事件对象 e

• 无传参，e
• 有传参，一定要同时传递$event

...
  <a :href="link" @click="one">链接呢</a>
  <hr>
  <a :href="link" @click="two(2,$event)">链接</a>
...
 methods: {
    one(e){
      e.preventDefault();
    },
    two(x,e){
       e.preventDefault();
    }
  }
...

5.事件修饰符

语法：@事件名.修饰符=“methods里函数”

• .stop -阻止事件冒泡
• .prevent -阻止默认行为(表单提交)
• .once -程序运行期间, 只触发一次事件处理函数

6.按键修饰符

语法：@事件名.修饰符=“methods里函数”

• @keyup.enter - 监测回车按键
• @keyup.esc - 监测返回按键
• @keyup.13 - 监听ascll值为13的按键事件

7.v-model双向绑定

• 语法：v-model=“data里的数据名”
• 实现双向数据绑定 ：数据变化 -> 视图自动同步；视图变化 -> 数据自动同步。

...
	 <p>下拉菜单---------------------------------------</p>
    <select v-model="city">  
      <option value="南京">南京</option>
      <option value="湖南">湖南</option>
      <option value="四川">四川</option>
    </select>

    <p>复选框---------------------------------------</p>
    <input type="checkbox" v-model="checkipt" value="舞蹈" />舞蹈
    <input type="checkbox" v-model="checkipt" value="瑜伽" />瑜伽
    <input type="checkbox" v-model="checkipt" value="吃零食" />吃零食

    <p>单选框---------------------------------------</p>
    <input type="radio" v-model="radioipt" value="女" />女
    <input type="radio" v-model="radioipt" value="男" />男
 ...
   data() {
    return {
      radioipt:'女',
      checkipt: [],
      city: "四川"  //设置为和value相同的值，会默认选中
    };
...

【注意】：
①下拉菜单要绑定在select上。
② 遇到复选框, v-model的变量值为非数组 - 关联的是复选框的checked属性,数组 - 关联的是复选框的value属性。
③单选框可以在数据里设置默认选中，数据值=value值。

8.v-model修饰符

语法：v-model.修饰符=“methods里函数或数据”

• .number -转成数值类型（使用的是oninput事件，数据一更新就同步）
• .trim -去除左右两边空格后把值赋予给vue数据变量
• .lazy -失去焦点后，再同步数据（使用的是onblur失去焦点事件）

9.v-text和v-html指令

• 语法：
• v-text=“vue数据变量”
• v-html=“vue数据变量”
  【注意】：会覆盖差值表达式

	...
 	<p>{{msg}}</p>   //不覆盖标签内原有内容
    <p v-text="msg"></p>   //无法识别html标签
    <p v-html="msg"></p>      //识别html标签
    <p v-html="msg">{{msg}}</p>   //覆盖标签内容
    ...
    data(){
    return{
      msg:"<p>标签语法<p>"

    }
    ...

10.v-show和v-if指令

• 语法：
  v-show=“vue变量” ：通过display属性来控制显示与隐藏
  v-if=“vue变量”
• 作用：标签的隐藏与显示

11.v-for循环列表

• 作用：渲染列表

• 语法：
  == v-for="(值, 索引) in 目标结构"==

• 渲染列表+删除功能

...
 <ul>
      <li @click="del(obj.id)" v-for="obj in arr" :key="obj.id">{{obj.name}}</li>
</ul>
...
 data(){
     return{
        arr:[{
        id:1,
        name:"安迪",
      },{
        id:2,
        name:"奥安",
      },{
         id:3,
        name:"关关",
      }]
     }
    },
    methods:{
      del(delid){
        // 获取数组的下标 根据findindex方法
        let index = this.arr.findIndex(e=>e.id == delid);
        index>-1 && this.arr.splice(index,1);
      }
    }

12.动态class

• 语法：:class="{类名: 布尔值}"
• 目标: 用v-bind给标签class设置动态的值,就是把类名保存在vue变量中赋予给标签

...
// 如果价格超过100，就有red这个类
<td :class="{red:obj.price>100}">{{ obj.price }}</td>
...

13.动态style

• 语法：:style="{css属性: 值}"
• 目标: 给标签动态设置style的值

 <p :style="{backgroundColor: colorStr}">动态style</p>