一、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>
vue3版本
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="./js/v3.2.8/vue.global.prod.js"></script></head><body><div id="app">{{msg}}</div><script>var app=Vue.createApp({data(){return {msg:'hello'}}})var vm=app.mount('#app')</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

<script src="https://unpkg.com/vue@next"></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
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>第一个vue案例</title><script src="../js/vue.js"></script></head><body><div id="app">hello Vue!</div><script>const app = Vue.createApp({data() {return { count: 4 }}})const vm = app.mount('#app')console.log(vm.count) // => 4</script></body>
</html>

六、Vue模板语法-文本渲染

{{ }} 语法

<div> {{msg}}</div>

const app = Vue.createApp({

data() {return { msg: ‘你好Vue3’ } }

})

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

七、常用的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 解决差值表达式闪烁问题   用法：给标签添加此指令，然后给这个指令设置样式

Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令相关推荐

VUE3.x（v-model）数据双向绑定指令
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...
vue数据双向绑定原理
vue 双向绑定原理官网–https://cn.vuejs.org/v2/guide/reactivity.html 1.vue双向数据绑定是通过数据劫持并结合发布-订阅模式的方法来实现的 ...
小猿圈解析vue数据双向绑定的缺点
vue是当今前端很流行的一种框架,但是vue也是有一定的缺陷的,你有过了解吗?下面小猿圈web前端老师就为你解析一下vue数据双向绑定的缺陷,希望对你有所帮助,下面我们一起了解一下吧. 1.vue 实 ...
vue中通过数据双向绑定给video标签的src赋值，只有第一次有效，怎么解决？
场景:在一个视频列表页面,点击视频列表,则全屏播放视频.全屏播放是一个公用组件,每次点击视频列表则把该视频的播放地址通过vue的数据双向绑定到组件中的video标签,如下: <video con ...
Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
vue数据双向绑定的原理
vue数据双向绑定的原理一复习闭包 1 闭包含义: 当函数嵌套时,内部函数使用了外部函数的变量,就会产生闭包当函数可以记住并访问自己的作用域时,就会产生闭包 2 闭包注意点 ① 队列里的代码执行 ...
Vue源码学习（三）——数据双向绑定
在Vue中我们经常修改数据,然后视图就直接修改了,那么这些究竟是怎么实现的呢? 其实Vue使用了E5的语法Object.defineProperty来实现的数据驱动. 那么Object.defineP ...
Vue 数据双向绑定
1. 前言本小节我们将介绍 Vue 中数据的双向绑定指令 v-model.v-model 的学习相对简单我们可以用 v-model 指令在表单 . 及元素上创建双向数据绑定.它会根据控件类型自动 ...

Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令

一、VueJS是什么?

二、Vue的优缺点

三、vue2和vue3的模板区别

四、MVVM 数据双向绑定

五、Vue的安装和使用

六、Vue模板语法-文本渲染

七、常用的vue的指令

Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令相关推荐

最新文章

热门文章