目录

一、Vue的概述

二、前端三大框架-MVVM框架

三、Vue的优缺点

四、vue2和vue3的模板区别

1.响应式的区别

2.底层的变化

3.属性声明方式

4、代码区别

五、vue的安装

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

七、常用的vue的指令

一、Vue的概述

 vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。 简单，高效，生态丰富（插件多）

  • 它是一个轻量级MVVM框架
  • 数据驱动+组件化的前端开发
  • Github 超过25K + 的star 熟，社区完善
  • 形成Vue渐进式框架的核心概念为：组件化，MVVM，响应式，和生命周期

二、前端三大框架-MVVM框架

  • React 是用于构建用户界面的JavaScript库。
  • Vue 是一套用于构建用户界面的渐进式框架
  • Angular 是一个应用设计框架与开发平台，用于创建高效、复杂、精致的单页面应用

三、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。

vue对比Angular React的优点：

Vue.js更轻量，gzip后大小只有26K （Angular 56K,React 44K）

Vue.js更易上手，学习曲线平稳

吸收两家之长，借鉴了angular的指令和react的组件化

四、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>
	<!-- 引入vue -->
	<script src="./js/v2.6.10/vue.js"></script>
</head>
<body>
	<!-- 2.dom节点 -->
	<div id='app'>
		{{msg}}
	</div>
	
	<script>
		var vm=new	Vue({
			el:'#app',
			data:{
				msg:'edu'
			}
		})
	</script>
</body>
</html>
vue3版本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue3.js -->
		<script src="./js/v3.2.8/vue.global.prod.js"></script>
	</head>
	<body>
		<!-- 2.DOM节点元素 -->
		<div id="app">
			{{msg}}
		</div>
		
		<!-- 3.Vue对象 -->
		<script>
			var app=Vue.createApp({
				data(){
					return {
						msg:'edu'
					}
				}
			})
			var vm=app.mount('#app')
		</script>
	</body>
</html>

五、vue的安装

1. 直接引用script

<script src="https://unpkg/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 解决差值表达式闪烁问题   用法：给标签添加此指令，然后给这个指令设置样式

<!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>
		<!-- 引入vue -->
		<script src="./js/v2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 2.dom节点 -->
		<div id='app'>
			{{msg}}
			<!-- 1.innerText的属性方法 -->
			<h1 v-text='flag?msg:say'></h1>

			<!-- 2.innerHTML的属性方法  html可以识别标签 -->
			<h1 v-html='flag?msg:say'></h1>

			<!--3.v-on 事件绑定 -->
			<!-- <button v-on:click='flag=!flag;count++' type='button'>按钮{{count}}</button>
<br> -->
			<button @click='flag=!flag;count++' type='button'>按钮{{count}}</button><br>

			<!--4. v-show方法 -->
			<!-- 	<img v-show='flag' src='./img/lx3.jpg'>
		<img v-if='flag' src='./img/tu10.jpg.jpg'> -->

			<!-- 5.条件渲染 v-if v-else-if v-else -->
			<!-- <img v-if='count==1' src="./img/tu10.jpg" alt="">
		<img  v-else-if='count==2' src="./img/tu11.jpg" alt="">
		<img  v-else  src="./img/tu12.jpg" alt=""> -->

			<!-- 6.列表渲染 v-for -->
			<!-- v-for在严格情况下，要添加 :key唯一标识 -->
			<div  v-for='item,index in myImgs' :key='index' class='item'>
				<h1>{{index+1}}--{{item.title}}</h1>
				<img :src="item.img" alt="">
			</div>

		</div>

		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: 'qikuedu',
					say: '你好',
					flag: true,
					count: 0,
					myImgs: [
						{
							title: '标题1',
							img: 'img/tu10.jpg'
						},
						{
							title: '标题2',
							img: 'img/tu11.jpg'
						},
						{
							title:'标题3',
							img: 'img/tu12.jpg'
						},
					]
				},
			})
		</script>
	</body>
</html>

更多推荐

第一讲 vue基础（vue的概念、前端三大框架、Vue的优缺点、vue2和vue3的模板区别、vue的安装、Vue模板语法-文本渲染、常用的vue的指令）