目录
- vue框架 v-*的指令
- 大纲
- 斗篷指令（了解）
- 属性指令
- 事件补充
- 表单指令
- 条件指令
- 循环指令
- 面试题：todolist
- 小结
vue框架 v-*的指令
"""
1、简述vue框架的作用和优势
作用：开发前后台分离项目
优势：前后台分离(开发效率)、轻量级(开发效率)、中文API(学习成本)
框架的特点：数据驱动、虚拟DOM、单页面应用(很好适配移动端项目)、数据的双向绑定(监听机制)
2、列举出三个vue的指令，并简述每个指令的用法
v-text: v-text="变量"，类似{
{ 变量|基本类型|简单表达式 }} => 设置文本
v-html: 可以解析有html语法的文本 => 设置html文本
v-on: v-on:事件名="方法名" | v-on:事件名="方法名($event, ...)" => 设置事件
3、列举出至少三个vue实例成员，并简述每个实例成员的用法
el: id选择器，body html不能作为挂载点，只匹配一个
data：提供渲染的数据
methods：提供绑定的方法
delimiters：插值表达式标识符， ['{
{', '}}']
filters：提供自定义过滤器，过滤器可以同时过滤多个参数，还可以串联过滤器
let data = {}
new Vue({
'el': '#app',
data,
...
})
4、js补充
对象
类：class function
类属性：Vue.prototype.类属性
函数：let fn = () => {}
"""大纲
"""
1）指令
属性指令：v-bind
表达指令：v-model
条件指令：v-show v-if
循环指令：v-for
斗篷指令：v-cloak
2）实例成员
计算：computed
监听：watch
3）vue项目环境
"""斗篷指令（了解）
v-cloak：避免屏幕闪烁
"""
v-cloak：避免屏幕闪烁
1）属性选择器，会将v-cloak属性所在的标签隐藏
2）当vue环境加载后，会将v-cloak属性解析移除，所以内容{
{ num }}就会显示出来
3）而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到 页面从{
{ num }}闪烁成数值10 """
{
{ num }}
{
{ num }}
结果：
属性指令
属性指令：v-bind:属性名="变量"
"""
/** 属性指令
* 1）语法：v-bind:属性名="变量"
* 2）针对不同属性，使用方式稍微有一丢丢区别
* i）自定义属性以及title这些，直接赋值的，使用方式如下（t是变量，'o'是常量）
* 段落
* ii）class属性(重点):
* 绑定的变量：值可以为一个类名 "p1"，也可以为多个类名 "p1 p2"
* 绑定的数组：数组的每一个成员都是一个变量
* 绑定的字典：key就是类名，value是绝对该类名是否起作用
* iii）style属性(了解)：
* 绑定的变量：值是一个字典
*/
"""段落
案例
重点：事件指令与属性指令都可以简写
事件补充
伪类操作
事件处理
表单指令
v-model="变量"
"""
1）语法：v-model="变量"
2）v-model绑定的变量控制的其实就是value属性值
3）v-model要比v-bind:value要对一个监听机制
4）数据的双向绑定：
v-model可以将绑定的变量值映射给表单元素的value
v-model还可以将表单元素的新value映射给报道的变量
"""
代码：
表单指令
结果：
条件指令
v-show="变量" | v-if="变量"
"""
/**
* 1）语法：v-show="变量" | v-if="变量"
* 2）两者的区别：
* v-show在隐藏标签时，采用display:none渲染标签，标签通过css隐藏
* v-if在隐藏标签时，不会渲染在页面上
*
* 3）v-if有家族：v-if | v-else-if | v-else
* v-if是必须的，必须设置条件
* v-else-if可以为0~n个，必须设置条件
* v-else可以为0~1个
* 上方分支成立会屏蔽下方所有分支，从上至下依次类推
*/
"""
show控制显隐
if控制显隐
你是第1个p
你是第2个p
你是第3个p
结果：
案例
结果：
循环指令
v-for="ele in obj" 循环指令
"""
/**
* 1）语法：v-for="ele in obj" obj是被遍历的对象，ele是遍历得到的每一次结果
* 2）遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
* 字符串：v-for="v in str" | v-for="(v, i) in str"
* 数组：v-for="v in arr" | v-for="(v, i) in arr"
* 对象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
* 注：v-for遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
*/
"""
循环指令
{
{ d1 }}
【{
{ e }}】
{
{ d2 }}
【{
{ e }}】
【{
{ i }}{
{ e }}】
{
{ d3 }}
【{
{ e }}】
【{
{ i }}{
{ e }}】
{
{ d4 }}
【{
{ e }}】
【{
{ k }}-{
{ e }}】
【{
{ k }}-{
{ e }}-{
{ i }}】
结果：
商品循环案例
循环案例
![]()
{
{ obj.title }}
结果：
面试题：todolist
js的Array操作
"""
尾增：arr.push(ele)
首增：arr.unshift(ele)
尾删：arr.pop()
首删：arr.shift()
增删改插：arr.splice(begin_index, count, args)
"""
前台数据库
"""
// 存
// 持久化化存储，永远保存
localStorage.name = "Bob";
// 持久化化存储，生命周期同所属标签(页面)，页面关闭，重新打开就会丢失
sessionStorage.name = "Tom";
// 取
console.log(localStorage.name);
console.log(sessionStorage.name);
// 清空
localStorage.clear();
sessionStorage.clear();
// 短板：只能存储字符串，所有对象和数组需要转换为json类型字符串，再进行存储
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""
案例：留言板
- {
{ info }}
结果：
小结
"""
1、v-cloak斗篷指令
2、属性指令
v-bind:title="变量"
:class="变量" | :class="[变量1, ..., 变量n]" | :class="{类名: 布尔变量}"
:style="字典变量"
3、事件：@click @dblclick @mouseover|out|down|up
鼠标单击、双击、悬浮、移开、按下、抬起
4、表单指令：
v-model绑定变量控制value属性，可以实现双向绑定
5、条件指令：
v-show | v-if
v-if | v-else-if | v-else
6、循环指令：
字符串：v-for="v in str" | v-for="(v, i) in str"
数组：v-for="v in arr" | v-for="(v, i) in arr"
对象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"
7、Array操作
arr.push(ele) arr.unshift(ele)
arr.pop() arr.shift()
arr.splice(begin_index, count, args)
8、前台数据库
localStorage | sessionStorage
1）操作就类似于obj，直接 .key 语法访问 value
2）localStorage永久存储
3）sessionStorage生命周期同所属页面标签
"""