vue.js方法的使用以及学习总结

软件外包1苏光伟

于 2023-12-14 19:21:05 发布

阅读量729

点赞数 29

文章标签： vue 前端

本文链接：https://blog.csdn.net/2301_78931492/article/details/134979673

版权

本文介绍了Vue.js的基础知识，包括构造选项（el、data、methods、computed、filters、watch），展示了如何在项目中引用和使用Vue，以及v-model、v-for、v-on等关键指令的用法。

摘要由CSDN通过智能技术生成

(Vue.js）对学习vue来说最基本的就是要有vue,那么还没有头绪的各位可以通过这个链接到vue的官网进行适合自己的下载。

要使用vue首先就将其引用进你的代码中，位置和格式为此，都是固定的，要在头文件的此处添加。

其次vue的必要创建格式如此：

下面我就会通过各种案例来给大家总结各种方法的使用以及学习心得体会：

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

这些就是vue中常用的构造选项，其中的el选项是必不可少的；data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化，例如该代码（

<body>

</div>

var ve=new Vue({

el:"#app"

data(){

return{msg:"这是绑定上h1的数据"}

}

})

</script>

</body>

）

在这个代码的基础上可以进行下一步的了解，method方法也是vue中让你实现功能的一大力量，可以将各种事件放入其中。

例如上面的代码只需要在data的代码块下加入method的方法，并为上方的标题文件后面加上一个按钮并绑定上点击事件（格式为：@οnclick="时间名()"）就可以进行操作了，如下图：

接下来就是vue中常用的指令：

1、v-text
v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。
2、v-html
v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。
3、v-bind
v-bind指令用于实现单向动态数据绑定。
前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性。

绑定单个动态类名时：

绑定多个动态类名时：

同时绑定静态+动态类名时：

在v-bind指令中使用逻辑判断时：

4、v-on

v-on指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

5、v-for

v-for是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

for循环普通数组

for循环对象数组

for循环对象

for循环整数

6、v-model
v-model指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

甚至在v-model中还有三个修饰符都有不同的作用使其更加完善：

（v-model有3个修饰符，分别是lazy、number、trim
1、lazy
v-model默认是在input事件中同步输入框中的内容，也就是一旦数据发生改变，对应的data中的数据也会发生改变。如果使用lazy修饰符，可以让数据在失去焦点或者回车时才会更新。
<input type="text" placeholder="搜索" v-model.lazy='keyword' />
2、number
默认情况下，在输入框输入数字的时候，默认会把输入的内容当作字符串类型处理，如果加上number修饰符，就可以让你在输入数字的时候将内容转为number类型。

<input type="text" placeholder="搜索" v-model.number='keyword' />
3、trim
trim修饰符可以去除输入内容左右两边的空格。
<input type="text" placeholder="搜索" v-model.trim='keyword' />）

7.v-if/else和v-show

这两个指令非常相像，都是if是真正意义上条件的做出的改变，show是无条件任何的渲染，一定程度上if最严谨

到此我们开始下一步就是事件的修饰符：

事件修饰符	说明
.stop	阻止事件冒泡
.prevent	阻止默认事件
.capture	添加事件监听器时使用事件捕获模式
.self	将事件绑定到该元素本身，只有自身才能触发
.once	事件只触发一次

键盘事件的修饰符：在我们的项目中，经常需要监听一些键盘事件来触发程序的执行，例如键盘的按下（keydown）和键盘的松开(keyup)事件等等。这些事件我们往往可以给其添加一些修饰符来进行修饰，比如：

.enter	监听enter回车键的触发
.tab	监听tab键的触发
.up、.down 、.left、 .right	监听上、下、左、右键的触发
ctrl	监听ctrl键的触发

例如如下是监听回车健被按下的实例：

说到监听就不得不说到监听属性watch：它可以监听到设置在其中的函数的变化并做出相应的反应，例如下图：（在这个实例中就监听了输入的数字，如果输入数字超过了设定值就会弹出提示语）

除了监听属性还有计算属性computed：它的作用我目前已知的有两种，其一它可以将字符串进行位置的反转，虽然现在我还不太明白他的作用，但是大致代码如下：

而他被成为计算属性最重要的原因是它可以进行计算，下图是我制作的一个计算总分以及平均分的软件，其中也用到model的number修饰符;

注意：计算属性和方法的区别（这就是为什么计算时选择计算属性而不是methods的原因）

Vue实例中的methods也可以完成计算的功能，与计算属性的作用相同。那么为什么在做计算的时候通常选择计算属性而不选择方法呢？因为计算属性是基于他的依赖缓存的，所以只有当其依赖的数据发生改变的时候，才会重新求值。这就意味着，只要依赖的数据没有发生改变，多次访问计算属性就会立即返回之前的计算结果，不必再次执行函数。而methods不同，他每调用一次就执行一次函数，所以computed 和 methods相比，computed有缓存，性能开销小

到这里最后就剩下过滤器就可以进入制作项目这一核心内容了

过滤器一般可以用在两个地方：双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。

概述：在Vue.js中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符"|"进行标识。

注意事项：当全局过滤器和局部过滤器重名时，会采用局部过滤器。

其用法非常相似，大家理解一下就好:

（全局）