本期内容
☆ Vue 基础语法
☆ 组件
参考视频:https://www.imooc.com/learn/980
本期内容根据该视频中的内容制作笔记整理,如侵删
目录
七、用 Vue-Cli 生成的 Vue 项目与原生 Vue 的差别
一、Vue 实例
- new 一个 vue 实例对象,通过 el 进行绑定,之后便可在 vue 对象中对该实例进行操作
- 把 script 文件放到 head 中而非 body 中可以防止页面抖屏
- 在挂载点中加入 template 模板
二、数据 & 方法绑定
- 数据绑定
- {{...}}插值表达式
- v-text="...":参数为变量,在实例中声明变量的值,显示为纯文本
- v-html="...":参数为变量,可将内容解析成 html 标签后显示
- 方法绑定
v-on:click="()=>{alert(123))}})" // 会报错
v-on:click="handleClick" // 正确
@click="handleClick" // 简写
- 改变数据
三、属性绑定 & 双向数据绑定
- 属性绑定
v-bind:...
v-bind:title="title" // 例子
:title="title" // v-bind 简写
- 双向绑定(如:input,input 改变页面上数据,页面数据显示 input 的输入内容)
v-model="..."
v-model="content" // 例子
四、计算属性 & 侦听器
- 计算属性(如:firstName、lastName,通过字符串相加,显示 fullName)
如果值未改变,computed 中的值会使用上一次的缓存值
// 计算属性结构
computed:{
fullName:(){
...
}
}
- 侦听器(如:侦听更改 fullName 的次数)
// 侦听器结构
watch:{
firstName:(){
...
}
}
1. 侦听 data中的属性 变化
2. 侦听 计算属性 变化
五、v-if & v-show & v-for & key
属性名 |
特点 |
性能 |
v-if |
取值 false 时,直接移除 |
频率小时,性能更好 |
v-show |
取值 false 时,隐藏不移除 |
切换频率大时性能好,避免频繁删除和重构,相当于 display:none |
- v-if
- v-show
- v-for:用 list 循环读取 item 中的值并展示
- key:提升循环性能,指定唯一索引,key 值不能相同
- 如果 item 值不相同,key 可以取值为 item
- 如果 item 值相同,则增加索引来确定 key 的唯一
六、TodoList 简单控件
- 设置空值、输入框和循环
- 编写 click 事件,将输入值传入到 list 中
- 效果图
- 将以上列表注册成模板 template
- 全局组件:Vue.component
- 局部组件:注册一个对象,内含模板。需在 Vue 对象中声明才可使用
- 父->子组件传参
- 删除 TodoList(本例中,父组件为:list,子组件为:list 下的 <li>)
七、用 Vue-Cli 生成的 Vue 项目与原生 Vue 的差别
- data 的表示
- 原生 Vue
- Vue-Cli 创建
- 使用 ES6 语法简化
- methods 的表示
- 原生
- vue-cli
- Vue-Cli 中组件的创建