vue基础语法-vue基本指令的使用方法
vue是渐进式的javascript框架，框架就是自己的规则的一套语法。本文记录了常用的vue语法以及使用方法。
目录
-
-
- 1.差值表达式（声明式渲染/文本差值/胡子语法）
- 2.v-bind指令
- 3.v-on指令
- 4.事件对象 e
- 5.事件修饰符
- 6.按键修饰符
- 7.v-model双向绑定
- 8.v-model修饰符
- 9.v-text和v-html指令
- 10.v-show和v-if指令
- 11.v-for循环列表
- 12.动态class
- 13.动态style
-
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:"标签语法
"
}
...
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>