vue官方教程笔记(基础篇)

基础部分

介绍

声明式渲染

{ {}}

条件与循环

v-if / v-for

处理用户输入

v-on

组件化应用构建

vue实例

简单介绍了一个vue实例有哪些元素组成

完整的组成元素API文档

API文档

创建vue实例

数据与方法

1. data对象中的所有的 property 被加入到 Vue 的响应式系统中。
2. 只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
3. Object.freeze()加入其中，响应系统无法再追踪变化（不再响应式）
4. 实例属性与方法参考API文档

生命周期钩子

1. 定义：每个 Vue 实例在被创建时都要经过一系列的初始化过程运行的一些函数。
   用户可以在不同阶段添加自己的代码。
2. 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
3. 不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a’, newValue => this.myMethod())。
   因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止
   经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
4. 生命周期钩子函数
   beforeCreated
   created
   beforeMount
   mounted
   beforeUpdate
   updated
   beforeDestroy
   destroyed

模板语法

插值

文本

1. “Mustache”语法 (双大括号) 的文本插值：{ {}}
2. 一次性地插值，当数据改变时，插值处的内容不会更新：v-once

原始HTML

1. v-html

Attribute

1. 属性变量：v-bind

使用JavaScript表达式

1. 双大括号,v-bind内可以写单个表达式

指令

参数

1. v-bind 响应式更新 HTML attribute
2. v-on 监听dom事件

动态参数

1. 2.6.0新增 代码如下

修饰符

1. .prevent

缩写(语法糖)

1. v-bind: -> :
2. v-on: -> @

	// 动态参数
	
	// 如果attributeName为herf 相当于:href="url"
	<a v-bind:[attributeName]="url"></a>
	
	// eventName可以为click,focus等 相当于@click="doSomething"
	<a v-on:[eventName]="doSomething"></a>

	// 1. 动态参数为null时，可以被显性地用于移除绑定。
	// 2. **非字符串类型** 某些字符，如**空格和引号** 无效并触发警告
	// 3. 可以使用计算属性代替复杂的表达式
	// 4. 避免使用大些字符

计算属性和侦听器

计算属性

1. 基础例子

	<p>{
  {reversedMessage}}}</p>

	computed: {
		reversedMessage: function() {
			return this.xxx.join('')
		}
	}

2. 计算属性缓存vs方法
   计算属性是基于它们的响应式依赖进行缓存的有缓存，减小开销
3. 计算属性vs侦听属性

	computed: {
   
		fullName: {
   
			get: function () {
   
				return this.firstName + ' ' + this.lastName
			},
			set: fucntion (newValue) {
   
				var names = newValue.split(' ')
				this.firstName = names[0]
				this.lastName = names[names.length - 1]
			}
		}
	}

侦听器

1. 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

	<div id="watch-example">
		<p>
			Ask a yes/no question:
			<input v-model="question">
		</p>
		<p>{
  { answer }}</p>
	</div>

	// 执行异步操作（访问API）设置中间状态
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
	
	var watchExampleVM = new Vue({
   
		el:</