Vue3.0必学知识点

ButOf

已于 2022-03-01 19:11:56 修改

阅读量396

点赞数

文章标签： linq 前端 javascript vue.js

于 2022-02-28 20:00:45 首次发布

本文链接：https://blog.csdn.net/ButOff/article/details/123190029

版权

计算computed

一、为什么要使用计算属性

什么是计算属性

计算属性：可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用：

减少模板中的计算逻辑。
数据缓存。当我们的数据没有变化的时候，不会再次执行计算的过程。
依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据。

在数据量比较大的时候，计算属性可以帮助我们提高性能，因为计算属性只会在数据变化的时候才会计算。

computed: {

fstudents(){

return this.students.filter(item=>{

var flag = true;

if(this.keyword!=''){

if(!JSON.stringify(item).includes(this.keyword)){

flag = false;

}

return flag;

})

}

计算属性禁用箭头函数

　　注意，不应该使用箭头函数来定义计算属性函数

　　当然有很多this需要指向vue实例的时候，都需要慎用箭头函数。

监听watch

使用watch这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>名称案例</title>
<script src="../js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">

</div>

var vm = new Vue({

el: "#app",
data: {
firstname: "",
lastname: "",
fullname: ""
},
methods: {
getFullname: function () {
// this.fullname = this.firstname+this.lastname;
}
},
watch: {
//使用这个可以监听data中指定数据的变化,然后触发watch中对应的function的处理
'firstname': function (newVal,oldVal) {

console.log((newVal + "--" + oldVal));
},
'lastname': function (newVal,oldVal) {
console.log((newVal + "--" + oldVal));
}
}
})
</script>
</body>
</html>

v-bind

给v-bind:class 一个对象，以动态地切换class，v-bind:class指令可以与普通的class特性共存

<ul class="box" v-bind:class="{‘textColor‘:isColor, ‘textSize‘:isSize}">

<li>学习Vue</li>

<li>学习Node</li>

<li>学习React</li>

</ul>

也可以将多个样式对象应用到一个元素上

<div class="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

当在一个自定义组件上使用 class property 时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染

v-if

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

<h1 v-if="awesome">Vue is awesome!</h1>

也可以用 v-else 添加一个“else 块”：

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

v-if vs v-show

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

文本渲染v-html v-text {{}}

{{ }}

将元素当成纯文本输出

<div id="app">
   <p> {{}} </p>
</div>

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

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

<div id="app">
    <p v-html="html"></p>
</div>

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

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

<div id="app">
    <p v-text="message"></p>
</div>

var app = new Vue({
   el : '#app',
   data : {
    message : 'hello world'    
 }
})

v-model 指令
v-model 指令可以实现数据的双向绑定更多的是使用在表单元素当然组件也可以使用，更多详情可以看 Vue.js官网这里不过多描述

<div id="app">
<p>{{ username }}</p>
<input v-model="username">
</div>
<script>
new Vue({
el: '#app',
data: {
username: '点赞！点赞！!'
}
})
</script>
指令修饰符
修饰符是 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

.prevent：阻止默认行为

.stop：阻止冒泡

.once：事件只触发一次

.capture：在捕获阶段触发

.self：事件作用在元素本身触发

.native：自定义组件中使用，告诉Vue当前触发的是js的原生事件

.number ：把用户输入的内容，自动转换为数字类型。

.trim ：过滤输入内容左右空格。

.lazy ：v-model指令默认使用input事件，通过修饰符我们延迟事件为change事件触发。

罗列一下键盘修饰符 .enter .space .ctrl .........

ButOf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue3.0必学知识点

计算computed一、为什么要使用计算属性什么是计算属性计算属性：可以理解为能够在里面写一些计算逻辑的属性。具有如下的作用：减少模板中的计算逻辑。数据缓存。当我们的数据没有变化的时候，不会再次执行计算的过程。依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局数据。在数据量比较大的时候，计算属性可以帮助我们提高性能，因为计算属性只会在数据变化的时候才会计算。computed: { fstudents(){ return th...
复制链接

扫一扫