Vue复习笔记

祭夜醉美

已于 2022-05-09 19:57:26 修改

阅读量553

点赞数 1

分类专栏： # Vue 文章标签： vue.js javascript 前端

于 2022-05-04 23:31:32 首次发布

本文链接：https://blog.csdn.net/qq_44665456/article/details/124575619

版权

Vue 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

第1章 Vue核心

1.1、Vue 是什么？

一套用于构建用户界面的渐进式 JavaScript 框架
2、谁开发的

尤玉溪
3、Vue的特点
采用组件化模式，提高代码复用率，且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
4、学习Vue 之前要掌握的JavaScript 基础知识
ES6 语法规范
ES6 模块化
包管理器
原型、原型链
数组常用方法
axios
promise
…

1.2、初始Vue

在这里插入图片描述

总结：
1、想让Vue 工作，就必须创建一个Vue 实例，且要传入一个配置对象
2、root 容器里的代码依然符合html 规范，只不过混入了一些特殊的 Vue 语法
3、root 容器里的代码被称为【Vue模板】

<head>
<meat charset = "UTF-8" />
<title> 初始Vue</titele>
<!--引入Vue-->
<script type = "text/javascript" src = "../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id = "root">
	<h1>Hlello.{{name}}</h1>
</div>
<script type = "text/javascript">
	Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
	// 创建vue 实例
	new Vue({
		// el用于指定当前 Vue 实例为哪个容器服务，值通常为 css 选择器字符串
		el:#root;
		data:{
			// data 中用于存储数据，数据供el 所指定的容器去使用，值我们暂时先写成一个对象
			name:"你好"
		}
	})

</script>
</body>

1.3 模板语法

<head>
<meat charset = "UTF-8" />
<title> 模板语法</titele>
<!--引入Vue-->
<script type = "text/javascript" src = "../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id = "root">
	<h1>插值语法</h1>
	<h3>你好，{{name}}</h3>
	<hr/>
	<h1>指令语法</h1>
	<a v-bind:href ="www.baidu,com" x= "hello">点我去{{school.name}}学习1</a>
	<a :href="school.url" x="hello">点我去{{school.name}}学习2</div>
<script type = "text/javascript">
	Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
	// 创建vue 实例
	new Vue({
	
		el:#root;
		data:{
			name:"jack",
			school:{
				name:"lili",
				url:"www.baidu.com"
			}
		}
	})

</script>
</body>

1.4 数据绑定
在这里插入图片描述

<head>
<meat charset = "UTF-8" />
<title> 数据绑定</titele>
<!--引入Vue-->
<script type = "text/javascript" src = "../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id = "root">
	// 普通写法
	单项数据绑定：<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>
	
	// 如下代码是错误的，因为 v-model 只能应用在表单类元素（输入类元素上）
	<h2 v-model:x = "name">你好啊</h2>
</div>
<script type = "text/javascript">
	Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
	// 创建vue 实例
	new Vue({
		el:#root;
		data:{
			name:"你好"
		}
	})

</script>
</body>

1.5 el 和 data 的两种写法

<head>
<meat charset = "UTF-8" />
<title>el 和 date 的两种写法</titele>
<!--引入Vue-->
<script type = "text/javascript" src = "../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id = "root">
	<h1>Hlello.{{name}}</h1>
</div>
<script type = "text/javascript">
	Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示

// el 的两种写法
const v= new Vue({
	// el:"#root",   // 第一种写法
	data:{
		name:"jack"
	}
})

console.log(v)
v.$mount('#root') // 第二中写法

// data 的两种写法	
new Vue({
		el:#root;
		data:{
		// data 的第一种写法：对象式
			name:"你好"
		}
		// data 的第二种写法：函数式
		data:function(){
			return{
			name:'jack'
			}
		}
	})

</script>
</body>

1.6 MVVM 模型

MVVM模型：

M：模型（Model）:data 中的数据
V: 视图（View）: 模板代码
VM：视图模型（ViewModel）: vue 实例
观察发现：
1、data 中的所有的属性，最后都出现在了vm 身上，
2、vm 身上所有的属性，及 Vue 原型上的所有属性，在 Vue 模板上都可以直接使用

1.7 数据代理

<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
		}
	})
</scirpt>

</body>

在这里插入图片描述
总结：

Vue 中的数据代理：通过vm 对象来代理 data 对象中属性的操作（读/写）
Vue 中数据代理的好处：更加方便的操作data中的数据
基本原理
通过Object.defineProperty() 把 data对象中所有属性添加到vm上
为每一个添加到vm 上的属性，都指定一个 getter/setter
在getter/setter 内部去操作（读、写） data中对应的数据

祭夜醉美

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue复习笔记

第1章 Vue核心1.1、Vue 是什么？一套用于构建用户界面的渐进式 JavaScript 框架2、谁开发的尤玉溪3、Vue的特点采用组件化模式，提高代码复用率，且让代码更好维护声明式编码，让编码人员无需直接操作DOM，提高开发效率使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。4、学习Vue 之前要掌握的JavaScript 基础知识ES6 语法规范ES6 模块化包管理器原型、原型链数组常用方法axiospromise…1.2、初始Vue总结：1、想
复制链接

扫一扫