Vue中的一些指令与计算方法

news/2024/7/27 11:47:59/文章来源:https://blog.csdn.net/Luo3255069063/article/details/135888219

语法

插值语法

HTML的双标签内容中使用，在{{}}之内书写JS代码

属性语法

1.v-bind或:
2.:属性名="值"或v-bind="值"

事件语法

v-on或@
v-on:事件名="方法名"或@事件名="方法名"

选项

选项：可选的配置项——官方API文档规定
1.el：vue对象管理的元素，值是id选择器
2.data：存放元素携带的数据，页面中动态变化的数据都在data中进行定义并给初始值
3.methods：存放元素携带的函数

插值语法

<div id='#app'><p>{{数值/字符串/布尔值/三目运算/表达式/函数new Data()}}</p>
</div>
<script>new Vue({el:'#app',data(){return{uname:'tom',age:18,isMarried:false}}})
</script>

指令

1.属性绑定

v-bind:简写成:
注意：模版字符串

<img :src="url" />	//url="https://codeboy.com/1.jpg"
<img :src="`img/${url}`">	//url='1.jpg'

2.事件绑定

v-on:简写成@
事件种类：click 表示单机事件 mouseover 表示鼠标移入的事件

3.方法绑定

class的样式绑定

<img :class="active" src="" />//style	.active{border:2px solid orange;}
<img :class="active:表达式" > 表达式的给过为true，样式active会添加上；如果false，样式不生效

4.v-for

如图所示：
在这里插入图片描述
（1）一般的，有v-for的地方就必须有key属性
（2）key 的属性值，必须独一无二；一般的，遍历数组时可以用下标；如果遍历的是对象，可以用对象中的特殊属性比如id等
代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for</title><script src="../vue.js"></script>
</head>
<body>
<div id="app"><div  v-for="(data,index) of arr" :key="index">{{data}}------------{{index}}</div>
</div>
<script type="text/javascript">new Vue({el:'#app',data:{arr:[1,2,3,4,5,6,7,8,9]}})
</script>
</body>
</html>

运行截图：
在这里插入图片描述
双重遍历：
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-for</title><script src="../vue.js"></script>
</head>
<body>
<div id="app"><div  v-for="data of students" :key="data.id"><p v-for="(value,index) of students" :key="index">{{index}}-----------------{{value}}</p></div><script type="text/javascript">new Vue({el:'#app',data(){return{students:[{id:001,name:'zhangsan',age:18},{id:002,name:'lisi',age:19},{id:003,name:'wangwu',age:20},{id:004,name:'zhaoliu',age:21}]}}})</script>
</div>
</body>
</html>

运行截图：
在这里插入图片描述

绑定属性值

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title><script src="../vue.js"></script><style>.d1{width: 100px;height: 100px;background-color: red;}</style>
</head>
<body>
<div id="app"><h3>绑定属性值</h3><div class="d1"></div><div v-bind:class="className"></div><div :class="className"></div></div>
<script type="text/javascript">new Vue({el:"#app",data(){return{className:"d1"}},methods:{}})
</script>
</body>
</html>

运行截图：
在这里插入图片描述

非指令属性设置属性值，直接赋值就会当做普通字符串解析，绑定数据时，优先解析成其他数据类型，如果不能解析成其他数据类型，就当做数据名解析。

双向绑定

作用：让元素的value属性和数据绑定在一起，value值发生变化时，数据也跟着一起变，数据发生变化时，value值也跟着变；经过双向绑定，可以用数据代表元素的value的值。
代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title><script src="../vue.js"></script>
</head>
<body>
<h3>双向绑定</h3>
<div id="app"><input type="text" v-model="val" @blur="fn2"><button @click="fn1">修改val</button>
</div>
<script type="text/javascript">new Vue({el:"#app",data(){return{val:"123"}},methods:{fn1(){this.val=Math.random()},fn2(){this.val="456"}}})
</script>
</body>
</html>

运行截图：
在这里插入图片描述
v-mode是一个语法糖
双向绑定的原理：
（1）把数据绑定给value属性
（2）每一次修改元素的value都会把修改后的值赋值给数据

计算属性

作用：从一个数据或多个衍生出另外一个数据就使用计算属性
示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>模板</title><script src="../vue.js"></script>
</head>
<body>
<div id="app">{{a}}{{b}}<br>{{sum}}
</div>
<script type="text/javascript">new Vue({el:"#app",data(){return{a:10,b:20}},methods:{},computed:{sum(){return this.a+this.b}}})
</script>
</body>
</html>

运行截图：
在这里插入图片描述
特性：
（1）声明的时候是方法，可以满足在衍生的过程中完成其他功能
（2）使用的时候是数据，怎么使用数据就怎么使用计算属性
（3）计算属性的应用场景，是衍生过程复杂或者在这个过程中要完成其他功能
（4）计算属性的执行契机：第一次加载组件时会执行一次，后续当方法的依赖数据发生数据改变时，会再次执行
（5）依赖数据：只要出现在方法中的数据，就是依赖数据