【5】vue基础

已于 2023-04-17 14:49:56 修改
阅读量70 收藏
点赞数
分类专栏： python 文章标签： vue.js javascript 前端
于 2023-04-13 09:34:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_54160307/article/details/130045847
版权

文章目录

1. Vue模板语法

Vue模板语法有两大类
1. 插值语法

  • 功能：用于解析标签体内容
  • 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性.

2. 指令语法

  • 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
  • 举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
    备注：Vue中有很多的指令，且形式都是：v-???，此处我们只是拿v-bind举个例子。

2. 数据绑定

Vue中有2种数据绑定的方式：

  1. 单向绑定(v-bind)：数据只能从data流向页面。

  2. 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

    备注：
    1.双向绑定一般都应用在表单类元素上（如：input、select等）（需要输入信息）
    2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

<!-- 普通写法 -->
			单向数据绑定：<input type="text" v-bind:value="name"><br/>
			双向数据绑定：<input type="text" v-model:value="name"><br/>

<!-- 简写 -->
			单向数据绑定：<input type="text" :value="name"><br/>
			双向数据绑定：<input type="text" v-model="name"><br/>

3. el与data两种写法

data与el的2种写法
1. el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。

//el的两种写法
const v = new Vue({
	el:'#root', //第一种写法
	data:{
			name:'尚硅谷'
		}
	})
console.log(v)
v.$mount('#root') //第二种写法

2. data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。

//data的两种写法
new Vue({
		el:'#root',
		//data的第一种写法：对象式
		 data:{
			name:'尚硅谷'
			} 
		//data的第二种写法：函数式
		data(){
			console.log('@@@',this) //此处的this是Vue实例对象
			return{
				name:'尚硅谷'
				}
			}
		})
  1. 一个重要的原则：
    由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

4. 数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

object.defineProperty

  • 数据代理的实现主要是依靠get()、set()实现
let number = 18
let person = {
	name:'张三',
	sex:'男',
	}
Object.defineProperty(person,'age',{
	// value:18,
	// enumerable:true, //控制属性是否可以枚举，默认值是false
	// writable:true, //控制属性是否可以被修改，默认值是false
	// configurable:true //控制属性是否可以被删除，默认值是false

	//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
	get(){
		console.log('有人读取age属性了')
		return number
		},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
	set(value){
			console.log('有人修改了age属性，且值是',value)
			number = value
		}
})
// console.log(Object.keys(person))
console.log(person)
  • 示例如下
let obj = {x:100}
let obj2 = {y:200}

Object.defineProperty(obj2,'x',{
		get(){
			return obj.x
		},
		set(value){
			obj.x = value
		}
	})

vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

<body>
		<!-- 准备好一个容器-->
	<div id="root">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</body>

<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'张三',
				address:'大连'
			}
		})
	</script>
  • 好处：更加方便的操作data中的数据
  • 原理：
    • 通过Object.defineProperty()把data对象中所有属性添加到vm上。
    • 为每一个添加到vm上的属性，都指定一个getter/setter。
    • 在getter/setter内部去操作（读/写）data中对应的属性。
      在这里插入图片描述

5. 事件处理

  • methods（方法）
  1. vue 选项对象中有一个叫methods的属性.这个属性里面专门来存放一些函数,用来给别人调用
1.使用methods属性给vue定义方法
2.在方法中使用this.属性名就可以直接访问data中的数据
3.在构造函数外部可以使用vm.方法名定义或者调用方法
  1. 代码格式如下：
var vm = new Vue({
    methods:{
        // 在此时定义方法，方法之间使用逗号分隔,下面两种方法都可
        方法名:function(){};
        方法名(){
        };
     });
  1. 如何调用？
<div id="app">
    {{ 方法名(参数) }}
</div>
  • 事件的基本使用
    • 1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
    • 2.事件的回调需要配置在methods对象中，最终会在vm上；
    • 3.methods中配置的函数，不要用箭头函数！否则this就不是vm了；
    • 4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
    • 5.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；
<!-- 准备好一个容器-->
		<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- <button v-on:click="showInfo">点我提示信息</button> -->
			<button @click="showInfo1">点我提示信息1（不传参）</button>
			<button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
		</div>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //此处的this是vm
					alert('同学你好！！')
				}
			}
		})
	</script>
  • 事件修饰符
  • 键盘事件

6.计算属性与监视

计算属性

  • 总结
计算属性：
	1.定义：要用的属性不存在，要通过已有属性计算得来。
			它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)
	2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
	3.get函数什么时候执行？
				(1).初次读取时会执行一次。
				(2).当依赖的数据发生改变时会被再次调用。
	4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
	5.备注：
			1.计算属性最终会出现在vm上，直接读取使用即可。
			2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。
  • 代码实例如下：
<div id="root">
	姓：<input type="text" v-model="firstName"> <br/><br/>
	名：<input type="text" v-model="lastName"> <br/><br/>
	测试：<input type="text" v-model="x"> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
	<!-- 全名：<span>{{fullName}}</span> <br/><br/>
	全名：<span>{{fullName}}</span> <br/><br/>
	全名：<span>{{fullName}}</span> -->
</div>

const vm = new Vue({
	el:'#root',
	data:{
		firstName:'张',
		lastName:'三',
		x:'你好'
	},
	computed:{
		//完整写法形式
		fullName:{
			//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
			//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
			get(){
				console.log('get被调用了')
				// console.log(this) //此处的this是vm
				return this.firstName + '-' + this.lastName
			},
			//set什么时候调用? 当fullName被修改时。
			set(value){
				console.log('set',value)
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		}
		//简写形式，只考虑读不考虑写
		fullName(){
			console.log('get被调用了')
			return this.firstName + '-' + this.lastName
		}
	}
})

监视

  • 总结
监视属性watch：
	1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
	2.监视的属性必须存在，才能进行监视！！
	3.监视的两种写法：
			(1).new Vue时传入watch配置
			(2).通过vm.$watch监视
  • 代码实例如下：
const vm = new Vue({
	el:'#root',
	data:{
		isHot:true,
	},
	computed:{
		info(){
			return this.isHot ? '炎热' : '凉爽'
		}
	},
	methods: {
		changeWeather(){
			this.isHot = !this.isHot
		}
	},
	//第一种写法
	 watch:{
		isHot:{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}
	} 
})
//第二种写法
vm.$watch('isHot',{
	immediate:true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。
	handler(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue)
	}
  • 深度监视
深度监视：
	(1).Vue中的watch默认不监测对象内部值的改变（一层）。
	(2).配置deep:true可以监测对象内部值改变（多层）。
	备注：
	(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
	(2).使用watch时根据数据的具体结构，决定是否采用深度监视。

data:{
	isHot:true,
	numbers:{
		a:1,
		b:1,
	}
},
computed:{
	info(){
		return this.isHot ? '炎热' : '凉爽'
	}
},
methods: {
	changeWeather(){
		this.isHot = !this.isHot
	}
},
watch:{
	isHot:{
		// immediate:true, //初始化时让handler调用一下
		//handler什么时候调用？当isHot发生改变时。
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	},
	//监视多级结构中某个属性的变化
	'numbers.a':{
		handler(){
			console.log('a被改变了')
		}
	} 
	//监视多级结构中所有属性的变化
	numbers:{
		deep:true,
		handler(){
			console.log('numbers改变了')
		}
	}
}
  • 简写形式
watch:{
	//正常写法
	 isHot:{
			// immediate:true, //初始化时让handler调用一下
			// deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}, 
//简写
	isHot(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	} 
}

//正常写法
 vm.$watch('isHot',{
		immediate:true, //初始化时让handler调用一下
		deep:true,//深度监视
		handler(newValue,oldValue){
			console.log('isHot被修改了',newValue,oldValue)
		}
	})

	//简写
 vm.$watch('isHot',(newValue,oldValue){
		console.log('isHot被修改了',newValue,oldValue,this)
	})
  • watch与computed对比
computed和watch之间的区别：
	1.computed能完成的功能，watch都可以完成。
	2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
两个重要的小原则：
		1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
		2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），
		  最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

7. 渲染

1、条件渲染

  • 总结：当表达式里面为true时执行指令，为false时不执行。
1.v-if
写法：
	(1).v-if="表达式" 
	(2).v-else-if="表达式"
	(3).v-else="表达式"
	适用于：切换频率较低的场景。
	特点：不展示的DOM元素直接被移除。
	注意：v-if可以和:v-else-if、v-else一起使用，`但要求结构不能被“打断”。`

2.v-show
	写法：v-show="表达式"
	适用于：切换频率较高的场景。
	特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
								
3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

<!-- 使用v-show做条件渲染 -->
<h2 v-show="false">欢迎来到{{name}}</h2> 
<h2 v-show="1 === 1">欢迎来到{{name}}</h2> 

<!-- 使用v-if做条件渲染 -->
<h2 v-if="false">欢迎来到{{name}}</h2> 
<h2 v-if="1 === 1">欢迎来到{{name}}</h2>

<!-- v-else和v-else-if -->
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
<div v-else>哈哈</div> 

<!-- v-if与template的配合使用 -->
<template v-if="n === 1">
	<h2>你好</h2>
	<h2>尚硅谷</h2>
	<h2>北京</h2>
</template>

2、列表渲染

  • 总结：v-for使用
v-for指令:
	1.用于展示列表数据
	2.语法：v-for="(item, index) in xxx" :key="yyy"
	3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

实例代码如下：

<div id="root">
	<!-- 遍历数组 -->
	<h2>人员列表（遍历数组）</h2>
	<ul>
		<li v-for="(p,index) of persons" :key="index">
			{{p.name}}-{{p.age}}
		</li>
	</ul>

	<!-- 遍历对象 -->
	<h2>汽车信息（遍历对象）</h2>
	<ul>
		<li v-for="(value,k) of car" :key="k">
			{{k}}-{{value}}
		</li>
	</ul>

	<!-- 遍历字符串 -->
	<h2>测试遍历字符串（用得少）</h2>
	<ul>
		<li v-for="(char,index) of str" :key="index">
			{{char}}-{{index}}
		</li>
	</ul>
	
	<!-- 遍历指定次数 -->
	<h2>测试遍历指定次数（用得少）</h2>
	<ul>
		<li v-for="(number,index) of 5" :key="index">
			{{index}}-{{number}}
		</li>
	</ul>
</div>

new Vue({
	el:'#root',
	data:{
		persons:[
			{id:'001',name:'张三',age:18},
			{id:'002',name:'李四',age:19},
			{id:'003',name:'王五',age:20}
		],
		car:{
			name:'奥迪A8',
			price:'70万',
			color:'黑色'
		},
		str:'hello'
	}
})
  • 详解key
面试题：react、vue中的key有什么作用？（key的内部原理）
						
		1. 虚拟DOM中key的作用：
			key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 
			随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：
						
		2.对比规则：
			(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
					①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
					②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

			(2).旧虚拟DOM中未找到与新虚拟DOM相同的key
					创建新的真实DOM，随后渲染到到页面。
								
		3. 用index作为key可能会引发的问题：
			1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
			       会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

			2. 如果结构中还包含输入类的DOM：
					会产生错误DOM更新 ==> 界面有问题。

	    4. 开发中如何选择key?:
			1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
			2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
			  	使用index作为key是没有问题的。

在这里插入图片描述

在这里插入图片描述

7. Vue的组件化编程（重要！！！）

1、不同写法对比

在这里插入图片描述
在这里插入图片描述

2、非单文件组件

  • 定义：一个文件包含多个组件
  • 实例代码如下
		<!-- 准备好一个容器-->
		<div id="root">
			<hello></hello>
			<hr>
			<h1>{{msg}}</h1>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<school></school>
			<hr>
			<!-- 第三步：编写组件标签 -->
			<student></student>
		</div>

		<div id="root2">
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		//第一步：创建school组件
		const school = Vue.extend({
			template:`
				<div class="demo">
					<h2>学校名称：{{schoolName}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showName">点我提示学校名</button>	
				</div>
			`,
			// el:'#root', //组件定义时，一定不要写el配置项，
			//因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
			data(){
				return {
					schoolName:'尚硅谷',
					address:'北京昌平'
				}
			},
			methods: {
				showName(){
					alert(this.schoolName)
				}
			},
		})

		//第一步：创建student组件
		const student = Vue.extend({
			template:`
				<div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>
			`,
			data(){
				return {
					studentName:'张三',
					age:18
				}
			}
		})
		
		//第一步：创建hello组件
		const hello = Vue.extend({
			template:`
				<div>	
					<h2>你好啊！{{name}}</h2>
				</div>
			`,
			data(){
				return {
					name:'Tom'
				}
			}
		})
		
		//第二步：全局注册组件
		Vue.component('hello',hello)

		//创建vm
		new Vue({
			el:'#root',
			data:{
				msg:'你好啊！'
			},
			//第二步：注册组件（局部注册）
			components:{
				school,
				student
			}
		})

		new Vue({
			el:'#root2',
		})
	</script>

  • Vue中使用组件的三大步骤：

    • 一、定义组件(创建组件)
    • 二、注册组件
    • 三、使用组件(写组件标签)

  • 一、如何定义一个组件？
    使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；区别如下：

    • 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
    • 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
    • 备注：使用template可以配置组件结构。

  • 二、如何注册组件？

    • 1.局部注册：靠new Vue的时候传入components选项
    • 2.全局注册：靠Vue.component(‘组件名’,组件)

  • 三、编写组件标签：
    <school></school>

  • 注意点
1.关于组件名:
		一个单词组成：
				第一种写法(首字母小写)：school
				第二种写法(首字母大写)：School
		多个单词组成：
				第一种写法(kebab-case命名)：my-school
				第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
		备注：
			(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
			(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:
			第一种写法：<school></school>
			第二种写法：<school/>
		备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

3.一个简写方式：
			const school = Vue.extend(options) 可简写为：const school = options

组件嵌套

  • 组件嵌套就是两组件之间，一个是父组件，一个是子组件，子组件注册在父组件里面
  • 实例如下：
<body>
		<!-- 准备好一个容器-->
		<div id="root">
			
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		//定义student组件
		const student = Vue.extend({
			name:'student',
			template:`
				<div>
					<h2>学生姓名：{{name}}</h2>	
					<h2>学生年龄：{{age}}</h2>	
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					age:18
				}
			}
		})
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<student></student>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			//注册组件（局部）
			components:{
				student
			}
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`<h1>{{msg}}</h1>`,
			data(){
				return {
					msg:'欢迎来到尚硅谷学习！'
				}
			}
		})
		
		//定义app组件
		const app = Vue.extend({
			template:`
				<div>	
					<hello></hello>
					<school></school>
				</div>
			`,
			components:{
				school,
				hello
			}
		})

		//创建vm
		new Vue({
			template:'<app></app>',
			el:'#root',
			//注册组件（局部）
			components:{app}
		})
	</script>

VueComponent构造函数

  • 1、school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

  • 2、我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

  • 3、特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

  • 4、关于this指向：

    • (1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
    • (2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

  • 5、VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

		<div id="root">
			<school></school>
			<hello></hello>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		
		//定义school组件
		const school = Vue.extend({
			name:'school',
			template:`
				<div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="showName">点我提示学校名</button>
				</div>
			`,
			data(){
				return {
					name:'尚硅谷',
					address:'北京'
				}
			},
			methods: {
				showName(){
					console.log('showName',this)
				}
			},
		})

		const test = Vue.extend({
			template:`<span>atguigu</span>`
		})

		//定义hello组件
		const hello = Vue.extend({
			template:`
				<div>
					<h2>{{msg}}</h2>
					<test></test>	
				</div>
			`,
			data(){
				return {
					msg:'你好啊！'
				}
			},
			components:{test}
		})


		// console.log('@',school)
		// console.log('#',hello)

		//创建vm
		const vm = new Vue({
			el:'#root',
			components:{school,hello}
		})
	</script>

一个内置关系

  • 1、一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  • 2、为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

3、单文件组件（实际开发中采用）

  • 定义：一个文件只包含一个组件
  • 结构/模板如下：
<template>
<!-- 组件的结构/页面模板（html）-->
	<div >
	</div>
</template>
<script>
	//组件交互相关的js代码（数据、方法等）
	export default {
		data() {return {}}, 
		methods: {}, 
		computed: {}, 
		components: {}
}
</script>
<style>
	//组件的样式（css）
</style>

多组件之间的关系

一般来说会有一个固定的父组件App,注册在new Vue(vm Vue实例对象)中。然后在App.vue中引入各子组件，子组件注册在App组件中，代码如下：

  • main.js（入口文件）
import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})
  • index.html(页面结构)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>练习一下单文件组件的语法</title>
	</head>
	<body>
		<!-- 准备一个容器 -->
		<div id="root"></div>
		<!-- <script type="text/javascript" src="../js/vue.js"></script> -->
		<!-- <script type="text/javascript" src="./main.js"></script> -->
	</body>
</html>
  • App.vue(父组件)
<template>
	<div>
		<School></School>
		<Student></Student>
	</div>
</template>

<script>
	//引入组件
	import School from './School.vue'
	import Student from './Student.vue'

	export default {
		name:'App',
		components:{
			School,
			Student
		}
	}
</script>
  • School.vue(子组件)
<template>
	<div class="demo">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
		<button @click="showName">点我提示学校名</button>	
	</div>
</template>

<script>
	 export default {
		name:'School',
		data(){
			return {
				name:'尚硅谷',
				address:'北京昌平'
			}
		},
		methods: {
			showName(){
				alert(this.name)
			}
		},
	}
</script>

<style>
	.demo{
		background-color: orange;
	}
</style>
  • Student.vue(子组件)
<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生年龄：{{age}}</h2>
	</div>
</template>

<script>
	 export default {
		name:'Student',
		data(){
			return {
				name:'张三',
				age:18
			}
		}
	}
</script>
橙子太
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3+webpack5项目搭建基础版
05-13
使用vue3 +webpack5 + pina搭建的基础版前端项目。内容详细，包含配置注释等。配合文档（https://blog.csdn.net/qq_32768761/article/details/138844547?spm=1001.2014.3001.5501）实现从vue3创建项目，使用webpack5...
vue3+webpack5基础-区分环境版
05-14
【vue3+webpack5】搭建前端项目，配合文档（https://blog.csdn.net/qq_32768761/article/details/138844547?spm=1001.2014.3001.5502）步骤详尽，满足想要搭建项目的每一个手动党。从vue3创建项目，到webpack本地...
vue基础用法&基础原理整理
hangao233的博客
04-06 6万+
vue基础用法&基础原理整理 1. vue基础知识和原理 1.1 初识Vue 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象 demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法 demo容器里的代码被称为【Vue模板】 Vue实例和容器是一一对应的 真实开发中只有一个Vue实例，并且会配合着组件一起使用 {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
Vue基础知识总结 1：Vue入门
热门推荐
学Java，找哪吒
06-23 8万+
Vue基础教程系列，打造精品专栏。
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue基础入门
weixin_58470558的博客
05-13 5556
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
vue 基础知识总结
qq_40046544的博客
09-14 3166
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用户构建用户界面的前端框架在创建 vue 实例期间，可以在 filters 节点中定义过滤器}}});ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向的一个空对象动态组件指的是动态切换组件的显示与隐藏。
vue基础知识汇总
yuandawang的博客
01-06 5813
vue基础知识汇总
vue基础笔试题
qq_51066068的博客
07-01 1万+
ctions 选项用来定义事件处理方法，用于处理 state 数据。actions 类似于 mutations，不同之处在于 actions 是异步执行的，事件处理函数可以接收 {commit} 对象，完成 mutation 提交，从而方便 devtools 调试工具跟踪状态的 state 变化。...............
Vue基础
MoYuP_ENG的博客
10-13 6574
是一套用于构建用户界面的渐进式JavaScript框架简单应用：只需一个轻量小巧的核心库复杂应用：可以引入各式各样的Vue插件渐进式：Vue可以自底向上逐层的应用 （从简单应用到复杂应用就是渐进式）Vue特点：1、采用组件化模式，提高代码复用率、且让代码更好维护2、声明式编码，让编码人员无需直接操作DOM，提高开发效率3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点局部指令：new Vue({ directives:{指令名:配置对象} })或。
Vue 基础
roydon
10-11 4381
vue2基础
Vue基础知识测试
简单点的博客
10-18 6605
Vue基础知识测试
一、vue基础语法（轻松入门vue）
01-08
Vue基础语法一、HelloWord二、MVVM设计思想三、指令1. v-cloak2. v-text3. v-html4. v-show4. v-pre5. v-once6. v-model7. v-on事件修饰符按键修饰符自定义按键修饰符8. v-bindclass样式绑定style样式绑定9. v-if、v...
vue.js基础教学视频源码 5天内容
09-21
这是我在自学vue时候跟着视频系统学习自己动手敲得代码，内容基础却非常有用，入门的快捷方式，整整5天的内容，注释非常多，讲解的很清楚透彻，内容物有所值，不用搭建环境，就是.html后缀的文件
vue3教程基础1-5
12-18
vue3教程基础1-5
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 579
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
vue3 vue-draggable-next 实现拖拽穿梭框效果
最新发布
游九尘的博客
06-01 353
【代码】vue3 vue-draggable-next 实现拖拽穿梭框效果。
【Vue】v-if / v-show条件渲染指令
qq_39921135的博客
05-29 499
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。表达式值为 true 显示， false 隐藏。作用： 控制元素显示隐藏（简单的显示隐藏）场景：频繁切换显示隐藏的场景。
vue 笔记03
m0_47045804的博客
05-30 892
vue挂载以后把所有内容手抄一份就叫做虚拟dom 假设你要操作dom 等一下先不要操作真实dom, 先修改我这个手抄的虚拟的DOM 改完了么？如果我们需要一个变量 这个变量的值是根据data里面某个值或者某几个值的变化而变化的时候,那么我们就需要用到vue里面的computed计算属性。data里面定义的数据无法直接互相访问 因为加载到data的时候还没有产生当前的vue对象。return 返回的结果就是当前计算属性的值。回调函数的参数就是过滤原本的值return 返回过滤的新值。
Vue基础、vue实战
05-17
以下是Vue的基础知识： 1. 数据绑定：Vue使用双向数据绑定来实现视图和数据的同步更新。 2. 组件化：Vue允许开发人员将应用程序拆分成多个可重用的组件。 3. 指令：Vue提供了一系列指令，用于操作DOM元素的属性和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值