Vue2学习文档

已于 2024-04-23 17:43:44 修改
阅读量3.2k 收藏 1
点赞数 1
文章标签： 学习 vue.js javascript
于 2022-05-15 16:22:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41882944/article/details/124783806
版权

文章目录

1. Vue简介

P1 课程简介

空

P2 Vue技术

虚拟dom通过diff算法比较差异实现渲染复用

P3 官网指南

学习-Cookbook

提供编程技巧（让代码更优雅）

资源列表-Awesome Vue

官方推荐认可的Vue第三方库（如能用来制作一个报表）

P4 开发环境

引入Vue.js后，可以在浏览器-console中输入Vue.config查看Vue API(全局配置 )

image-20210812175148792

2. 简单例子

P5 Hello 案例

{{}}：Vue设计的插值语法（获取Vue实例-data里的值）

root容器里的代码被称为【Vue模板】

模板解析流程：

  1. 先有容器，然后有实例
  2. 实例拿到对应id容器
  3. 实例解析（看有没有设计的特殊语法）
  4. 把解析完后的Dom树导出替换容器

P6 分析Hello

容器和实例是一一对应的

<div  id='root'></div>
new Vue({
	el:'#root',
	……
})
},

‘{{}}’里必须写js表达式

3. 数据绑定

P7 模板语法

插值语法：解析标签体内容

<div>{{xxx}}</div>

指令语法：解析标签属性（属性、内容、事件）V-XXX

<a v-bind :herf='xxx'>点击</a>

P8 数据绑定

v-modal只能应用在表单类元素（输入类元素）上

P9 el和data两写法

  1. el

el:‘#root’ 和v.KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲root')效果相同（mount是vue实例原型构造器的方法）

  1. data
  • 对象式
data:{
	name:'xxx'
}
  • 函数式(以后用组件时必须用这种，对象式会报错)
data:function(){
	return{
		name:'xxx'
	}
}
//简写成(不能写箭头函数，不然this指向windows)
data(){
    return{
        name:'xxx'
    }
}

4. 数据代理(JS知识补充)

P10 MVVM

如图所示：

image-20210816162211103

代码：Vue实例把Data和View进行连接

image-20210816162354439

data里的数据最终出现在vm上，而模板{{}}或v-xxx可以从vm中获取属性值

<h1>{{$emit}}</h1>
//$emit是vm原型链上所有的属性

P11 defineProperty

为什么console.log()里面的属性不直接显示，原因：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iWiJHTsz-1652602773252)(Images/image-20210816165528539.png)]

给对象添加属性，具体语法如图：

第一个参数是对象名，第二个参数是属性名，然后是在defineProperty对属性的内置操作方法中写表达式

第三个参数中get()：有人读取属性时，放回属性值；set()：有人修改属性时，用改方法设置修改值

image-20210816164846993

P12 数据代理

image-20210816165124411

P13 Vue中的数据代理

vm._data === data

data(){
	return {
		data:'xxx'
	}
}
image-20210816170935288

但为什么vm._data===data呢？这个就不细讲了，只要知道是数据劫持即可

image-20210816171447521

5. 事件绑定

P14 事件处理

''里的模板只能用vm

注：所有vm里的方法有不要写成箭头函数，不然this指向windos

如何保持事件原有参数（用关键词传参）

image-20210816173101184

注：写在methods里的方法不会做数据代理，如果写在data中会多做一次数据代理

P15 修饰符

<a href='xxx' @click.prevent='showinfo'/>

prevent会组织默认事件，如阻止a的跳转

image-20210816180149558

不常用，具体细节看视频吧

P16 键盘事件

触发分为两种：@keyup和@keydown

image-20210816190237334

有几个按键比较特殊，具体看视频

P17 事件总结

修饰符可以连写，先后同时生效

<a href='xxx'@click.prevent.stop='xxx'/>

@click='xxx' === @click='xxx($event)'

6. 计算属性

P18 姓名案例

每次data改变，都会引起vue的重新渲染

所以如果使用方法替代计算属性的话，每次渲染都会return最新值

P19 计算属性

image-20210817113457202

computed有缓存机制，相对于methods来说更高效，这也是为什么要用计算属性的原因

get()只有当初始化和依赖数据发生改变时执行

computed不会像data和methods一样，直接绑定到vm上,所以{{fullName.get()}}会报错，Vue做了内部处理，{{fullName}}能默认调用get()

vm.fullname=xxx 则会调用fullname{}里的set()

P20 简写

只需要读取时可以使用简写

image-20210817114857649

7. 监视属性

P21 天气案例

注：如果页面内容没变，vm数据变了，开发者工具不一定更新（实际上是变了）

P22 监视属性

watch语法如下：

image-20210817140457768

key为被监控dataName，计算属性也能被监视，并提供一系列方法

也可以直接调用vm.$watch（），效果相同

image-20210817140642585

P23 深度监视

  • 监视多级结构的某个属性（完整写法.）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dtE6RBzD-1652602773254)(Images/image-20210817141421438.png)]

  • 监视多级结构的所有属性(设置deep值)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rS5fImuP-1652602773254)(Images/image-20210817141514247.png)]

P24 简写

和methods相同,只有"单纯"操作时,才能简写(不可添加deep等配置)

两种写法如下(和methods相似)

  • 构造
image-20210817143232238
  • 实例
image-20210817143316548

P25 对比(watch和computed)

一般来说能用computed的就用计算,不能的再用watch(因为官方也推荐计算,代码量少呀)

然后计算属性因为只依靠return返回值,所以不能进行一些异步操作(setTimeout),加了异步就return不到计算属性函数上

image-20210817145213346

详细区别如下: image-20210817144831970

8. 样式渲染

P26 Class绑定

code

<!-- 指定单个样式变量-字符 -->
<div class="basic" :class="mood">{{name}}</div> <!-- class和:class可以共存-->
<!-- 指定多个样式变量-数组 -->
<div :class="classArr">{{name}}</div>
<div :class="['atguigu1','atguigu2']">{{name}}</div> 
	<div class="atguigu1 atguigu2">{{name}}</div> 
	<!-- 同效-感觉这方式只是为了少写代码，没啥妙用 -->
<!-- 指定多个样式变量并控制是否使用-对象 -->
<div :class="classObj">{{name}}</div> 
	<div :class="{atguigu1:value}">{{name}}</div> 
	<!-- 同效-可用这个替代部分三元 -->
<script>
	const vm = new Vue({
		data:{ //这三种都可以写在！！行内-更简洁，如果样式比较多可以写在data中控制
			mood:'normal',
			classArr:['atguigu1','atguigu2'],
			classObj:{
				atguigu1:false,
				atguigu2:false,
			},
		},
	})
</script>
<style>
    .basic{
		width: 400px;
		height: 100px;
		border: 1px solid black;
	}
	.normal{
		background-color: skyblue;
	}
    .atguigu1{
		background-color: yellowgreen;
	}
	.atguigu2{
		font-size: 30px;
		text-shadow:2px 2px 10px red;
	}
</style>

p:实际上这两节的内容并不实用，因为很多情况下的业务是条件渲染样式，这里实际上是各种动态指定样式变量

old

三种写法(字符串\数组\对象)

image-20210817152830241

https://www.cnblogs.com/guangzhou11/p/11116378.html

实例博客

P27 Style绑定

code

<view  :style="{ fontSize:fs }"/> <!-- 内联写法-指定对象的属性变量-->
	<view  :style="{ fontSize:prop }"/> <!-- 同上-更简洁，不走data-->
<div class="basic" :style="styleObj">{{name}}</div> <!-- 指定对象变量-->
	<view  :style="{ fontSize:prop,color:prop2 }"/> <!-- 同上-更简洁,不走data-->
<div :style="styleArr">{{name}}</div><!--指定对象变量-使用数组 -->
	……
<script>
	const vm = new Vue({
		data:{
            fs:'xxx'
			styleObj:{
				fontSize: '40px',
				color:'red',
			},
			styleArr:[
				{
					fontSize: '40px',
					color:'blue',
				},
				{
					backgroundColor:'gray'
				}
			]
		},
	})
</script>

p:个人感觉这样写不优雅

实战

<view :style="styleObject"/>  //指定对象变量
<view  :style="{ height: meunHeight }"/> //指定对象的属性变量
computed: {
  //根据当前菜单状态动态设置菜单高度
  meunHeight() {
    let meunHeight;
    switch (this.$store.state.nowMeun) {
      case "PathSelect":
        meunHeight = "340rpx";
        break;
      case "StartNav":
        meunHeight = "126rpx";
        break;
    }
    return meunHeight; 
  },
  //根据当前菜单高度   
  styleObject() {
    let obj;
    obj = {  //这里和上面的data-styleObj差不多，只不过用computed来动态设置对象的属性
      height: `calc(100vh - ${this.meunHeight} - var(--window-bottom))`,
      fontSize: "13px",
    };
    return obj;
  },
},

old

有两种(对象和数组)

注:{}要写样式对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Stmd0S01-1652602773255)(Images/image-20210817153938296.png)]

ps:class和style总结

image-20210817153815729

P28 条件渲染

如图所示(v-show\v-if\v-else-if\template)

v-show控制的是dispaly，所以是高频率合适，这里写反了

image-20210817161457236

9. 列表渲染

P29 基本列表

数组\对象

image-20210817163509454 image-20210817163542918

其他:字符串\指定次数(用的少)

image-20210817163620722 image-20210817163731913

P30 Key作用与原理

具体分析见视频

文字总结:

image-20210817165644933

ps:如果没写key,Vue会自动帮我们使用:key=‘index’(所以只要不会破坏结构,就不用写key,减少代码量hh)

P31 过滤

Key: watch:{}中可以添加immediate:true属性使组件初始化时就调用一次监听

watch:{
	keyWorud:{
		immediate:true, //初始化调用
		handler(val){
			return xxx
		}
	}
}

这里时列表过滤的最优解-computed(通过输入框搜索展示列表内容)

具体还是看视频吧

image-20210817180621340

P32 列表顺序

如图,强大的计算属性功能哈

image-20210817192617972

10. 监视原理(JS补充)

P33 更新原理

下图的修改会失效,原因是内存变量确实改了,但是vue没监听到吼

image-20210817194844396

P34 Vue监听对象

这节是对对象的监视的分析，而不是基本类型

  • 错误写法

自己尝试写一个监视，但是会报错，说栈溢出（陷入死循环了）

image-20210818143035157

原因：上图如果有人读取name，则调用get()，但是get()中return 的是data.name，读取data.name有需要get(),所以会陷入嵌套死循环

image-20210818152422971
  • 模拟Vue底层写法
  1. 现在简单重现下vue底层方法实现（使用了一个构造函数）

构造函数就是通过defineproperty属性传入参数data，’拷贝‘data中所有属性，而且修改和读取时不会发生循环

image-20210818144856717 image-20210818151017097
  1. 所以上面的构造函数实例obs，console.log出来就是一个带有data所有属性的方法实例
image-20210818151155378
  1. 准备一个vm对象 ，复制obs
image-20210818151456223 image-20210818151553674
  1. 但是data还没变,然后来个连等（这样_data、data和obs就一样了）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2egK0uLA-1652602773256)(Images/image-20210818151646108.png)]

  1. 然后再defineproperty.set(){xxx}中添加操作就可以实现监听渲染了（不会像“错误写法”那样出现死循环）

    image-20210818152003821

PS:肯定又疑惑了，为什么构造的就不会像错误的那样出现死循环呢？

image-20210818152141814

⭐️个人感觉是构造的get()读取和set()的内容不是同一个东西（地址）

这里的this指的是构造函数Obeserver(obj)地址;

而obj是指传入的对象地址

image-20210818152500486

如上图是错误的，因为return 后面的内容会再次触发读取（主要就是看绿色是否是同一个对象属性）

  • Vue真实底层

我们没有做到的内容：修改更便捷（数据代理）、多层设置

1.image-202108181540559012.image-20210818154239621

P35 Vue.set()方法

常见错误

直接赋值student.sex不可行，原因如图-没有相关方法

image-20220113152959666

正文

<h2 v-if="student.sex">性别：{{student.sex}}</h2>
<h2 >姓名：{{student.name}}</h2>
	data:{
			student:{
				name:'tom', //没有sex属性
			}
	},			
    
   	methods: {
				addSex(){
					// Vue.set(this.student,'sex','男') //Vue.set和this.$set都可以
					this.$set(this.student,'sex','男')
				}
			}

官方文档

注意:对象不能是 Vue 实例，或者 Vue 实例的根数据对象-data。

补充

关于属性不存在报错问题

<h2 >性别：{{student.sex}}</h2> 
//这里不报错，因为如果属性为空的话是返回undefined，undefined在页面不显示

student:{
	name:'tom',
   	//sex:'男'
}

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

直接修改数组不可行

如图数组里是没有set()和get()

image-20220113163530312

直接改不可行

image-20220113163818955

vue对常见的数组方法封装,实现数组监听

如下图,两个方法不相同

image-20220113163203356

使用set()也可以-但是一般都直接用方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aXxFNrTX-1652602773257)(Images/image-20220113181824064.png)]

简写

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hm2mspAM-1652602773258)(Images/image-20220113163442213.png)]

相关官方文档

P37 总结Vue监视数据

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的根数据对象 添加属性！！！

//dom
<h1>学生信息</h1>
<button @click="student.age++">年龄+1岁</button> <br/>
<button @click="addSex">添加性别属性，默认值：男</button> <br/>
<button @click="student.sex = '未知' ">修改性别</button> <br/>
<button @click="addFriend">在列表首位添加一个朋友</button> <br/>
<button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br/>
<button @click="addHobby">添加一个爱好</button> <br/>
<button @click="updateHobby">修改第一个爱好为：开车</button> <br/>
<button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/>
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>

//data
student:{
	name:'tom',
	age:18,
	hobby:['抽烟','喝酒','烫头'],
	friends:[
		{name:'jerry',age:35},
		{name:'tony',age:36}
	]
}

//以下就是对于监视原理这章的总结
addSex(){
	// Vue.set(this.student,'sex','男')
	this.$set(this.student,'sex','男')
},
addFriend(){
	this.student.friends.unshift({name:'jack',age:70})
},
updateFirstFriendName(){
	this.student.friends[0].name = '张三'
},
addHobby(){
	this.student.hobby.push('学习')
},
updateHobby(){
	// this.student.hobby.splice(0,1,'开车')
	// Vue.set(this.student.hobby,0,'开车')
	this.$set(this.student.hobby,0,'开车')
},
removeSmoke(){
	this.student.hobby = this.student.hobby.filter((h)=>{
		return h !== '抽烟'
	})
}

10a.表单例子

P38 收集表单数据

收集表单数据：

​ 若：，则v-model收集的是value值，用户输入的就是value值。

​ 若：，则v-model收集的是value值，且要给标签配置value值

​ 若：

​ 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

​ 2.配置input的value属性

​ (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

​ (2)v-model的初始值是数组，那么收集的的就是value组成的数

​ 备注：v-model的三个修饰符：

​ lazy：失去焦点再收集数据

​ number：输入字符串转为有效的数字

​ trim：输入首尾空格过滤

<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/>
    <!-- number和.number保证输入的是数值-->
	性别：
	男<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>
    
data:{
	userInfo:{
		account:'',
		password:'',
		age:18,
		sex:'female',
		hobby:[],
		city:'beijing',
		other:'',
		agree:''
	}
},
methods: {
	demo(){
		console.log(JSON.stringify(this.userInfo)) //转换成json，发送请求
	}
}

11. 过滤器

P39 过滤器用法

如图

image-20210818163726114 image-20210818163745248 image-20210818163810815

全局（组件公用）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5C6pRPQn-1652602773258)(Images/image-20210818163835397.png)]

userInfo.other">


阅读并接受《用户协议》
提交

data:{
userInfo:{
account:‘’,
password:‘’,
age:18,
sex:‘female’,
hobby:[],
city:‘beijing’,
other:‘’,
agree:‘’
}
},
methods: {
demo(){
console.log(JSON.stringify(this.userInfo)) //转换成json，发送请求
}
}


## 11. 过滤器

### P39 过滤器用法

 如图

<img src="Images/image-20210818163726114.png" alt="image-20210818163726114" style="zoom:67%;" />

<img src="Images/image-20210818163745248.png" alt="image-20210818163745248" style="zoom:80%;" />

<img src="Images/image-20210818163810815.png" alt="image-20210818163810815" style="zoom:80%;" />

全局（组件公用）

[外链图片转存中...(img-5C6pRPQn-1652602773258)]
qq_41882944
关注
vue2.0中文离线官网文档（手册，教程，api）
06-29
vue.js2.0中文文档离线版是一款十分实用的使用教程，专门详细地介绍了vue.js，从基础、进阶和迁移三大方面进行讲述，能够让用户由浅入深，逐渐了解和掌握相关知识，有需要的朋友不妨来下载！
Vue2学习文档2
qq_41882944的博客
05-15 1651
文章目录12. 内置指令P40 v-textP41 v-htmlP42 v-cloakP43 v-onceP44 v-pre12a.自定义指令P45 函数式P46 对象式P47 总结13. 生命周期P48 周期介绍P49 挂载流程P50 更新流程P51 销毁流程P52 总结14. 组件P53 对组件的理解P54 非单文件组件P55 组件注意点P56 组件嵌套P57 VueComponentP58 Vue实例与组件实例P59 内置关系（js补充）P60 单文件组件15. 脚手架P61 创建脚手架P62 分析
VueJS2 高级教程（一）
最新发布
龙哥盟
08-21 958
我将添加两个特性来完成示例应用。第一个特性是能够删除已完成的待办任务，这一点很重要，因为它们会被永久保存。第二个特性是当没有待办事项时显示一条消息。我将这两个特性都添加到了App组件中，如清单 1-19 所示。
vue2的文档
qq_40011574的博客
09-25 4786
vue2
vue2.0官方文档学习（介绍、Vue实例、模板语法、计算属性和监听器）
热门推荐
叶子树的博客
11-14 1万+
安装 vue安装方式 // 使用script直接引入 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> // 使用npm安装 npm install vue vue3.0创建项目 vue create hello-world vue2.0创建一个项目 npm install -g @vue/cli-init // `vue init` 的运行效果将会跟 `vue-cli
vue2学习文档
zsy1833579605的博客
05-29 2248
vue2的基础语法及相关插件使用
手把手带你读vue2文档（基础篇总结）
ceike的博客
05-29 1341
template是常规组件化这里的案例涉及到解耦，一下子不理解案例可以往后看。 包含声明式渲染 v-bind v-if条件与循环 name命名 学会log打印 一些js方法 双向绑定v-model和v-bind 那么请实现一个复选框吧 自定义标签模板 vue2实例 数据与方法 你提到vue有两种数据和方法，js是不是只有一种 vue2自带的实例和方法 vue2$会和jQuery冲突d的问题 vue2中被人吐槽的this（vue3已改进） 箭头函数和普通函数中的this 生命等
Vue2离线文档.rar
03-27
"Vue2离线文档.rar" 提供的是Vue 2的离线版本，非常适合在没有网络连接的情况下学习和查阅Vue 2的相关知识。 Vue 2 的核心特性包括但不限于以下几点： 1. **声明式渲染**：Vue 使用模板语法，允许开发者声明式地...
vue-router官网文档学习
04-11
vue-router官网文档学习
Vue.js学习文档
06-12
### Vue.js 学习文档知识点总结 #### 一、Vue.js 概览 - **起源与发展**： - **起源**：Vue.js 最初由尤雨溪（Evan You）在2013年底作为个人实验项目开始开发。 - **公开发布**：2014年2月正式公开发布。 - **...
vue学习文档.pdf
12-10
在学习过程中，通常会包括创建一个新项目、设置项目的基本结构、学习如何安装 Vue.js 和使用其基本指令。学习的目的是让开发者能够快速上手并开始构建响应式的 web 应用。 Vue.js 的学习过程中，开发者需要了解如何...
Vue3pdf中文文档
06-06
- 学习并理解Composition API，这是Vue3的核心改进之一。 - 了解并利用Vue3的新特性和优化，提高开发效率和项目性能。 总的来说，Vue3作为新一代的Vue.js框架，提供了诸多增强和改进，为开发者带来了更好的开发...
【Vue】Vue2官方文档学习指南--20230223
Season CSDN博客
02-23 1569
【Vue】Vue2官方文档学习指南
6.Vue计算属性（computed）和侦听器（watch）
相互学习 共同进步
05-16 495
Vue计算属性（computed）和侦听器（watch） 计算属性（computed） 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以不推荐在“{{ … }}”中放入太多逻辑 <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个表达式中模板不再是简单的声明式逻辑。对于任何复杂逻辑，应当使用计算属性 什么是计算机属性？ 计算机
Vue2.0 官方文档学习笔记
weixin_30444105的博客
04-15 560
VUE2.0官方文档 基础部分： 1.VUE简介 　　Vue是一个基于MVVM的框架，其中M代表数据处理层，V代表视图层即我们在Vue组件中的html部分，VM即M和V的结合层，处理M层相应的逻辑数据，在V层实现渲染。Vue让我们把精力更多的放在VM层上，即更多的关注业务逻辑，把DOM操作交给系统。 　　1）声明式渲染：在vue实例对象中进行数据声明，在V层响应式的进行DOM渲染。 ...
Vue官网2文档笔记
qq_42694495的博客
03-18 1740
文章目录$event$onClass 与 Style 绑定对象语法列表渲染v-for 中使用对象事件处理事件修饰符插槽具名插槽解构插槽 prop动态组件&异步组件访问元素&组件访问根元素处理边界情况访问子组件&子元素处理边界情况依赖注入程序化事件监听器组件之间的循环引用模板定义的替代品过渡&动画可复用性$组合混入 mixin选项合并全局混入自定义函数钩子函数渲染函数&JSX基础使用JS代替模板功能事件&按键修饰符插槽JSX函数式组件 官网Vue2文档笔记 文
vue2篇
du_aitiantian的博客
12-21 420
vue，vue2，前端，前端框架，面试
vue2文档\vue3文档内网搭建、私有部署
莫安逸无风雪
07-02 754
vue2文档搭建流程，vue3文档搭建流程
Vue 2.0——数据与方法(官方文档解读)
专注写bug
06-30 1184
以官方文档给出说明和案例为基础，进行自我学习和理解的扩充。在官方文档中，针对数据的响应式渲染，有这么一段描述：这句话从字面意思上说的很绕，但是如果换一种思维方式来看这段描述内容就会豁然开朗。以的开发思维来看这个问题。 在使用VUE时，必须先构建VUE的实例对象，也就是需要采取的方式。 既然是对象，那么这个对象中可能存在某些属性，恰好目前我们所能熟知的有两大属性：和。那么，此时的Vue对象，根据Java类的结构，可以大致理解为下面的类结构： 响应测试 有了上面的理解，接下来按照官方文档中给出的案例，进行数据的
vue2中文文档离线
09-30
Vue.js是一款流行的JavaScript框架，为了方便开发者学习和使用，Vue官方提供了详细的中文文档。针对Vue2版本，我们可以通过以下方式实现离线查看中文文档。 1. 下载中文文档：在Vue官方GitHub仓库中，可以找到对应Vue2版本的中文文档。我们可以通过`git clone`命令将文档仓库克隆到本地，或者直接下载该仓库的zip文件。这样我们就得到了Vue2中文文档的离线版本。 2. 使用本地服务器：将克隆或下载的文档部署到本地服务器，例如使用Node.js的`http-server`模块。首先，安装Node.js，然后在命令行中运行`npm install -g http-server`命令安装全局http-server模块。接下来，通过命令行进入文档所在的文件夹，运行`http-server`命令启动服务器。这样我们就可以通过浏览器访问`localhost`来查看离线版的Vue2中文文档。 3. 使用浏览器插件：Vue中文文档官网提供了一个浏览器插件Vue Devtools，其中包含了Vue2中文文档的离线版本。我们可以在浏览器的插件商店（如Chrome Web Store）中，搜索并下载Vue Devtools插件。安装完成后，打开浏览器插件界面，选择“文档”，即可离线查看Vue2中文文档。 这些方法都可以实现Vue2中文文档的离线查看，方便我们随时学习和使用Vue.js框架。无论是开发者新手还是有经验的开发者，都可以通过离线文档快速学习和查询Vue.js的相关知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值