Vue最全知识点集合

目录

计算

监听

事件

绑定

v-for

条件渲染

文本渲染

指令修饰符

---

计算computed

对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性

（从现有数据计算出新的数据）

comouted案列

const app = Vue.createApp({

    computed: { 

        rmsg: function() { 

            return this.msg.split('').reverse().join('')

        }

    }

}).mount("#app")

<p>计算翻转的信息: {{ rmsg }}</p>

监听 watch

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch:{

    num(nval,oval){

        console.log(nval,oval)

    } 

}

事件

一、元素的事件绑定

• v-on:type=" " 简写@type=" "
• 组件上method属性上写事件的方法。
• 

 二、事件修饰符

在事件处理程序中调用event.preventDefault()或者event.stopPropagation()是非常常见的需求，尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。
Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。
修饰符可以连用。
事件里面的this指向当前组件，3.0 版本之前输出的this指当前组件

 

绑定

表单输入绑定

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件；
• checkbox 和 radio 使用 checked property 和 change 事件；
• select 字段将 value 作为 prop 并将 change 作为事件。
• 

 

 

 

 

 

v-for

 

条件渲染

5.条件渲染
1.条件渲染v-if和条件渲染 v-show

        指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。

 

2.条件渲染 v-else-if 

 

6.列表渲染
1.v-for和v-for  索引

我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

 

 2.v-for与v-if一同使用

 

 
 

文本渲染

Vue-Vue文本渲染三种方法 {{}}、v-html、v-text

{{ }}

将元素当成纯文本输出

v-html
v-html会将元素当成HTML标签解析后输出

v-text
v-text会将元素当成纯文本输出

代码：

 

指令修饰符

指令 Directive

同义词、命令、指示

语法

v- 指令名：参数 = 值，如 v-on : click = add

如果值里没有特殊字符，泽可以不加引号

有些指令没有参考和值，如v-pre不会对{{}}的内容进行处理

有些指令没有值：如v-on：click.prevent

修饰符

有些指令支持修饰符

• 表示阻止事件传播/冒泡

链接： DOM 事件模型（ DOM 事件机制） - 知乎

@click.stop = 'add' 

• 表示阻止默认动作

@click.prevent = 'add' 

• 同时表示上面两种意思

@click.stoo.prevent = 'add' 

一共有多少修饰符呢？

• v-on支持的有:

.{keycode | keyAlias }
.stop .prevent .capture .self
.once .passive .native

• 快捷键相关:

.ctrl .alt .shift .meta .exact

• 鼠标相关:

.left .rigth .middle

• v-bind支持的有:

.prop .camel .sync

• v-model支持的有:

.lazy .number .trim

总结

搞清楚这4个修饰符就行了

• @click.stop = "xxx"
• @click.prevent="xxx"
• @keypress.enter="xxx"
• :money.sync=""total