谷粒学院day03

es6

1 let
2 常量

3 解构模板 和 声明对象

数组解构,对象解构
使用 {} 定义对象. 可以使用 let {name,age} = user 对象进行解构

4 对象简写
… …
5 箭头函数

6 vue 入门

1 插值表达式

2 抽取代码片段: 主要是 vscode 的功能 用于快速生成代码

1 这里演示的是vscode 中的代码片段

2 使用

Vue指令

基本指令: 以 v- 开头的指令
单向
v-bind 单向数据绑定. 一般用于标签属性的使用

简写:

双向
v-model: 双向数据绑定

绑定事件
v-on:事件名称=“function(){}”
v-on:click=“function(){}”
可以使用v-on: 任意事件
进行操作
简写: @click=“function(){}”

修饰符

指的是 一个指令应该以特殊的方式绑定
例如:

这里的提交事件,需要在 v-on:submit 后面跟上 .prevent. .prevent 告诉 vue ,这里阻止 表单的默认提交事件:
event.preventDefault().
使用自己的提交时间进行提交

条件 循环指令
v-if,v-else,v-else-if
v-for

组件

全局组件
将 组件单独写在一个JS文件中

使用

局部组件

Vue 路由

1 引入 vue-router.min.js 文件
2 组成部分
由 router-link 和 router-view 组成
router-link 来导航.目标的地址
router-view 将 router-link 匹配到的组件渲染,显示
3 使用
1 定义路由组件

2 定义路由,映射组件.每个组件给一个路径

3 创建 router 实例.

	const router = new VueRouter({
		routes: router
	})

4 将路由挂载到 Vue 实例对象上

7 对象扩展运算符

...: 三个点,对对象进行拷贝和 合并
拷贝

合并

8 模板字符串

在模板字符串中使用 表达式获取变量的值

在模板字符串中调用函数

9 方法简写

 // 传统
 const per = {
 	sayHi:function(){}
 }
 per.sayHi()
 // ES6:
 const per2 = {
	sayHi(){
		// to do 
	}
 }