VueVue

已于 2022-03-27 16:40:14 修改
阅读量551 收藏 1
点赞数
文章标签： vue.js
于 2022-03-20 22:06:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34913864/article/details/123617948
版权
本文详细介绍了Vue.js的基本概念和实践应用，包括数据绑定、模板语法、计算属性、事件处理、条件渲染、列表渲染、数据响应式原理等。通过实例展示了Vue实例的生命周期、自定义指令以及如何使用过滤器。此外，还讨论了Vue中的安全问题，如v-html的使用注意事项。文章深入浅出地阐述了Vue开发中常用的技术点，是学习和进阶Vue的宝贵资料。
摘要由CSDN通过智能技术生成

Vue

<!DOCTYPE html>
<html lang="en">

<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>初始Vue</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>Hello,{{name}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false
        const x = new Vue({
            el: '#root',
            data:{
                name:'Vue'
            }
        })
    </script>
</body>
</html>

1.el:挂载点
2.data:存数据，供el指定容器使用
3.注意区分，js表达式和js代码(语句)

2.模板语法

1.插值语法 {{xxx}} xxx是js表达式，且可以读取data中的所有属性
2.指令语法 用于解析标签（标签属性、标签内容、绑定事件…）
eg:v-bind:href=‘xxx’ 简写 :herf=‘xxx’ ,且可以读取data中的所有属性

3.数据绑定

1.v-model只能应用在表单类元素（输入类元素（input select等））
2.v-model:value=1简写为v-model=1，

4._el与data的两种写法

在这里插入图片描述
1.v.$mount() 等价于el: 但v. $mount可以做一些其他事，比如定时器
在这里插入图片描述

5.mvvm模型

1.m模型 v视图 vm 视图模型也就是Vue实例
2.data中的所有属性 最后都出现在了vm身上，vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用
const vm=new Vue（{}）

6.1数据代理

1.Object.defineProperty（person，‘age’，{
value：18，
enumerable：true 可枚举的，理解为可遍历。
writable:true 控制属性是否被修改
configgurable:true 控制属性是否可以删除
当有人读取person的age属性时，get函数（getter）就会被调用，且返回值是age的值
get:function(){
return ‘hello’
}
}）
在这里插入图片描述

6.2何为数据代理

1.通过一个对象代理对另一个对象中属性的操作（读或写）在这里插入图片描述

6.3Vue的数据代理

1.通过vm对象来代理data对象中属性的操作（读/写）
2.好处:更加方便的操作data中的数据
3.原理：通过object.defineProperty（）把对象中所有属性添加到vm上。为每一个属性指定getter和setter

7.2 事件修饰符

Vue中的事件修饰符：
					1.prevent：阻止默认事件（常用）；
					2.stop：阻止事件冒泡（常用）；
					3.once：事件只触发一次（常用）；
					4.capture：使用事件的捕获模式；
					5.self：只有event.target是当前操作的元素时才触发事件；
					6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

7.3键盘事件

1.Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right

			2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

			3.系统修饰键（用法特殊）：ctrl、alt、shift、meta
						(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
						(2).配合keydown使用：正常触发事件。

			4.也可以使用keyCode去指定具体的按键（不推荐）

			5.Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

8.计算属性

计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来。
2.原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3.get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4.优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5.备注：
1.计算属性最终会出现在vm上，直接读取使用即可。
2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。

//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
//set什么时候调用? 当fullName被修改时。

	const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
			},
			computed:{
				//完整写法
				/* fullName:{
					get(){
						console.log('get被调用了')
						return this.firstName + '-' + this.lastName
					},
					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
				}
			}
		})

9.监视属性

深度监视：
					(1).Vue中的watch默认不监测对象内部值的改变（一层）。
					(2).配置deep:true可以监测对象内部值改变（多层）。
			备注：
					(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
					(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
computed和watch之间的区别：
					1.computed能完成的功能，watch都可以完成。
					2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
			两个重要的小原则：
						1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
						2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
							这样this的指向才是vm 或 组件实例对象。

10.绑定样式

  1. :class=“mood”
  2. 想要绑定样式，可以绑定字符串，数组，对象。但无论如何，数据都要放在data里，
  3. :style="{}"
  4. 行内样式的话，要写成对象，也可以写成数组形式。遇到两个单词时，中间的-，后一个字母要大写。比如fontSize==font-size
  5. 不动的东西，页面正常写就行。动态变化的话，要写在data里去操作
    1. class样式
      写法:class=“xxx” xxx可以是字符串、对象、数组。
      字符串写法适用于：类名不确定，要动态获取。
      对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
      数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
      2. style样式
      :style="{fontSize: xxx}“其中xxx是动态值。
      :style=”[a,b]"其中a、b是样式对象。

11.条件渲染

1.v-show和v-if都可以做条件渲染。
2. v-if和template配合使用

12.列表渲染

1.循环 v-for="(p,index) in person" :key=“index” eg: 索引在值得后面 in和of都可以用
2.对象，字符串，数组，指定次数 都可以遍历
3.旧虚拟dom会和新虚拟dom进行比较
4.面试题：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是没有问题的。

5.列表过滤

//用computed实现
	new Vue({
		el:'#root',
		data:{
			keyWord:'',
			persons:[
				{id:'001',name:'马冬梅',age:19,sex:'女'},
				{id:'002',name:'周冬雨',age:20,sex:'女'},
				{id:'003',name:'周杰伦',age:21,sex:'男'},
				{id:'004',name:'温兆伦',age:22,sex:'男'}
			]
		},
		computed:{
			filPerons(){
				return this.persons.filter((p)=>{
					return p.name.indexOf(this.keyWord) !== -1
				})
			}
		}
	})

6.列表排序

	new Vue({
		el:'#root',
		data:{
			keyWord:'',
			sortType:0, //0原顺序 1降序 2升序
			persons:[
				{id:'001',name:'马冬梅',age:30,sex:'女'},
				{id:'002',name:'周冬雨',age:31,sex:'女'},
				{id:'003',name:'周杰伦',age:18,sex:'男'},
				{id:'004',name:'温兆伦',age:19,sex:'男'}
			]
		},
		computed:{
			filPerons(){
				const arr = this.persons.filter((p)=>{
					return p.name.indexOf(this.keyWord) !== -1
				})
				//判断一下是否需要排序
				if(this.sortType){
					arr.sort((p1,p2)=>{
						return this.sortType === 1 ? p2.age-p1.age : p1.age-p2.age
					})
				}
				return arr
			}
		}
	})

7.更新时的一个问题，Vue监测数据改变的原型 ，模拟一个数据监测

1.数据代理 1.加工data(做到数据响应式) 2.vm._data

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<script type="text/javascript" >

			let data = {
				name:'尚硅谷',
				address:'北京',
			}

			//创建一个监视的实例对象，用于监视data中属性的变化
			const obs = new Observer(data)		
			console.log(obs)	

			//准备一个vm实例对象
			let vm = {}
			vm._data = data = obs

			function Observer(obj){
				//汇总对象中所有的属性形成一个数组
				const keys = Object.keys(obj)
				//遍历
				keys.forEach((k)=>{
					Object.defineProperty(this,k,{
						get(){
							return obj[k]
						},
						set(val){
							console.log(`${k}被改了，我要去解析模板，生成虚拟DOM.....我要开始忙了`)
							obj[k] = val
						}
					})
				})
			}
			
			


		</script>
	</body>
</html>

8.Vue set的使用

1.绑定一个没有的存在的属性，会返回undefined,但页面不会报错，会显示空白
2.数据没被代理，页面不做响应
3.Vue.set(vm._data.student,’'set,‘男’)简写为vm.$set(vm.sttudent,‘sex’,‘男’) 进而简写为this. $set

9.Vue监测数据改变的原理_数组

1.push pop shift unshift spilce(插值,删除,追加) sort reverse(反装)

10.总结

1.做了数据代理，就不需要写_data了。
Vue监视数据的原理：
1. vue会监视data中所有层次的数据。

			2. 如何监测对象中的数据？
							通过setter实现监视，且要在new Vue时就传入要监测的数据。
								(1).对象中后追加的属性，Vue默认不做响应式处理
								(2).如需给后添加的属性做响应式，请使用如下API：
												Vue.set(target，propertyName/index，value) 或 
												vm.$set(target，propertyName/index，value)

			3. 如何监测数组中的数据？
								通过包裹数组更新元素的方法实现，本质就是做了两件事：
									(1).调用原生对应的方法对数组进行更新。
									(2).重新解析模板，进而更新页面。

			4.在Vue修改数组中的某个元素一定要用如下方法：
						1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
						2.Vue.set() 或 vm.$set()
			
			特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

13.收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
				若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
				若：<input type="checkbox"/>
						1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
						2.配置input的value属性:
								(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
								(2)v-model的初始值是数组，那么收集的的就是value组成的数组
				备注：v-model的三个修饰符：
								lazy：失去焦点再收集数据
								number：输入字符串转为有效的数字
								trim：输入首尾空格过滤

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
				性别：
				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
				爱好：
				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
				<br/><br/>
				所属校区
				<select v-model="userInfo.city">
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>

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

		new Vue({
			el:'#root',
			data:{
				userInfo:{
					account:'',
					password:'',
					age:18,
					sex:'female',
					hobby:[],
					city:'beijing',
					other:'',
					agree:''
				}
			},
			methods: {
				demo(){
					console.log(JSON.stringify(this.userInfo))
				}
			}
		})
	</script>
</html>

14.过滤器

过滤器：
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = “xxx | 过滤器名”
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>过滤器</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/dayjs.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>显示格式化后的时间</h2>
			<!-- 计算属性实现 -->
			<h3>现在是：{{fmtTime}}</h3>
			<!-- methods实现 -->
			<h3>现在是：{{getFmtTime()}}</h3>
			<!-- 过滤器实现 -->
			<h3>现在是：{{time | timeFormater}}</h3>
			<!-- 过滤器实现（传参） -->
			<h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
			<h3 :x="msg | mySlice">尚硅谷</h3>
		</div>

		<div id="root2">
			<h2>{{msg | mySlice}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})
		
		new Vue({
			el:'#root',
			data:{
				time:1621561377603, //时间戳
				msg:'你好，尚硅谷'
			},
			computed: {
				fmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			methods: {
				getFmtTime(){
					return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
				}
			},
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
		})

		new Vue({
			el:'#root2',
			data:{
				msg:'hello,atguigu!'
			}
		})
	</script>
</html>

15.内置指令

  1. 我们学过的指令：
    v-bind : 单向绑定解析表达式, 可简写为 :xxx
    v-model : 双向数据绑定
    v-for : 遍历数组/对象/字符串
    v-on : 绑定事件监听, 可简写为@
    v-if : 条件渲染（动态控制节点是否存存在）
    v-else : 条件渲染（动态控制节点是否存存在）
    v-show : 条件渲染 (动态控制节点是否展示)
    v-text指令：
    1.作用：向其所在的节点中渲染文本内容。
    2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
    2.v-html指令：
    1.作用：向指定节点中渲染包含html结构的内容。
    2.与插值语法的区别：
    (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
    (2).v-html可以识别html结构。
    3.严重注意：v-html有安全性问题！！！！
    (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
    (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
    3.v-cloak
    v-cloak指令（没有值）：
    1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
    2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
    4.v-once
    v-once指令：
    1.v-once所在节点在初次动态渲染后，就视为静态内容了。
    2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
    5.v-pre
    v-pre指令：
    1.跳过其所在节点的编译过程。
    2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

16.自定义指令

1.可以利用directives
2.fbind直接写成函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
				需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
				自定义指令总结：
						一、定义语法：
									(1).局部指令：
												new Vue({															new Vue({
													directives:{指令名:配置对象}   或   		directives{指令名:回调函数}
												}) 																		})
									(2).全局指令：
													Vue.directive(指令名,配置对象) 或   Vue.directive(指令名,回调函数)

						二、配置对象中常用的3个回调：
									(1).bind：指令与元素成功绑定时调用。
									(2).inserted：指令所在元素被插入页面时调用。
									(3).update：指令所在模板结构被重新解析时调用。

						三、备注：
									1.指令定义时不加v-，但使用时要加v-；
									2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
			<hr/>
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false

		//定义全局指令
		/* Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) */

		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
				/* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					// console.log('big')
					element.innerText = binding.value * 10
				},
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value=binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
		
	</script>
</html>

17.生命周期

1.生命周期：
1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。
3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4.生命周期函数中的this指向是vm 或 组件实例对象。
2.分析生命周期

  1. beforCreate(）无法通过vm获取里面的data和methods的方法
  2. created(）可以通过vm获取里面的data和methods的方法
  3. beforeMount() 页面呈现的是未经Vue编译的Dom结构，所有对Dom操作，最终都不奏效
  4. mounted() 呈现的是经过Vue编译的Dom，对Dom操作均有效。一般进行（开启定时器，发送网络请求，订阅消息，绑定自定义事件等初始化操作）
  5. beforeUpdate() 此时数据是新的，页面是旧的
  6. updated() 数据是新的，页面是新的
  7. beforeDestroy() vm中所有的data，methods，指令等，都处于可用状态。执行销毁。一般进行（关闭定时器，关闭订阅消息，绑定自定义事件等初始化操作）
  8. destroyed() 结束

常用的生命周期钩子：
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。

	关于销毁Vue实例
			1.销毁后借助Vue开发者工具看不到任何信息。
			2.销毁后自定义事件会失效，但原生DOM事件依然有效。
			3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
一只泰迪熊
关注
Vue3通透教程【一】Vue3现状—必然趋势？
官方推荐
01-30 7万+
凉哥作为 Vue 的忠诚粉丝输出过大量的 Vue 文章，应粉丝要求开始更新 Vue3 的相关技术文章，Vue 框架目前的地位大家应该都晓得，所谓三大框架使用人数最多，公司选型最多的框架，凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因，和 Vue 框架相比其他框架的巨大优势，有兴趣的伙伴可以看一下Vue框架背后的故事。
图片预览vue-photo-preview
郭宝的博客
04-12 2291
vue-photo-preview它是基于photoswipe的vue图片预览插件。3、然后在img标签中添加preview和preview-text属性即可。preview-text 表示图片描述。2、在main.js中引入该组件。分组，不同组的照片对应的。
Vue2手动挂载组件$mount()学习
Amtai的博客
02-08 1173
Vue2手动挂载组件$mount()学习
浅谈Vue.$mount()使用以及原理
m0_37941483的博客
05-15 1万+
一、作用 Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。 具体代码如下： new Vue({ store, router }).$mount('#app') vue渲染机制流程图： 二、原理 1.$mount函数的流程: 首先，提取出el所对应的...
Vue基础语法
weixin_52498001的博客
02-16 128
Vue 基础语法
vue源码学习（4）vm.$mount()
tangkebo的博客
10-10 1680
1. vm.$mount的使用 vm.$mount的作用：手动地挂载一个未挂载的实例到元素上 vm.$mount官网示例 vm.$mount的源码 //原函数 // Vue.prototype.$mount = function ( // el, // hydrating // ) { // el = el && inBrowser ? query(el) : undefined; // return mountComponent(this, el, hydrating)
浅谈vue $mount()
热门推荐
驚鴻入梦
10-23 7万+
Vue 的$mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。new Vue时，el和$mount并没有本质上的不同。 具体见代码： 顺便附上vue渲染机制流程图：
记-vue vue.config.js 配置webpack全局变量
Chad97的博客
04-27 8346
缘起 vue-cli3 以来 是不会 暴露 webpack.config.js 的 需要我们手动来配置 因为近期 接手的一个项目 我需要从 package.josn 拿参数 然后 在其他 js文件拿到配置 大致步骤如下： 项目根目录 创建文件 vue.config.js 添加配置 =》 配置全局变量 其他js 拿到全局变量 配置大致和 webpack 差不多 for example...
Vue Vue常用的几种项目优化方法
SillyBoy的博客
07-16 6548
Vue项目优化 文章目录Vue项目优化1 代码层面的优化1 长列表性能优化2 事件的销毁3 图片懒加载4 路由懒加载5 按需加载插件2 Webpack层面的优化2.1 压缩图片2.2 提取公共代码2.3 模板预编译2.4 提取组件的 CSS2.5 优化 SourceMap2.6 构建结构输出分析2.7 Vue项目的编译优化3 基础的Web技术优化3.1 开启gzip压缩3.2 浏览器缓存3.3 CDN的使用3.4 Chrome Performance 查找性能瓶颈 Vue项目的优化一般分为代码层面、Web
vue vue-json-viewer 展示 JSON 格式数据
且听风吟的博客
04-12 5715
vue vue-json-viewer 展示 JSON 格式数据
Vue $mount的用法
Judy1623
07-19 3万+
$mount的用法 1.$mount方法是用来挂载我们的扩展的 做一个扩展，然后用$mount的方法把扩展挂载到dom上 var judy = Vue.extend({ template:'&lt;p&gt;{{message}}&lt;/p&gt;', data: function () { return{ ...
Vue数据驱动之(二)mount方法
MaRain
10-17 2817
Vue 是通过 $mount 实现挂载的 那么这个 $mount 都做了什么呢？ mount的定义是在 platform 里面web 文件下的 , Vue 本身的东西会在core里面 但是一旦和环境相关的 会在platform里面生成各种版本的 Vue文件 比如 weex环境下的 或者web 环境下的 ， 在weex下就没有这个mount的方法 所以 会在 platform下面 查看这个mount 的方法 这里的mount是将 原来公共的mount 赋值给const mount 然后重新定义了一个moun
Vue基础知识
sjsja的博客
05-30 1828
Vue基础，数据响应式原理，数据绑定等
学习vue源码（4） 手写vm.$mount方法
weixin_43964148的博客
06-01 867
一、概述 前面的文章 https://mp.weixin.qq.com/s?__biz=MzU5NDM5MDg1Mw==&tempkey=MTA2M19WeHNUZGZ1VHVqRzFZcjZ0S2l0U014cnFwVDRtVkdfQ2dsaTVrOGdEVVU5WjZIUzdnYWR2aklESmoyc3BRMUREanYtQldtMENFSlZQX1lpb091RW1mS3lNYnBGUlhhTzRNUGpUbmh2b3JZVDJoUm5KMlBxbVk5NTlaNVptWnJ2SUF1Z0.
vue的$mount 和直接指定el属性
蠢蠢欲动的猫
12-10 818
el的两种写法： 1）、直接在在new一个vue的时候，直接指定对应的id选择器 <div id="base"> <a :href="url"></a> </div> new vue({ el:"base", url:"httP://www.baidu.com" }) 2）、第二种写法，是调用$mount 解析：ue 的mount()为手动挂载，在项目中可用于延时挂载（例如在挂载之前要进行一些其他操作、判断等），之后要手动挂载上。
Vue 实例挂载方法($mount)的实现
未思
03-30 1万+
在 Vue 的 _init 方法中已经回调了beforeCreate 和created这两个生命周期钩子，在此之后就进行了实例的挂载 if (vm.$options.el) { // 挂载实例 vm.$mount(vm.$options.el); } 在挂载函数中，将要进行 beforeMount 和 mounted 的回调。 在不同的平台下对于 $mount 函数...
关于vue中的$mount(‘#app‘)
weixin_47169270的博客
08-24 3303
当我们用vue脚手架（vue-cli）创建vue项目时，会生成初始的基本文件，其中关于main.js中的KaTeX parse error: Expected 'EOF', got '#' at position 8: mount(’#̲app’) 这里创建的vue实…mount(’#app’)方法。 /* webpack打包入口文件 */ //导入vue构造函数 import Vue from 'vue' //导入根组件App.vue import App from './App.vue' //导入路
vue之$mount
weixin_30275415的博客
04-07 299
数据挂载 在实例化Vue的时候，两种方式挂载数据 方法一：最常用的方法 var app=new vue({ el:"#app", data(){} ````` }) 注：文档中最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素 方法二：$mount var app=new vue({ data(){} }) app.$...
vue绑定数字类型 value为数字
丸子酱
04-02 1万+
直接加: <el-select v-model="searchData.status" filterable placeholder="请选择" @change="gamefilter" class="mr40"> <el-option label="开启" :value='0'></el-option> &...
最新vue vue-router
最新发布
11-25
最新的Vue版本是Vue3，而最新的Vue Router版本是Vue Router 4.x及以上版本。如果你想在Node环境中使用Vue Router 4.x及以上版本，可以使用以下命令进行安装： ```shell npm install vue-router@4 ``` 如果你的项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值