VueJs基础知识学习

求你再爱我一次

已于 2023-12-25 18:57:45 修改

阅读量45

点赞数

文章标签： vue.js 学习方法

于 2023-12-25 18:55:09 首次发布

原文链接：https://blog.csdn.net/weixin_44763882/article/details/109137311?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170349217916800227436507%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170349217916800227436507&biz_id=0&ut

版权

一、VueJS是什么?
它是一个轻量级MVVM框架
数据驱动+组件化的前端开发
Github 超过25K + 的star 熟，社区完善
Vue.js更轻量，gzip后大小只有26K；更易上手，学习曲线平稳
形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期
二、Vue的优缺点
优点
1. 轻量级
Vue作为一款轻量级前端框架，大小只有18–21KB，工程搭建简单，只需要几行命令符。因为Vue使用的主体语言为JS，开发者可以灵活地将其他框架（如React和Angular）的项目迁移到Vue，具有很高的集成能力。Vue提供的router路由可以便捷地搭建一个多界面应用。

2. 高性能
虚拟DOM和响应式避免了不必要的全局重新渲染，提升了用户体验，使用户操作更加流畅。

3. 好上手
与面向对象编程性质类似，组件化更符合人类思维。打个比方，我们在设计网页时，通常会把一个界面分成一块一块的、用于某功能的特定样式模块。Vue的组件化使前端开发更加容易理解，同时MVVM可以更便捷地实现交互，对新手十分友好。

4. 插件化
由于Vue框架的流行性，目前有许多基于Vue的npm扩展包和开发工具（如Vuex）。Vue可以在一个文件下统一管理所有外部插件的全局使用。

5. 便于测试
组件化利于开发者对于单一组件进行测试，很少发生在整个页面下找不到是哪个地方报错的情况。

缺点

1. 生态环境不够完善

虽然Vue五年以来的发展寻索，生态环境不如React和Angular规范。Vue开发的讨论社区较小。

2. 国外市场小

Vue是由中国尤大神开发的，主要有阿里巴巴、饿了么等国内大公司作为主流框架，国外大部分使用React和Angular。

三、vue2和vue3的模板区别
1.响应式的区别
2.0中vue的响应式是基于数据劫持（object.defineProperty这个方法来进行劫持的）当前这个方法是兼容主流浏览器的ie9以上都可以使用他是可以监听数据的变化从而让vue做出改变

但是他有一个bug object.defineProperty这个方法只能够监听初始化的时候数据如果程序运行到一半你给data中的对象或者是数组添加新属性的时候由于他只会在初始化监听那么你中间添加的内容就无法监听没有监听到就没有数据劫持没有数据劫持那么久没有双向绑定没有双向绑定那么数据变视图就不会发生改变我们使用$set

3.0中对2.0的bug进行了解决

3.0中的响应式是采用ES2015中最新的一个规范 Proxy来进行替代的 proxy是惰性监听（他不会在初始化的时候监听数据而是在你使用数据的时候才回去监听）

proxy是一个比较新的规范 ie还不支持 vue为了解决ie不支持的问题所以单独给ie进行了适配

传统主流浏览器使用proxy来进行监听

但是在ie中还是使用2.0中的object.defineProperty

2.底层的变化
3.0底层全部都是使用ts（typescript）编写的今后3.0可以更好的与ts结合

3.属性声明方式
2.0中都是使用vue属性的方式来创建数据方法计算属性等内容的

3.0中改变了变成了 api方式进行创建也就是或vue3.0把变量方法计算属性等内容封装成了一个个的方法使用方法的方式进行调用
4、代码区别

vue2版本
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   
   <script src="./js/v2.6.10/vue.js"></script>
</head>
<body>
   
   <div id='app'>
       {{msg}}
   </div>

   <script>
       var vm=new   Vue({
           el:'#app',
           data:{
               msg:'hello'
           }
       })
   </script>
</body>
</html>

四、MVVM 数据双向绑定
MVVM模式（全称为Model-View-ViewModel）为Vue实现数据双向绑定。在MVVM中，View为视图层，ViewModel为业务逻辑层，Model为数据层。

什么是数据双向绑定呢？当用户使View变化时（如填写表单），变化会自动同步到ViewModel处理相应逻辑，并将变化更新到Model数据库。反之，若服务端数据变化（如股价波动），变化会自动同步到ViewModel处理相应逻辑，并将变化同步到View展现给用户。

在用Vue之前，我完成HTML和JS之间的交互需要使用大量的DOM操作来实现动态加载。MVVM的数据双向绑定减少了DOM操作，更高效地实现了视图和数据的交互。同时，MVVM使界面、交互和数据层分离，便于设计人员负责设计界面，后端开发人员提供数据接口，而前端开发人员专注于业务交互逻辑的实现。

五、Vue的安装和使用
1. 直接引用script

2. 安装脚手架

npm install -g @vue/cli

3.创建应用实例

const app = Vue.createApp({

data() { return { count: 4 }

} })

const vm = app.mount('#app')

console.log(vm.count) // => 4

七、常用的vue的指令
v-text <div v-text="msg"> {{msg}}</div> 不能识别标签
v-html <div v-text="msg"> {{msg}}</div> 能识别标签
v-on 绑定事件 v-on:事件名=“方法名” 可以简写维 @事件名=“方法名”
v-model 实现的是表单元素的数据双向绑定
v-if 根据条件显示或者删除元素和组件
v-show 根据条件显示或者隐藏元素和组件
v-bind 给元素绑定属性 title="sdsd" v-bind:属性名=“变量” 简写 :属性名="值"
v-cloak 解决差值表达式闪烁问题用法：给标签添加此指令，然后给这个指令设置样式
————————————————

原文链接：https://blog.csdn.net/ranran0306/article/details/125236637

Vue基础总结

1.认识Vuejs

. Vue是一个渐进式框架,什么是渐进式的呢?。声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建。渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。. Vue有很多特点和Web开发中常见的高级功能。

解耦视图和数据。可复用的组件。前端路由技术。状态管理。虚拟DOM

2.Vue初体验

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>

<div id="app">
{{message}}
</div>
</body>
<script>
// 2、创建一个Vue的实例
var app = new Vue({
el: '#app', //用于挂载要管理的元素
data: {// 定义数据
message: '学习Vue.js'
}
});
</script>
</html>

3.Vue中的MVVM

. View层。

视图层。

前端开发中,通常就是DOM层。主要的作用是给用户展示各种信息.

Model层。

数据层。

数据可能是我们固定的死数据,更多的是来自我们的服务器,从网络上请求下来的数据

. VueModel层。

视图模型层。

视图模型层是View和Model沟通的桥梁。一方面它实现了Data binding,也就是数据绑定,将Model的改变实时的反应到了View中。另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

插值指令

1.Mustache

·插值表达式{们

数据绑定最常见的形式就是使用“Mustache”语法（双大括号）的文本插值。例如:

1<span>Message: f{ msg }}</span>

Mustache标签将会被替代为对应数据对象上msg属性(msg定义在data对象中）的值。无论何时，绑定的数据对象上msg 属性发生了改变，插值处的内容都会自动更新。

语法   {{}}JavaScript 表达式支持
普通表达式   {{ number + 1 }}
三元表达式   {{ ok ? ‘YES’ : ‘NO’ }}
三元表达式   {{ name == ‘smyhvae’ ? ‘true’ : ‘false’ }}
调用方法   {{ message.split(’’).reverse().join(’’) }}

2.v-once
该指令后面不需要跟任何表达
该指令表示元素只渲染一次，不会随着数据的改变而改变。

<h2 v-once>{{message}}</h2>

3.v-html
解析数据中的html代码，渲染到页面中

<h2 v-html="url"></h2>

4.v-text
v-text作用和Mustache比较相似：都是用于将数据显示在界面中, 不同的是 v-text 是写在属性中
v-text通常情况下，接收一个string类型

5.v-pre
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。

<h2 v-pre>{{message}}</h2>
1
6.v-cloak
在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。
v-cloak指令和CSS 规则一起用的时候，能够解决插值表达式闪烁的问题（即：可以隐藏未编译的标签直到实例准备完毕）

<div id="app" v-cloak>
<h2>{{message}}</h2>
</div>

总结
Mustache: {{}}语法, 可以写变量/逻辑表达式/计算值…
v-once : 元素只渲染一次，不会随着数据的改变而改变。
v-html="" : 解析数据中的html代码，渲染到页面中
v-text=“msg”: 写在属性当中, 将数据显示在界面中
v-pre: 原文输出, 显示原本的Mustache语法
v-cloak : 一般配合CSS规则一起使用, 够解决插值表达式闪烁的问题

v-bind绑定属性
1.v-bind介绍
前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
但是，除了内容需要动态来决定外，某些属性们也希望动态来绑定。
作用：可以给html元素或者组件动态地绑定一个或多个特性，例如动态绑定style和class
比如动态绑定a元素的href属性
比如动态绑定img元素的src属性
这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写： :
预期：any (with argument) | Object (without argument)
参数：attrOrProp (optional)
2.v-bind绑定class
绑定class有两种方式

对象语法
数组语法
对象语法
对象语法的含义是:class后面跟的是一个对象。

<h2 :class="{'active': isActive}">Hello World</h2>

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

<h2 class="title" :class="classes">Hello World</h2>

数组语法
数组语法的含义是:class后面跟的是一个数组。
   
<h2 class="title" :class="['active','news']">{{message}}</h2>
   
<h2 class="title" :class="[active,news]">{{message}}</h2>
   
<h2 class="title" :class="getClasses()">{{message}}</h2>
3.v-bind绑定style
我们可以利用v-bind:style来绑定一些CSS内联样式

绑定class有两种方式

对象语法
数组语法
对象语法

style后面跟的是一个对象类型
对象的key是css属性名
对象的value是具体赋的值, 可以来自data中的属性
:style="{color: currentColor, fontSize: fontSize + 'px'}"

computed计算属性
1.基本概念
计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题

计算属性是基于它们的响应式依赖进行缓存的

在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
将上面代码转换成计算属性

/* html */
<h2>{{fullNmae}}</h2>

/* js */
computed: {
fullNmae: function () {
return this.firstNmae + ' ' + this.lastNmae;
}
}

2.计算属性的setter和getter
每个计算属性都包含一个getter和一个setter
在上面的例子中，我们只是使用getter来读取。
在某些情况下，你也可以提供一个setter方法（不常用）。

3.Vue中Key属性
官方推荐我们在使用v-for时,给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢(了解) ?
这个其实和Vue的虚拟DOM的Diff算法有关系。
当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点
key的作用主要是为了高效的更新虚拟DOM

表单绑定v-model
1.基本概念
Vue中使用v-model指令来实现表单元素和数据的双向绑定
数据与模板是相互影响的, 一方发生变化, 另一方立即做出更新
引出:
在之前的案例, 我们通过v-bind,给<input>标签绑定了data对象里的name属性。data中的name的值发生改变时, <input>标签里的内容会自动更新。
可现在要做的是: 在<input>标签里修改内容, 要求data中的name的属性值自动更新。从而实现双向数据绑定。该怎么做呢? 这就可以利用v-model这个属性。

自定义局部指令
局部指令，需要定义在 directives 的选项用法和全局用法一样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准
directives: {
focus: {
inserted: function(el) {
el.focus();
}
}
}

2.侦听器 watch

侦听器的应用场景
- 数据变化时执行异步或开销较大的操作
- 注意: watch 中的属性一定是data 中已经存在的数据
3.过滤器
概念: Vue.js允许我们自定义过滤器,可被用作一些常见的文本格式化/处理。

过滤器可以用在两个地方: mustache插值表达式、v-bind表达式。

过滤器应该被添加在JavaScript表达式的尾部,由“管道”符指示。

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本

全局注册时是filter，没有s的。而局部过滤器是filters，是有s的
支持级联操作(对前一个过滤的数据再次进行过滤处理)