day03 - Vue基础

能够说出Vue的概念和作用

能够使用@vue/cli脚手架工程化开发

能够熟练Vue指令

一、Vue基本概念

思考

问题1: 原生js – 代码复杂开发效率慢?
- 效率慢
问题2: 有没有一种简单快速的方式?
- 有，使用框架

1.1 为什么学习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做法

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

企业里都使用Vue开发网站

小结

我们为什么学习vue？
1. 开发更快速, 更高效
2. 企业开发都在使用
3. 前端工程师必备技能, 高薪

思考

问题: Vue是什么?
- 渐进式javacript框架, 一套拥有自己规则的语法

1.2 Vue是什么

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

介绍

1. 渐进式概念
2. 库和框架概念

1.3 生活里 - 渐进式

渐进式: 逐渐进步, 想用什么就用什么, 不必全都使用

1.4 web里 - 渐进式

HTML能写网页, CSS能让网页更好看, JS赋予网页交互效果, jQ写的更快, node可以提供动态数据

1.5 Vue里 - 渐进式

Vue从基础开始, 会循序渐进向前学习, 如下知识点可能你现在不明白, 但是学完整个Vue回过头来看, 会很有帮助

1.6 库和框架

库: 封装的属性或方法 (例jQuery)
框架: 拥有自己的规则和元素, 比库强大的多 (例Vue)

小结

Vue是什么?
- Vue是一个javascript渐进式框架
什么是渐进式呢?
- 渐进式就是逐渐使用, 集成更多的功能
什么是库和框架呢?
- 库是方法的集合, 而框架是一套拥有自己规则的语法

思考

问题1: 我们在哪里去写Vue的代码呢?
- vue单文件组件
问题2: 有没有好的学习方法, 事半功倍?
- 查阅文档

1.7 Vue学习方式

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

1.8 如何学习Vue

知识点自测最好做到了如指掌 - 做不到只能花30分钟去记住结论和公式
记住Vue指令作用, 基础语法 - 弄一个字典(一一映射关系)
在课上例子, 练习, 案例, 作业, 项目中, 反复磨炼使用
学会查找问题的方式和解决方式(弄个报错总结.md, 避免反复进坑)

小结

我们在哪里书写Vue的代码呢?
- 在工程化环境下用Vue开发项目
我们如何才能学好Vue呢?
- 多练多用多总结

二、@vue/cli脚手架

思考

问题1: 新开发模式是不是离不开webpack?
- 离不开webpack
问题2: 自己配置webpack是不是非常痛苦?
- 麻烦
问题3: 有没有一套搭建好的, 拿来即用的环境呢?
- @vue/cli脚手架

2.1 @vue/cli和脚手架介绍

@vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
脚手架是为了保证各施工过程顺利进行而搭设的工作平台

2.2 脚手架好处

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

小结

问题1: 用Vue开发项目, 需要自己配置webpack吗?
- Vue官方提供了@vue/cli包-可以创建脚手架项目
问题2: 使用脚手架好处是什么?
- 0配置开箱即用, 基于它开发我们的项目

思考

问题1: 以前如何安装一个全局包呢?
- 下载包，手动导入
问题2: 如何用yarn安装@vue/cli这个全局包呢?
- yarn add @vue/cli

2.3 @vue/cli安装

全局安装@vue/cli 模块包

yarn global add @vue/cli

查看是否成功

vue -V

小结

如何安装全局包
- yarn global add 包名 / npm install 包名 –g
我们会得到什么呢
- 全局包会在计算机中配置全局命令(例: vue命令)

思考

问题: 有了vue命令, 如何创建一套脚手架项目?
- vue create 项目名字

2.4 @vue/cli 创建项目

创建项目
```
vue create vuecli-demo
```
注意: 项目名不能有大写字母, 中文和特殊符号
选择模板和包管理器, 等待脚手架项目创建完毕

2.5 @vue/cli 启动开发服务

cd进入项目下, 启动内置的webpack本地热更新开发服务器 – 浏览项目页面
```
cd vuecli-demo
yarn serve
```
如果未自动弹出浏览器, 手动打开输入提示的域名+端口浏览项目页面

小结

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

思考

问题: 脚手架项目里各个文件及代码都有什么作用呢?
- 如图所示，对应作用

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

目标：文件夹和文件含义, 关键文件里代码意思

小结

脚手架里主要文件和作用?
1. node_modules – 都是下载的第三方包
2. public/index.html – 浏览器运行的网页
3. src/main.js – webpack打包的入口
4. src/App.vue – Vue页面入口
5. package.json – 依赖包列表文件

思考

问题: 项目入口和各文件关系是什么呢?
- 引入

2.7 项目架构了解

目标：知道项目入口, 以及代码执行顺序和引入关系

小结

main.js和App.vue, 以及index.html作用和关系?
1. main.js – 项目打包主入口 – Vue初始化
2. App.vue – Vue页面主入口
3. index.html – 浏览器运行的文件
4. App.vue => main.js => index.html

思考

问题1: 端口号我不想要8080, 比如要3000可以改吗?
- 可以
问题2: 学习webpack中, 在哪个文件里修改端口号?
- vue.config.js

2.8 @vue/cli 自定义配置

目标：项目中没有webpack.config.js文件，因为Vue脚手架项目用的vue.config.js

src并列处新建vue.config.js, 填入配置, 重启webpack开发服务器

module.exports = defineConfig({devServer: { // 自定义服务配置port: 3000,open: true // 浏览器自动打开}
})

小结

脚手架项目配置文件是什么?
src并列处准备vue.config.js配置文件

思考

问题1: 以前写代码很随意, 有很多根本不使用的变量?
- 是
问题2: 项目开发完, 我们还得回去挨个清理?
- 不用
问题3: 有没有一种技术, 能够实时帮助我们检查代码呢?
- eslint

2.9 eslint检查代码

目标：eslint是一种代码检查的工具

如果写代码违反了eslint的规则-报错

演示: 在main.js中随便定义变量 – 不使用 – 观察eslint报错

2.10 处理eslint代码检查

方式1：手动解决掉错误, 以后项目中会讲如何自动解决

方式2：暂时关闭eslint检查(因为现在主要精力在学习Vue语法上), 在vue.config.js中配置后重启服务

module.exports = defineConfig({// 其他配置 lintOnSave: false // 关闭eslint检查
})

小结

eslint是什么?
- eslint是代码检查工具, 违反规定就报错
如何暂时关闭?
- 在vue.config.js中设置lintOnSave为false重启服务器即可

思考

问题1: 代码写在一起, 留意class类名, js变量名, 别重复?
- 尽量别重复
问题2: 现在有没有办法避免这个问题呢?
- 有，单文件组件

2.11 单vue文件讲解

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

<!-- template必须，只能有一个根标签，影响渲染到页面的标签结构 -->
<template><div>欢迎使用vue</div>
</template><!-- js相关 -->
<script>
export default {name: 'App'
}
</script><!-- 当前组件的样式，设置scoped，可以保证样式只对当前页面有效 -->
<style scoped></style>

小结

单vue文件好处?
- 独立作用域, 不再担心变量重名问题
单vue文件使用注意事项?
- 要注意template里只能有一个根标签

思考

问题1: 脚手架项目自带欢迎界面都是哪些文件和代码呢？
- assets 和 components 文件夹下的一切，src/App.vue默认
问题2: 我们开发自己的需求, 需要他们吗?
- 不需要

2.12 脚手架项目_清理欢迎界面

assets 和 components 文件夹下的一切都删除掉 (不要默认的欢迎页面)
src/App.vue默认有很多内容, 可以全部删除留下template和script和style的框

<template><div></div>
</template><script>
export default {}
</script><style scoped></style>

小结

欢迎界面是哪些, 如何清除?
1. assets下的图片和components下的文件, App.vue初始代码
2. 删除即可, 但是要留下Vue项目入口页面App.vue文件

三、Vue指令

思考

问题1: 以前改变标签内容, 如何做?
- 操作dom
问题2: 用Vue有没有更简单的方式?
- 指令

3.1 Vue基础-插值表达式

目标：在dom标签中, 直接插入vue数据变量

又叫: 声明式渲染/文本插值
语法: {{ 表达式 }}

<template><div><!-- 2. 把值赋予到标签上 --><h1>{{ msg }}</h1><h2>{{ obj.name }}</h2><h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3></div>
</template>

msg和obj是vue数据变量
要在js中data函数里声明

<script>
export default {// 1. 变量在data函数return的对象上data() { // 格式固定，定义vue数据之处return { // key相当于变量名msg: 'Hello Vue',obj: {name: 'Vue',age: 18}}}
}
</script>

小结

什么是插值表达式?
- 双大括号, 可以把vue数据变量直接显示在标签内
Vue中变量声明在哪里?
- data函数返回的对象上, 用key属性声明

思考

演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)
问题: 为什么数据改变页面自动更新了?
- 数据驱动视图

3.2 vue基础-MVVM设计模式

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

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结

小结

什么是设计模式?
- 设计模式是对代码分层, 引入一种架构的概念
MVVM是什么?
- MVVM(模型, 视图, 视图模型双向关联的一种设计模式)
MVVM好处?
- 减少DOM操作, 提高开发效率

Vue指令学习目标

以v-开头的标签属性, 叫指令, 给标签添加额外功能
1. v-bind
2. v-on和修饰符
3. v-model和修饰符
4. v-text和v-html
5. v-show和v-if以及v-else
6. v-for

思考

问题: 以前给a标签设置href如何做?
- 获取元素 元素.href = 'xxx'

3.3 Vue指令-v-bind

目标：给标签属性设置Vue变量的值

v-bind语法和简写

语法：v-bind:属性名="vue变量"

简写：:属性名="vue变量"

<!-- vue指令 - v-bind属性动态赋值 -->
<a v-bind:href="url">点击去百度</a>
<img :src="imgSrc" alt="百度" />

补充：唯独js需要导入图片文件(css/标签里可以直接使用图片地址)

import imgObj from './assets/customer_04.jpg' // 唯独js需要导入图片文件(css/标签里可以直接使用图片地址)

小结

如何给dom标签的属性, 设置Vue数据变量?
- :属性名=“Vue数据变量”

思考

问题: 以前如何给按钮绑定点击事件呢?
- 按钮.addEventListener('click',function(){})

3.4 Vue指令-v-on

目标：给标签绑定事件

语法

v-on:事件名=“要执行的少量代码"
v-on:事件名=“methods中的函数名"

v-on:事件名=“methods中的函数名(实参)"

<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>

方法在methods选项定义

<script>
export default {// ...其它省略methods: {addFn() { // this代表export default后面的组件对象（下属有data里return出来的属性）this.count++},addCountFn(num) {this.count += num},subFn() {this.count--}}
}
</script>

目标：v-on: 可以简写成@

语法:

@事件名=“methods中的函数”
```
<button @click="subFn">减少</button>
```

小结

如何给dom标签绑定事件?
- @事件名=“methods里的函数名”
如何给事件传值呢?
- @事件名=“methods里的函数名(实参)”

思考

问题1: js原生如何阻止标签默认行为?
- preventDefault()
问题2: vue事件处理函数如何获取事件对象呢?
- v-on

3.5 Vue指令-v-on事件对象

目标：Vue事件处理函数中, 拿到事件对象

语法

无传参, 通过形参直接接收

传参, 通过$event指代事件对象传给事件处理函数

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

小结

Vue事件处理函数, 如何拿到事件对象?
1. 无传参, 直接在形参接收
2. 有传参, 手动传入$event对象

思考

问题1: e.preventDefault()单词很长不好写吧?
- 是的
问题2: 有没有一种更简单的方式实现呢?
- 有

3.6 Vue指令-v-on修饰符

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

语法

@事件名.修饰符="methods里函数"

修饰符列表

.stop - 阻止事件冒泡
.prevent - 阻止默认行为

.once - 程序运行期间, 只触发一次事件处理函数

<template><div @click="fatherFn"><!-- vue对事件进行了修饰符设置，在事件后面.修饰符名即可使用更多的功能 --><button @click.stop="btn">.stop阻止事件冒泡</button><a href="http://www.baidu.com" @click.prevent="btn">.prevent阻止默认行为</a><button @click.once="btn">.once程序运行期间，只触发一次事件处理函数</button</div>
</template>

小结

Vue有哪些主要修饰符, 都有什么功能?
1. .stop – 阻止事件冒泡
2. .prevent – 阻止默认行为
3. .once – 只执行一次事件处理函数

思考

问题1: 以前我想判断用户是否按下回车怎么做?
- 判断是否是回车键
问题2: 鼠标事件有修饰符, 那按键有修饰符吗?
- 有

3.7 Vue指令-v-on按键修饰符

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

语法:

@keyup.enter - 监测回车按键

@keyup.esc - 监测返回按键

<template><div><input type="text" @keydown.enter="enterFn" /><hr /></div>
</template>

更多修饰符: https://v2.vuejs.org/v2/guide/events.html

小结

按键修饰符如何使用?
- @键盘事件.按键修饰符=“methods里函数名”
有哪些主要按键修饰符?
1. .enter – 只要按下回车才能触发这个键盘事件函数
2. .esc – 只有按下取消键才能触发这个键盘事件函数

3.8 课上练习_翻转世界

需求：点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)

提示: 点击事件里, 把Vue变量值挨个字母取反赋予回来 (提示跟数组有关系)

分析：先静后动

定义变量 message:‘HELLO, WORLD’
插值表达式赋予到dom上, 准备按钮和文字
按钮绑定点击事件和函数
对message值用split拆分, 返回数组
数组元素翻转用reverse方法
再把数组用join拼接成字符串赋予给message

因为Vue是MVVM设计模式, 数据驱动视图, 所以视图自动改变

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

小结

点击翻转字符串你有什么收货?
1. 写需求要先静态标签, 再考虑动态效果, 找好第一步干什么
2. 记住方法的特点 – 可以自己总结字典和口诀
3. Vue是靠数据驱动视图, 只需要关心数据变化即可

思考

问题1: js中获取表单的值, 赋予给变量?
- 是
问题2: js变量改变, 同步显示到表单里?
- 重新赋值
问题3: Vue能否把他们互相关联起来呢?
- 能

3.9 Vue指令-v-model

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

语法: v-model="Vue数据变量"

双向数据绑定

变量变化 -> 视图自动同步
视图变化 -> 变量自动同步

例子, 做个注册表单, 了解v-model在各种表单标签如何使用

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

小结

v-model用在哪里?
- 暂时只能用在表单标签上
v-model有什么作用?
- 把vue的数据变量和表单的value属性双向绑定在一起

思考

问题: 下拉菜单, 复选框, 单选框如何绑定Vue变量呢?
- 在select, value在option上

例子如下:

<template><div><div><span>来自于</span><!-- 下拉菜单要绑定在select上 --><select v-model="city"><option value="北京市">北京</option><option value="天津市">天津</option><option value="上海市">上海</option></select></div><div><!-- - (重要)- 遇到复选框，v-model的变量值- 非数组 - 关联的是复选框的checked属性- 数组 - 关联的是复选框的value属性--><span>爱好: </span><input type="checkbox" value="抽烟" v-model="hobby" />抽烟<input type="checkbox" value="喝酒" v-model="hobby" />喝酒<input type="checkbox" value="写代码" v-model="hobby" />写代码</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="introduction"></textarea></div></div>
</template><script>
export default {data() {return {city: '',hobby: [],gender: '男',introduction: ''}}
}
</script>

小结

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

思考

问题1: 表单同步到变量里的 数 是什么类型的呢?
- 字符串
问题2: 能否让v-model转成数值再赋予给变量呢?
- 能

3.10 Vue指令-v-model修饰符

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

语法: v-model.修饰符="Vue数据变量"

.number 以parseFloat转成数字类型
.trim 去除首尾空白字符

.lazy 在change时触发而非inupt时

<div><input type="number" v-model.number="age" />
</div>
<div><input type="text" v-model.trim="motto" />
</div>
<div><textarea v-model.lazy="introduction"></textarea>
</div>

小结

v-model有哪些修饰符, 提高我们编程效率?
1. .number – 转成数值类型赋予给Vue数据变量
2. .trim – 去除左右两边空格后把值赋予给Vue数据变量
3. .lazy – 等表单失去焦点, 才把值赋予给Vue数据变量

思考

问题1: JS原生的innerText和innerHTML作用和区别?
- innerText不可解析标签，innerHTML可以
问题2: Vue有没有一种快速设置方式?
- 指令

3.11 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"></p></div>
</template>

小结

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

思考

问题1: JS原生/CSS如何隐藏一个标签?
- display: none
问题2: 如何用一个变量来控制标签显示/隐藏呢?
- Vue变量

3.12 Vue指令-v-show和v-if

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

语法:

v-show="Vue变量"
v-if="Vue变量"

原理

v-show 用的display:none隐藏 (频繁切换使用)
v-if 直接从DOM树上移除

高级

v-else的使用

v-else-if的使用

<template><div><h1 v-show="isOk">v-show的盒子</h1><h1 v-if="isOk">v-if的盒子</h1><div><p v-if="age > 18">我成年了</p><p v-else>还得多吃饭</p></div></div>
</template>

小结

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

3.13 案例_折叠面板

需求：点击展开或收起时，把内容区域显示或者隐藏

效果演示:

分析:

准备标签和样式, 下载less模块和less-loader@5.0.0模块
熟悉下标签结构和样式, 对应页面哪一部分
按钮绑定点击事件
声明变量isShow来控制下面标签是否显示/隐藏

点击时, 改变isShow的值, 来影响页面效果

<template><div id="app"><h3>案例：折叠面板</h3><div><div class="title"><h4>芙蓉楼送辛渐</h4><!-- 1.绑定点击事件 --><span class="btn" @click="showText"><!-- 4. 根据isShow的值显示不同文字 -->{{ isShow ? '收起' : '展开' }}</span></div><!-- 2. v-show配合变量来控制标签隐藏出现 --><div class="container" v-show="isShow"><p>寒雨连江夜入吴,</p><p>平明送客楚山孤。</p><p>洛阳亲友如相问，</p><p>一片冰心在玉壶。</p></div></div></div>
</template><script>
export default {data() {return {isShow: false}},methods: {// 3. 点击时，把值改成falseshowText() {this.isShow = !this.isShow}}
}
</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>

小结

折叠面板-案例思路是?
1. 还是先静态标签
2. 显示/隐藏用v-show和vue变量来控制(默认true)
3. 点击切换vue变量来达到目的

思考

问题1: JS原生把一个数组里学生姓名渲染到li上?
- 获取元素列表，for循环
问题2: vue使用2行代码能搞定吗?
- 能

3.14 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>

小结

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

四、今日总结

1. Vue是什么, 为什么快?

 - 渐进式javacript框架, 一套拥有自己规则的语法- 减少dom操作

2. @vue/cli和脚手架是什么?

- @vue/cli是Vue官方提供的一个全局模块包(得到vue命令), 此包用于创建脚手架项目
- 脚手架是为了保证各施工过程顺利进行而搭设的工作平台

3. Vue基础API(配置项data等)作用?

变量在data函数return的对象上，格式固定，定义vue数据之处

4. MVVM设计模式好处, 双向数据绑定是什么?

- 减少DOM操作, 提高开发效率
- value属性和Vue数据变量, 双向绑定到一起

5. 插值表达式作用?

可以把vue数据变量直接显示在标签内

6. Vue指令和修饰符的作用? 你都学了哪些?

1. v-bind
2. v-on和修饰符
3. v-model和修饰符
4. v-text和v-html
5. v-show和v-if以及v-else
6. v-for

day03 - vue基础相关推荐

（vue基础试炼_05）简单组件之间的传值
接上一篇:(vue基础试炼_04)使用组件改造TodoListhttps://gblfy.blog.csdn.net/article/details/103844256 文章目录一.上篇回顾 ① 代 ...
（vue基础试炼_04）使用组件改造TodoList
接上一篇:(vue基础试炼_03)使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明 v-bin ...
（vue基础试炼_03）使用vue.js实现TodoList
接上一篇:(vue基础试炼_02)使用vue.js实现隔2秒显示不同内容https://gblfy.blog.csdn.net/article/details/103841818 指令作用 v-fo ...
（vue基础试炼_02）使用vue.js实现隔2秒显示不同内容
接上一篇:(vue基础试炼_01)使用vue.js 快速入门hello worldhttps://gblfy.blog.csdn.net/article/details/103841156 文章目录 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没有必 ...
Vue知识（一）Vue基础语法
Vue知识一.邂逅Vue.js 1.认识Vue.js 2.Vue.js安装方式 3.Vue初体验 4.Vue的MVVM框架二.Vue基础语法 v-if指令 v-show指令 v-else指令 v- ...
Vue基础语法知识（自用，完整版）
Vue基础语法知识 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法 3.root容器中里的代码被称为 ...
vue基础1--脚手架的使用与vue基础指令
脚手架的使用与vue基础指令安装 vue-devtools 安装vscode插件 1. Vue基本概念 1.1 Vue是什么 1.2 Vue学习的方式 2. @vue/cli脚手架 2.1 @vue ...

day03 - vue基础