Vue2+Vue3

最新推荐文章于 2024-10-16 17:53:31 发布

qq_44013482

最新推荐文章于 2024-10-16 17:53:31 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/qq_44013482/article/details/120601151

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

vue2和vue3结合

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue基础

1.什么是vue

它是一套用于构建用户界面的渐进式JavaScript框架（渐进式说的是可以自底向上逐层的应用）

2.谁开发的

尤雨溪（2014年vue正式对外发布了，版本号为0.8.0，Taylor otwell讲自己在学vue）

后起之秀，生态完善，已然成为国内前端工程师必备技能

3.vue的特点

（1）采用组件化模式，提高代码复用率、且让代码更好维护

（2）声明式编码，让编码人员无需直接操作DOM，提高开发效率

（3）使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

4.学习Vue之前要掌握的JavaScript基础知识

Es6语法规范，Es6模块化，包管理器，原型、原型链，数组常用方法，axios，promise

5. 安装vue

因为我电脑里有Hibuder X 所以就用这个来写了（可以参考vue.js官网里的教程进行安装）

6.hello小案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>初识vue</title>
		<!--引入vue-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--
		    初识Vue：
			  1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
			  2.root容器中的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
			  3.root容器里的代码被称为【Vue模板】;
			  4.Vues实例和容器是一一对应的
			  5.真实开发中只有一个Vue实例，并且会配合组件一起使用
			  6.{{xxx}}中的xxx要挟js表达式，且xxx可以自动读到data中的所有属性
			  7.一旦data中数据发生更改，那么模板中用到该数据的地方也会自动更新
		-->



		<!--准备好一个容器-->
		<div id="root">
			<h1>hello {{name.toUpperCase()}},{{addrss}}</h1>//通过插值，将data中的值插入
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false //阻止vue在启动时生成生产提示
			//创建Vue实例，想用Vue就要使用这个



			new Vue({ //只传一个对象，为配置对象
				el: '#root', //el是element，值定当前容器为哪个容器服务，值通常为选择器字符串
				data: { //data中存储数据，数据供el中的容器使用，值暂时想写成一个对象
					name: 'Vue123',
					addrss:'北京'
				}
			})
		</script>
	</body>
</html>

注：容器和vue实例一一对应

{{}}中必须写成js中的表达式（一个表达式会生成一个值，可以放在任何需要值的地方，例如：a变量，a+b，.demo（1）,三元表达式)

7.模板语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模板语法</title>
		<script type="text/javascript" src="js/vue.js" charset="utf-8">
		
		</script>
	</head>
	<body>
		<!--
		    vue模板语法有两大类：
			   1.插值语法
			       功能：解析标签体中的内容
				   写法：{{xxx}},中的xxx值js表达式，且可以直接读到data中的所有属性
			   2.指令语法
			       功能：解析标签属性，标签体内容，绑定事件等
				   写法：v-bind:href="xxx" 或简写成 :href="xxx",xxx是js表达式，且可以直接读到data中的所有属性
				   备注：vue中有很多指令，形式都是v-???,此处只是用v-bind举例
		-->
		<div id="root">
			<h1>插值语句</h1><!--通过插值，将data中的值插入-->
			<h3>你好，{{name}}</h3>
			<hr />
			<h1>指令语法</h1>
			<a v-bind:href="school.url">点我去{{school.name}}学习1</a>
			<!-- v-bind: ===>简写为:-->
			<a :href="school.url">点我去{{school.name}}学习2</a>
		</div>
		<script type="text/javascript">
			Vue.config.productionTip = false //阻止vue在启动时生成生产提示
			//创建Vue实例，想用Vue就要使用这个
			new Vue({ //只传一个对象，为配置对象
				el: '#root', //el是element，值定当前容器为哪个容器服务，值通常为选择器字符串
				data: { //data中存储数据，数据供el中的容器使用，值暂时想写成一个对象
					name: 'jack',
					school:{
						name:'尚硅谷',
						url:'http:www.atguigu.com'
						
					}
					
				}
			})
		</script>
	</body>
</html>

8.数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据绑定</title>
		<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<!--
		    Vue中有两种数据绑定的方式：
			    1.单向绑定（v-bind）：数据只能从data流向页面
				2.双向绑定（v-model）：数据补技能从data流向页面，还可以从页面流向data
				   备注：1.双向绑定一般都应用于表单元素中（如input，select中）
				        2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value的值
		-->
		<div id="root">
			
		单向数据绑定:<input  type="text" v-bind:value="name" ><br />
		<!--v-model只能用在表单类元素（输入元素）上-->
		双向数据绑定:<input  type="text" v-model:value="name" />
		
		</div>
		<script type="text/javascript">
		Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷'
			}
		})
		</script>
	</body>
</html>

9.el和data的两种写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>el与data的两种写法</title>
		<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<!--
		   data与el 的两种写法：
		       1.el的两种写法：
			     （1）.new Vue时候配置el属性
				 （2）先创建Vue实例，随后再通过vm.$mount('root')指定el的值
			   2.data有两种写法
			     （1）对象式
			     （2）函数式
			  3.由Vue管理的函数，不能写成箭头式，写成箭头式this的就不是Vue实例了
		-->
		<div id="root">
			<h1>你好，{{name}}</h1>
		</div>
		
		<script type="text/javascript">
		Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
		const v=new Vue({
			// el:'#root',//el的第一种写法
			data:{//data的第一种写法：对象式
				name:'尚硅谷'
			},
			//data的第二种写法：函数式（组件时必须用这种，不然会报错）
			data:function(){
				return{
					name:'尚硅谷'
				}
			}
		})
		console.log(v)
		v.$mount('#root')//el的第二种写法，用这个也可以指定容器，这种更为灵活
		</script>
	</body>
</html>

10.MVVM模

1.M：模型（Model）：对应data中数据

2.V:视图（View）：模板

3.VM：视图模型（ViewModel）：Vue实例对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>MVVM模型</title>
		<script type="text/javascript" src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<!--
		  MVVM模型：
		      1.M：模型（Model）：对应data中数据
		      2.V:视图（View）：模板
		      3.VM：视图模型（ViewModel）：Vue实例对象
		  观察发现：
		      1.data中所有的属性，最后都出现在了vm身上
			  2.VM身上所有的属性 及 vue原型上的所有属性，在Vue模板中度可以直接使用
		-->
		<div id="root">
			<h1>学校名称：{{name}}</h1>
			<h1>学校地址：{{addrss}}</h1>
			<h1>测试1：{{$options}}</h1>
			<h1>测试2:{{_c}}</h1>
			<h1>测试3：{{1+1}}</h1>
			
		</div>
		
		<script type="text/javascript">
		Vue.config.productionTip=false;//阻止vue在启动时生成生产提示
		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				addrss:'北京'
			}
		})
		console.log(vm)
		</script>
	</body>
</html>

11.数据代理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>什么是数据代理</title>
		
	</head>
	<body>
		<!--数据代理：通过一个对象代理另一个对象中属性的操作（读/写）-->
		
		<script type="text/javascript">
			let obj={x:100}
			let obj2={y:200}
			
			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x=value
				}
			})
		</script>
	
	
	
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>回顾Object.defineproperty方法</title>
		
	</head>
	<body>
		
		<script type="text/javascript">
		    let number=18
			let  person={
				name:'张三',
				sex:'男',
				// age:18
			}
			//添加的属性，不能枚举（不能遍历，便利时没有）
			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true,//控制属性是否可以枚举，默认为false
				// witrable:true,//控制属性是否可以被修改，默认值为false
				// configable:true//控制属性是否可以被删除，默认值为false
				
				get:function(){//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
					return number
				},
				set(){//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到具体修改的值
					number=value
				}
			})
			console.log(person)
		</script>
	</body>
</html>