今日目标:

能够理解vue的概念和作用
能够理解vuecli脚手架工程化开发
能够使用vue指令

学习内容：

学习目录:

Vue基本概念
@vue/cli脚手架
Vue指令
今日总结
面试题

铺垫

必安装 - vue-devtools

学习, 调试vue必备之利器 - 官方提供的呦
如果实在打不开谷歌商店, 换个网
不要图标上带橘黄色beta的

vscode-插件补充

vue文件代码高亮插件-vscode中安装

Vetur

代码提示插件-vscode中安装

VueHelper

知识点自测

表达式, 变量是什么
变量是一个容器, 表达式原地都有返回结果

var a = 10;
console.log(a); // a就是变量, 运行后使用变量里的值再原地打印
console.log(10 + 50); // 10 + 50 就是表达式
console.log(a > 9); // 这叫判断表达式, 原地结果是true

new的作用和含义
new 类名() - 原地得到一个实例对象 - 对象身上有key(或叫属性, 叫键都行), 对应的值是我们要使用的
实例化对象
实例化对象就是new 类名() 创造出来的对象, 身上包含属性(key, 键) 对应的值
什么是对象上的, 属性和方法

let obj = { // 属性指的是a, b, c, d, e这些名字a: 10,b: [1, 2, 3],c: function(){},d () {},e: () => {} // 值是冒号:右边的值
}
// 这个格式是固定的, 必须张口就来, 张手就写, 准确率100%

对象的赋值和取值
有=(赋值运算符) 就是赋值, 没有就是取值

let obj = {a: 10,b: 20
}
console.log(obj.a); // 从obj对象的a上取值, 原地打印10
obj.b = 100; // 有=, 固定把右侧的值赋予给左侧的键, 再打印obj这个对象, b的值是100了

this的指向

this指向口诀:

在function函数中, this默认指向当前函数的调用者调用者.函数名()
在箭头函数中, this指向外层"函数"作用域this的值

1. Vue基本概念

1.0_为何学Vue

目标: 更少的时间，干更多的活，开发网站速度快

例如: 把数组数据-循环铺设到li中, 看看分别如何做的?

原生js做法:

<ul id="myUl"></ul>
<script>let arr = ["春天", "夏天", "秋天", "冬天"];let myUl = document.getElementById("myUl");for (let i = 0; i < arr.length; i++) {let theLi = document.createElement("li");theLi.innerHTML = arr[i];myUl.appendChild(theLi);}
</script>

Vue.js做法:

<li v-for="item in arr">{{item}}</li>
<script>new Vue({// ...data: {arr: ["春天", "夏天", "秋天", "冬天"] }})
</script>

注意: 虽然vue写起来很爽, 但是一定不要忘记, vue的底层还是原生js

开发更加的效率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

现在很多项目都是用vue开发的

我们为什么学习Vue？

开发更快速，更高效
企业开发都在使用
前端工程师必备技能，高薪

1.1_Vue是什么

渐进式JavaScript框架, 一套拥有自己规则的语法
官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)

什么是渐进式

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用
Vue渐进式: Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个vue回过头来看, 会很有帮助
理解：
- Vue提供了一系列的技术，我们可以选择一个或多个，甚至使用全部，这就是渐进式
- 就是说，可以渐渐的，一点一点的去使用这个框架

什么是库和框架

库: 封装的属性或方法 (例jquery.js)（小工具）
框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)（大工具）
Vue是什么？
Vue是一个JavaScript渐进式框架
什么是渐进式？
渐进式就是按需逐渐集成功能
什么是库和框架？
库是方法的集合，而框架是一套拥有自己规则的语法

1.2_Vue学习的方式

传统开发模式：基于html/css/js文件开发vue
工程化开发方式：在webpack环境中开发vue，这是最推荐, 企业常用的方式

2. @vue/cli脚手架

2.0_@vue/cli 脚手架介绍

目标: webpack自己配置环境很麻烦, 下载@vue/cli包,用vue命令创建脚手架项目

@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
脚手架是为了保证各施工过程顺利进行而搭设的工作平台
PS：cli：command-line interface ，命令行界面
理解：vue/cli脚手架提供了很多命令，可以让我们快速创建，管理项目

@vue/cli的好处

开箱即用
0配置webpack
babel支持
css, less支持
开发服务器支持

用Vue开发项目，需要自己配置webpack？
不需要，Vue官方提供了@vue/cli包，可以快速搭建项目基本开发环境
使用脚手架的好处是什么？
零配置，开箱即用，基于它快速搭建项目基本开发环境

2.1_@vue/cli安装

目标: 把@vue/cli模块包按到全局, 电脑拥有vue命令, 才能创建脚手架工程

全局安装命令

yarn global add @vue/cli #global 全局的
# OR
npm install -g @vue/cli

查看vue脚手架版本

vue -V

总结: 如果出现版本号就安装成功, 否则失败

如何安装全局包？
yarn global add 包名或 npm i -g 包名
我们会得到什么？
全局包会在计算机中配置全局命令（例：nodemon、vue命令）
安装完@vue/cli，会得到一个vue命令

2.2_@vue/cli 创建项目启动服务

目标: 使用vue命令, 创建脚手架项目

注意: 项目名不能带大写字母, 中文和特殊符号

创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo
# create：创建

进入脚手架项目下, 启动内置的热更新本地服务器

cd vuecil-demonpm run serve
# 或
yarn serve

总结: vue命令创建工程目录, 项目内置webpack本地热更新服务器, 帮我们打包项目预览项目

如何创建一个开箱即用的脚手架项目？
vue create 项目名
如何在网页上浏览这个项目？
yarn serve 启动本地热更新开发服务器

2.3 @vue/cli 目录和代码分析

目标: 讲解重点文件夹, 文件的作用, 以及文件里代码的意思

 vuecil-demo        # 项目目录├── node_modules # 项目依赖的第三方包├── public       # 静态文件目录├── favicon.ico# 浏览器小图标└── index.html # 单页面的html文件(网页浏览的是它)├── src          # 业务文件夹├── assets     # 静态资源└── logo.png # vue的logo图片├── components # 组件目录└── HelloWorld.vue # 欢迎页面vue代码文件 ├── App.vue    # 整个应用的根组件└── main.js    # 入口js文件├── .gitignore   # git提交忽略配置├── babel.config.js  # babel配置├── package.json  # 依赖包列表├── README.md    # 项目说明└── yarn.lock    # 项目包版本锁定和缓存地址

主要文件及含义

node_modules下都是下载的第三方包
public/index.html – 浏览器运行的网页
src/main.js – webpack打包的入口文件
src/App.vue – vue项目入口页面
package.json – 依赖包列表文件

PS：assets与public都是存放静态资源的目录，区别是啥？

assets的资源会被压缩，打包
public的资源不会压缩，打包，直接原封不动的放入dist打包目录

脚手架里主要文件和作用？

node_modules - 都是下载的包
public/index.html - 浏览器运行的网页
src/main.js - webpack打包的入口
src/App.vue - Vue页面入口
package.json - 项目描述文件

main.js和App.vue以及index.html作用和关系？

main.js - 项目打包入口 - Vue初始化
App.vue - Vue页面入口
index.html - 浏览器运行的文件
App.vue => main.js => index.html

2.4_@vue/cli 自定义配置

目标：项目中没有webpack.config.js文件，因为@vue/cli用的vue.config.js

问题：如果不想要默认端口8080，想要3000，怎么办？
src并列处新建vue.config.js, 填入配置, 重启webpack开发服务器

/* 覆盖webpack的配置 */
module.exports = {devServer: { // 自定义服务配置open: true, // 自动打开浏览器port: 3000  // 端口}
}

脚手架项目配置文件是什么？

项目根目录下的vue.config.js配置文件

eslint是什么？

eslint是代码检查工具，违反规定就报错

如何暂时关闭？

在vue.config.js中设置lintOnSave为false重启服务器即可

2.5_@vue/cli 单vue文件讲解

目标: 单vue文件好处, 独立作用域互不影响

Vue推荐采用.vue文件来开发项目
template里只能有一个根标签
vue文件–独立模块–作用域互不影响
style配合scoped属性 , 保证样式只针对当前template内标签生效
vue文件配合webpack , 把他们打包起来插入到index.html

最终: Vue文件配合webpack, 把他们打包起来插入到index.html, 然后在浏览器运行

单vue文件的好处？

独立作用域，不再担心变量重名问题

单vue文件使用注意事项？

template里只能有一个根标签（节点）

欢迎界面是哪些？如何清除？

assets下图片和components下的文件，App.vue初始代码
删除即可，但是要留下Vue项目入口页面App.vue文件

3. Vue指令

3.0_vue基础-插值表达式

目的: 在dom标签中, 直接插入内容

又叫: 声明式渲染/文本插值 mustache语法
插值表达式：插入数值的表达式
语法: {{ 表达式 }}
代码：

<template><div><h1>{{ msg }}</h1> //可以是变量<h2>{{ obj.name }}</h2> //可以是对象.属性<h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3>  //可以是表达式</div>
</template><script>
export default {data() { // 格式固定, 定义vue数据之处return { //固定格式，返回一个数据对象msg: "hello, vue", // key相当于变量名obj: {name: "小vue",age: 5}}}
}
</script><style>
</style>

总结: dom中插值表达式赋值, vue的变量必须在data里声明

什么是插值表达式？

双大括号，可以把Vue变量直接显示在标签内

Vue中变量声明在哪里？

data函数返回的对象上的键值对

3.1_vue基础-MVVM设计模式

目的: 转变思维, 用数据驱动视图改变, 操作dom的事, vue源码内干了

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结
演示: 在上个代码基础上 , 在devtool工具改变M层的变量 , 观察V层(视图的自动同步)
等下面学了v-model再观察V改变M的效果
MVVM，一种软件架构模式，决定了写代码的思想和层次
- M： model数据模型 (data里定义)
- V： view视图（html页面）
- VM： ViewModel视图模型 (vue.js源码)
MVVM通过数据双向绑定让数据自动地双向同步不再需要操作DOM
- V（修改视图） -> M（数据自动同步）
- M（修改数据） -> V（视图自动同步）

在vue中，不推荐直接手动操作DOM！！！
在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

总结: vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 提高开发效率

MVVM ：双向数据绑定
- 其中涉及的双方：View（视图），Model（数据）
- 数据到视图：数据改变，界面也改变
- 视图到数据：界面改变，数据也改变

什么是设计模式？

设计模式是对代码分层，引入一种架构的概念

MVVM是什么？

MVVM（模型，视图，视图模型双向关联的一种设计模式）

MVVM好处？

减少DOM操作，提高开发效率

3.2_vue指令-v-bind

目标: 给标签属性设置vue变量的值

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

每个指令, 都有独立的作用

语法：v-bind:属性名=“vue变量”，这里的vue变量，指的是data中定义的数据变量
简写：:属性名=“vue变量”
代码：

<template><div><!-- 2. 值 -> 标签原生属性上 --><!-- 语法: v-bind:原生属性名="vue变量" --><a v-bind:href="url">点击去百度</a><!-- 语法: :原生属性名="vue变量" --><img :src="imgUrl" /><img :src="localImg"></div>
</template><script>
import imgObj from "./assets/1.gif"; // 唯独js需要导入图片文件(css/标签里可以直接使用图片地址)
export default {// 1. 准备变量data() {return {url: "http://www.baidu.com",//PS：网络地址可以直接使用，但是本地的图片，就需要导入来使用imgUrl:"http://yun.itheima.com/Upload/./Images/20210412/60741c11ab77b.jpg",localImg: imgObj};}
};
</script><style>
</style>

总结: 把vue变量的值, 赋予给dom属性上, 影响标签显示效果

如何给dom标签的属性设置Vue变量？

:属性名=“Vue变量”

3.3_vue指令-v-on

目标: 给标签绑定事件

语法
- v-on:事件名=“要执行的少量代码”
- v-on:事件名=“methods中的函数”
- v-on:事件名=“methods中的函数(实参)”
简写: @事件名=“methods中的函数”

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="count = count + 1">增加1</button>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>
//简写@事件名
<button @click="subFn">减少</button><script>export default {// ...其他省略methods: {addFn(){ // this代表export default后{}对象, data和methods里的属性都直接挂在它身上this.count++},addCountFn(num){this.count += num},subFn(){this.count--}}}
</script>

总结: 常用@事件名, 给dom标签绑定事件, 以及=右侧事件处理函数

如何给dom标签绑定事件？

@事件名=“methods里的函数名”

如何给事件传值？

@事件名=“methods里的函数名(实参)”

3.4_vue指令-v-on事件对象

目标: vue事件处理函数中, 拿到事件对象

语法:
- 无传参, 通过形参直接接收
- 传参, 通过$event指代事件对象传给事件处理函数
示例：

PS：

如果我们自己不传递参数，那么系统会自动将$event事件对象传递过去，我们只管接收即可
如果我们自己要传递参数，那么系统就不会帮助我们传递$event

<template><div><a @click="one" href="http://www.baidu.com">百度</a><hr /><a @click="two(10, $event)" href="http://www.taobao.com">淘宝</a></div>
</template><script>
export default {methods: {// 1. 事件触发, 无传值, 可以直接获取事件对象是one(e){e.preventDefault()},// 2. 事件触发, 传值, 需要手动传入$eventtwo(num, e){e.preventDefault()}}
};
</script><style>
</style>

Vue事件处理函数，如何拿到事件对象？

无实参，直接用第一个形参接收
有实参，手动传入$event

3.5_vue指令-v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

语法 : @事件名.修饰符=“methods里函数”
- .stop - 阻止事件冒泡
- .prevent - 阻止默认行为
- .once - 程序运行期间, 只触发一次事件处理函数
代码：

<template><div><div @click="fatherFn"><p @click.stop="oneFn">.stop - 阻止事件冒泡</p><a href="http://www.baidu.com" @click.prevent.stop>去百度</a><p @click.once="twoFn">点击观察事件处理函数执行几次</p></div></div>
</template><script>
export default {methods: {fatherFn(){console.log("fahter-触发click事件");},oneFn(){console.log("p标签点击了");},twoFn(){console.log("p标签被点击了");}}
}
</script><style></style>

总结: 修饰符给事件扩展额外功能

Vue有哪些主要修饰符，都有什么功能？

.stop - 阻止事件冒泡
.prevent - 阻止默认行为
.once - 只执行一次事件处理函数

3.6_vue指令-v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

语法:
- @keyup.enter - 监测回车按键
- @keyup.esc - 监测返回按键
[更多修饰符](https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6)
代码：

<template><div><!-- 1. 绑定键盘按下事件.enter-回车 --><input type="text" @keydown.enter="enterFn"><!-- 2. .esc修饰符 - 取消键 --><hr><input type="text" @keydown.esc="escFn"></div>
</template><script>
export default {methods: {enterFn(){console.log("用户按下的回车");},escFn(){console.log("用户按下esc键");}}
}
</script><style></style>

总结: 多使用事件修饰符, 可以提高开发效率, 少去自己判断过程

按键修饰符如何使用？

@键盘事件.按键修饰符=“methods里的函数名”

有哪些主要按键修饰符？

.enter - 只有按下回车才能触发这个键盘事件函数
.esc - 只有按下取消键才能触发这个键盘事件函数

3.7_实例-翻转世界

目标: 点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)

提示: 把字符串取反赋予回去

<template><div><!-- 1. 变量准备-静态页面铺设 --><h1>{{ msg }}</h1><!-- 2. 绑定点击事件 --><button @click="btn">逆转世界</button></div>
</template><script>
export default {data(){return {msg: "Hello, World"}},methods: {btn(){// // 3. 截取字符串返回数组// let arr = this.msg.split("")// // 4. 翻转// arr.reverse()// // 5. 数组拼接起来// this.msg = arr.join("")// 简化this.msg = this.msg.split("").reverse().join("")}}
}
</script><style></style>

总结: 记住方法特点, 多做需求, vue是数据变化视图自动更新, 减少操作DOM时间, 提高开发效率

点击翻转字符串显示思路是什么？

写需求要先写静态标签，再考虑动态效果，找到第一步干什么
记住方法的特点 - 可以自己总结字典和口诀

3.8_vue指令 v-model

目标: 把value属性和vue数据变量, 双向绑定到一起

v-model : 是实现vue变量和表单标签value属性, 双向绑定的指令
双向数据绑定
- 数据变化 -> 视图自动同步
- 视图变化 -> 数据自动同步
语法: v-model=“vue数据变量”
例子：做个注册表单, 了解v-model在各种表单标签如何使用
演示: 用户名绑定 - vue内部是MVVM设计模式

<template><div><div><span>用户名:</span><!-- 1. v-model双向数据绑定value属性 - vue变量--><input type="text" v-model="username"></div><div><span>密码: </span><input type="password" v-model="pass"></div></div>
</template><script>
export default {data(){return {username: "",pass: ""}}
}
</script><style></style>

总结: 本阶段v-model只能用在表单元素上, 以后学组件后讲v-model高级用法

PS：
- v-bind:属性名=‘变量名’ ：将变量与属性进行了单向的数据绑定
- v-model=“变量名” ：双向数据绑定，将表单控件的value属性与变量进行了双向数据绑定

3.8.2_vue指令 v-model绑定不同表单标签

目标：value属性和Vue数据变量, 双向绑定到一起

语法: v-model=“Vue数据变量”
例子如下:

<template><div><div><span>来自于: </span><!-- 下拉菜单要绑定在select上 --><select v-model="from"><option value="北京市">北京</option><option value="南京市">南京</option><option value="天津市">天津</option></select></div><div><!-- (重要)遇到复选框, v-model的变量值非数组 - 关联的是复选框的checked属性（只要选中一个复选框，就会把checked的值true给此变量）数组   - 关联的是复选框的value属性--><span>爱好: </span><input type="checkbox" v-model="hobby" value="抽烟">抽烟<input type="checkbox" v-model="hobby" value="喝酒">喝酒<input type="checkbox" v-model="hobby" value="写代码">写代码</div><div><span>性别: </span><input type="radio" value="男" name="sex" v-model="gender">男<input type="radio" value="女" name="sex" v-model="gender">女</div><div><span>自我介绍</span><textarea v-model="intro"></textarea></div></div>
</template><script>
export default {data(){return {from: "",//hobby:"", //默认是空字符串，但是只要勾选一个复选框，此值即为truehobby: [],gender: "男",intro: ""}}
}
</script><style></style>

下拉菜单v-model写在哪里？
v-model写在select上，value写在option上
v-model用在复选框时，需要注意什么？
v-model的vue变量是：
- 非数组 - 关联的是checked属性
- 数组 - 关联的是value属性
Vue变量初始值会不会影响表单的默认状态？
会影响，因为双向数据绑定 - 互相影响

3.9_vue指令 v-model修饰符

目标: 让v-model拥有更强大的功能

语法 : v-model.修饰符=“vue数据变量”
- .number 以parseFloat转成数字类型
- .trim 去除首尾空白字符
- .lazy 在change时触发而非inupt时
代码：

<template><div><div><span>年龄</span><!-- .number修饰符-把值parseFloat转数值再赋予给v-model对应的变量 --><!-- 标签中，所有属性的值的类型是字符串 ，所以用户输入的23，是一个字符串的"23"--><input type="text" v-model.number="age"></div><div><!-- .trim修饰 - 去除首尾两边空格 --><span>人生格言</span><input type="text" v-model.trim="motto"></div><div><!-- .lazy修饰符 - 失去焦点内容改变时(onchange事件), 把内容同步给v-model的变量 --><!--  change： 监听文本框的内容改变，但是需要失去焦点才会触发input：监听文本框的内容改变--><span>个人简介</span><textarea v-model.lazy="intro"></textarea></div></div>
</template><script>
export default {data(){return {age: 0,motto: "",intro: ""}}
}
</script><style></style>

总结: v-model修饰符, 可以对值进行预处理, 非常高效好用

Vue针对v-model有哪些修饰符来提高我们编程效率？

.number - 转成数值类型后再赋予给Vue数据变量
.trim - 去除两边空格后把值赋予给Vue数据变量
.lazy - 等表单失去焦点，才把值赋予给Vue数据变量

3.10_vue指令 v-text和v-html

目的: 更新DOM对象的innerText/innerHTML

语法:
- v-text=“vue数据变量”
- v-html=“vue数据变量”
注意: 会覆盖插值表达式
代码：

<template><div><p v-text="str"></p><p v-html="str">{{ 10 + 20 }}</p><!-- 注意: v-text或v-html会覆盖插值表达式 --></div>
</template><script>
export default {data(){return {str: "<span>我是一个span</span>"}}
}
</script><style></style>

总结: v-text把值当成普通字符串显示, v-html把值当做html解析

v-text和v-html有什么作用？
1. 都可以设置标签显示的内容
区别是什么？
1. v-text把值当成普通字符串显示
2. v-html把值当成标签进行解析显示

3.11_vue指令 v-show和v-if

目标: 控制标签的隐藏或出现

语法
- v-show=“vue变量”
- v-if=“vue变量”
- v-else
原理
- v-show 用的display:none隐藏 (频繁切换使用)
- v-if 直接从DOM树上移除
代码：

<template><div><!-- v-show 或者 v-ifv-show="vue变量"v-if="vue变量"--><h1 v-show="isShow">我是h1</h1><h2 v-if="isOk">我是h2</h2><!-- v-show隐藏: 采用display:none   // 频繁切换v-if隐藏:   采用从DOM树直接移除 // 移除--><!-- v-if和v-else使用 --><p v-if="age >= 18">成年了</p><p v-else>未成年</p></div>
</template><script>
export default {data(){return {isShow: false,isOk: false,age: 2}}
}
</script><style></style>

总结: 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏

vue如何控制标签显示/隐藏？
1. v-show或v-if，给变量赋予true/false，显示/隐藏
区别是什么？
1. v-show是用css方式显示/隐藏标签
2. v-if直接从DOM树上添加/移除
3. v-if可以配合v-else或者v-else-if使用

3.12_案例-折叠面板

目标: 点击展开或收起时，把内容区域显示或者隐藏

点击收起，让下方内容隐藏
点击展开，让下方内容显示
需求驱动，需求即思路

此案例使用了less语法, 项目中下载模块（因为脚手架中webpack是4.x版本，所以在下载less时需要指定版本号）

yarn add less@3.0.4 less-loader@5.0.0 -D

结构与样式代码：

<template><div id="app"><h3>案例：折叠面板</h3><div><div class="title"><h4>芙蓉楼送辛渐</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? '收起' : '展开' }}</span></div><div class="container" v-show="isShow"><p>寒雨连江夜入吴, </p><p>平明送客楚山孤。</p><p>洛阳亲友如相问，</p><p>一片冰心在玉壶。</p></div></div></div>
</template><script>
export default {data() {return {isShow: true}}
}
</script><style lang="less">
body {background-color: #ccc;#app {width: 400px;margin: 20px auto;background-color: #fff;border: 4px solid blueviolet;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 1em 2em 2em;h3 {text-align: center;}.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em;}.title h4 {line-height: 2;margin: 0;}.container {border: 1px solid #ccc;padding: 0 1em;}.btn {/* 鼠标改成手的形状 */cursor: pointer;}}
}
</style>

案例思路？

还是先静态标签
显示/隐藏用v-show和vue变量来控制（默认true）
点击切换vue变量的值来达到目的

3.13_vue指令-v-for

目标: 列表渲染, 所在标签结构, 按照数据数量, 循环生成

语法
- v-for=“(值, 索引) in 目标结构”
- v-for=“值 in 目标结构”
目标结构:
- 可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
注意:
v-for的临时变量名不能用到v-for范围外
代码：

<template><div><!-- 语法1:v-for="(值变量名, 索引变量名) in 目标结构"口诀: 想要谁循环就放到谁身上--><ul><li v-for="(item, index) in arr" :key="index">{{ item }} ---- {{ index }}</li></ul><!-- 语法2:v-for="值变量名 in 目标结构"--><ul><li v-for="obj in stuArr" :key="obj.id"><span>{{ obj.name }}</span><span>{{ obj.sex }}</span><span>{{ obj.hobby }}</span></li></ul><!-- 语法3:(了解)v-for="(value, key) in 对象"--><div><p v-for="(value, key) in tObj" :key="value"><span>{{ value }}</span>=======<span>{{ key }}</span></p></div><!-- 语法4: (了解)v-for="变量名 in 固定数字"从1开始遍历--><div v-for="n in count" :key="n">{{ n }}</div></div>
</template><script>
export default {data() {return {arr: ["小明", "小欢欢", "大黄"],stuArr: [{id: 1001,name: "孙悟空",sex: "男",hobby: "吃桃子",},{id: 1002,name: "猪八戒",sex: "男",hobby: "背媳妇",},],tObj: {name: "小黑",age: 18,class: "1期",},count: 10,};},
};
</script><style>
</style>

总结: vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成

PS：上边案例中，在遍历对象和数组的时候，in前边的变量为啥不一样呢
- 固定语法：v-for=“(value, key) in 目标结构”
- 数组的数据结构：也是key，value形式，只不过key是索引

v-for如何循环列表？
1. 谁想循环就把v-for写谁身上
2. v-for=“(值变量, 索引变量) in Vue变量” - 一定要注意in两边必须有空格
3. 可以遍历数组/对象/固定数字/字符串
v-for注意事项？
1. 值变量和索引变量不能用到v-for范围以外

今日总结

Vue是什么
Vue-cli作用以及简单使用
插值表达式
MVVM设计模式
v-bind作用
v-on作用和事件对象以及修饰符使用
v-model的作用以及双向数据绑定解释
v-if和v-show的区别和本质
v-for的作用和使用
vue的特点
- 渐进式
- 声明式渲染
- 数据驱动视图 (响应式)
- 极少的去写DOM操作相关代码
- 双向绑定
- 组件系统
- 不兼容IE8及以下浏览器

面试题

1. Vue的最大优势是什么?

简单易学, 轻量级整个源码js文件不大, 双向数据绑定, 数据驱动视图, 组件化, 数据和视图分离, vue负责关联视图和数据, 作者中国人(尤雨溪), 文档都是中文的, 入门教程非常多, 上手简单. 相比传统网页, vue是单页面可以只刷新某一部分

2. Vue和jQuery区别是什么?

jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签
Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视图关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能

3. mvvm和mvc区别是什么?

MVC: 也是一种设计模式, 组织代码的结构, 是model数据模型, view视图, Controller控制器, 在控制器这层里编写js代码, 来控制数据和视图关联
MVVM: 即Model-View-ViewModel的简写。即模型-视图-视图模型, VM是这个设计模式的核心, 连接v和m的桥梁, 内部会监听DOM事件, 监听数据对象变化来影响对方. 我们称之为数据绑定

4. Vue常用修饰符有哪些?

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.once: 只执行一次这个事件

5. Vue2.x兼容IE哪个版本以上

不支持ie8及以下，部分兼容ie9 ，完全兼容10以上，因为vue的响应式原理是基于es5的Object.defineProperty(),而这个方法不支持ie8及以下。

6. 对Vue渐进式的理解

渐进式代表的含义是：主张最少, 自底向上, 增量开发, 组件集合, 便于复用

7. v-show和v-if的区别

v-show和v-if的区别? 分别说明其使用场景?
v-show 和v-if都是true的时候显示，false的时候隐藏
但是：false的情况下，
v-show是采用的display:none
v-if采用惰性加载
如果需要频繁切换显示隐藏需要使用v-show

8. 说出至少4个Vue指令及作用

v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签
v-show 显示内容
v-if 显示与隐藏
v-else 必须和v-if连用不能单独使用否则报错
v-bind 动态绑定作用：及时对页面的数据进行更改, 可以简写成:分号
v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数函数必须写在methods里面
v-text 解析文本
v-html 解析html标签

9. 为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

几个附加练习代码

<template><div id="app"><ul><li v-for="item in myArr" :key="item">{{ item }}</li></ul><button @click="btn">走一走</button></div>
</template><script>
export default {data() {return {myArr: ["帅哥", "美女", "程序猿"],};},methods: {btn() {// 头部数据加入到末尾this.myArr.push(this.myArr[0]);// 再把头部的数据删除掉this.myArr.shift();},},
};
</script>

<template><div id="app"><ul><li v-for="(item, ind) in arr" :key="item"><span>{{ item }}</span><button @click="del(ind)">删除</button></li></ul><button @click="add">生成</button></div>
</template><script>
export default {data() {return {arr: [1, 5, 3],};},methods: {add() {this.arr.push(Math.floor(Math.random() * 20));},del(index) {this.arr.splice(index, 1);},},
};
</script>

<template><div id="app"><table class="tb"><tr><th>编号</th><th>品牌名称</th><th>创立时间</th><th>操作</th></tr><!-- 循环渲染的元素tr --><tr v-for="(item,index) in list" :key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.time}}</td><td><button @click="del(index)">删除</button></td></tr><tr v-if="list.length === 0"><td colspan="4">没有数据咯~</td></tr></table></div>
</template><script>
export default {data() {return {list: [{ id: 1, name: "奔驰", time: "2020-08-01" },{ id: 2, name: "宝马", time: "2020-08-02" },{ id: 3, name: "奥迪", time: "2020-08-03" },],};},methods: {del(index) {// 删除按钮 - 得到索引, 删除数组里元素this.list.splice(index, 1);},},
};
</script>

Vue基础学习笔记Day02_vue-cli脚手架_基础API相关推荐

Vue基础学习笔记Day06_动态组件_插槽_自定义指令
今日目标: 能够了解组件进阶知识能够掌握自定义指令创建和使用学习内容: 学习目录: 组件进阶自定义指令今日总结面试题知识点自测组件创建, 注册和使用 - 伸手就来特别熟练指令的作用 1 ...
黑马程序员C++学习笔记＜第一阶段_基础篇＞
配套视频网址: 黑马程序员:http://yun.itheima.com/course/520.html?bili B站:https://www.bilibili.com/video/BV1et411 ...
【菜鸟零基础学习笔记】Day1-计算机基础与网络基础
一.硬件.软件 1946年2月14日,由美国军方定制的世界上第一台电子计算机-电子数字积分计算机在美国宾夕法尼亚大学问世. 硬件系统:运算器.控制器.存储器.输入设备.输出设备内存和硬盘的区别内存 ...
《C语言基础学习笔记》—— 黑马程序员＜Part1-4＞
<C语言基础学习笔记 Part1-4> Part 1 基础介绍 1. 第一个C语言程序:HelloWorld 1.1 编写C语言代码:hello.c 1.2代码分析 1)include 头 ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
Vue.js 学习笔记三，一些基础指令，v-bind,v-on
在笔记二的基础上继续写 v-bind指令,为属性绑定数据 <div v-html="msg2" v-bind:title ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
8. SpringBoot基础学习笔记
SpringBoot基础学习笔记课程前置知识说明 1 SpringBoot基础篇 1.1 快速上手SpringBoot SpringBoot入门程序制作 1.2 SpringBoot简介 1.2.1 ...
Vue 新手学习笔记：vue-element-admin 之入门开发教程（v4.0.0 之前）
说实话都是逼出来的,对于前端没干过ES6都不会的人,vue视频也就看了基础的一些但没办法,接下来做微服务架构,前端就用 vue,这块你负责....说多了都是泪,脚手架框架布了都没看过干就完事,不过 ...
Python3 基础学习笔记 C05【字典】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...

Vue基础学习笔记Day02_vue-cli脚手架_基础API