Vue复习笔记

第1章 Vue核心

1.1、Vue 是什么?

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

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

1.2、初始Vue

Vue复习笔记_第1张图片

总结:
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 模板语法

Vue复习笔记_第2张图片

<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 数据绑定
Vue复习笔记_第3张图片

<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模型:

  1. M:模型(Model):data 中的数据
  2. V: 视图(View): 模板代码
  3. 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复习笔记_第4张图片
总结:

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

你可能感兴趣的:(#,Vue,vue.js,javascript,前端)