Vue2 day-02

目录

一. Vue脚手架(Vue CLI)

1.1 安装新版本的Vue脚手架@vue/cli

1.2 用命令创建Vue项目

1.2.1 命令创建vue项目

1.2.2 默认创建

1.2.3 自定义创建

1.2.4 基于ui界面创建Vue项目

1.3 分析Vue脚手架生成的项目结构及代码执行

1.3.1 默认创建文件结构

1.3.2 分开放置文件的文件含义

1.3.3 主要文件及含义

assets和public目录的区别:

1.3.4 项目架构的了解

1.4 webpack和vue脚手架的关系

1.5 Vue脚手架的自定义配置

1.5.1 通过单独的配置文件进行配置，创建vue.config.js

1.5.2_eslint了解

1.5.3 单vue文件讲解

1.6 vscode插件安装

脚手架使用总结

步骤

1.7 Yarn(补充)

1.7.1 Yarn是什么？

1.7.2 Yarn和npm(Node Package Manager)命令对比

1.7.3 npm的未来：npm5.0之后

1.7.4 npm和yarn切换包管理器

二.v-bind

2.1 绑定 href/src

2.2绑定class(重要)

1) 绑定数组

2) 绑定对象

3) 总和

2.3 绑定style

1）对象

2）属性

3）数组

2.4 动态属性(了解)

三. 分支结构(重点)

3.1 v-if 使用场景

3.2 v-if和v-show的区别

四. 循环结构 v-for(重点)

4.1 普通数组

4.2 对象

4.3 数组对象

4.4 字符串

4.5 数值

4.6 v-for 中的key值

4.7 不推荐同时使用 v-if 和 v-for

---

一. Vue脚手架(Vue CLI)

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,通过 @vue/cli 实现的交互式的项目脚手架,脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

工程化开发方式：这是最推荐, 企业常用的方式

vue/cli的好处

• 不需要配置打包设置

• babel支持

• less支持

• 开发服务器支持

1.1 安装新版本的Vue脚手架@vue/cli

Vue Cli官网

npm install -g @vue/cli
npm install -g @vue/cli@4

• 查看vue脚手架版本

vue -V

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

1.2 用命令创建Vue项目

1.2.1 命令创建vue项目

vue create 项目名
​
#其中my-project为项目名
vue create my-project

注意: 项目名不能带大写字母, 中文和特殊符号或者和下载的包依赖名称相同

1.2.2 默认创建

1.2.3 自定义创建

• 选择Manually select features(选择特性以创建项目)

  

• 勾选特性可以用空格进行勾选。

  

• 选择版本

  

• ESLint选择：ESLint + Standard config

  

ESLint with error prevention only 指仅用于错误预防 ESLint + Airbnb config 指ESLint 和Airbnb代码规范 ESLint + Standard config 指ESLint 和Standard代码规范 ESLint + Prettier 指ESLint 和Prettier代码规范

• 何时进行ESLint语法校验：Lint on save

  

• babel，postcss等配置文件如何放置

  

  In dedicated config files 独立文件放置 In package.json 放package.json里

• 是否保存为模板：n

  

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

  npm run serve
  # 或
  yarn serve

1.2.4 基于ui界面创建Vue项目

输入命令：vue ui 
在自动打开的创建项目网页中配置项目信息。

1.3 分析Vue脚手架生成的项目结构及代码执行

1.3.1 默认创建文件结构

 my-project        # 项目目录├── 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配置文件--babel是一个JS编译器，兼容低版本浏览器，引入babel，将es6转为es5├── jsconfig.json   #如果想要更改默认的webpack配置时,可以通过jsconfig.json文件├── package.json  # 依赖包列表├── README.md    # 项目说明├── packge-lock.json    # 项目包版本锁定├── vue.config.js   #vue文件编译时的配置文件

1.3.2 分开放置文件的文件含义

.browserslistrc:在使用脚手架搭建项目时，会自动生成.browserslistrc文件，该文件是配置兼容浏览器
.editorconfig:配置和格式化代码
.eslintrc.js:是一个名为eslint的工具的配置文件

1.3.3 主要文件及含义

node_modules:依赖包目录
public：静态资源目录
src：源码目录
src/assets:静态资源目录
src/components：组件目录
src/App.vue:根组件
src/main.js:入口js
babel.config.js:babel配置文件--babel是一个JS编译器，兼容低版本浏览器，引入babel，将es6转为es5

assets和public目录的区别:

assets和public两个目录都可以用来放置静态资源，通常将外部引入的第三方的文件放在public中，自己的文件放在assets中。

1、public文件夹

（1）路径设置时无需添加 /public，默认加载 public 文件夹下的文件

（2）public文件夹下的资源会直接编译，而不经过 webpack

2、assets文件夹

（1）assets目录中的文件会被webpack处理解析为模块依赖

（2）大多数用来存放js、css等

1.3.4 项目架构的了解

1.4 webpack和vue脚手架的关系

vue是一套渐进式（就是你需要什么就用什么，不需要什么就可以不用，强制你遵守的规则很少），自底向上增量开发（就是根据系统和硬件编写出基层的基本需求代码，再慢慢增加模块），由于他要求遵守的规则较少，你可以引不同自己需要的东西，就需要配合webpack打包工具把引入的不同模块的东西打包。

webpack是一个工具，俗称打包工具，就是把所以浏览器不能识别的东西如（less，scss）等转换为浏览器可以识别的语言如（css），因为vue中需要引入大量的各种各样的模块,所以依赖webpack ,在webpack看来一切皆模块。

1.5 Vue脚手架的自定义配置

1.5.1 通过单独的配置文件进行配置，创建vue.config.js

module.exports = {devServer:{//项目的主机名:localhost,127.0.0.1或者具体ip地址host: '127.0.0.1',//项目的端口号port:8881,//项目启动自动打开浏览器open:true}
}

1.5.2_eslint了解

eslint的作用, 它是一个代码检查工具,代码不严谨会出现错误,页面加载不出来

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

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

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

1.5.3 单vue文件讲解

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

• Vue推荐采用,vue文件来开发项目,vue文件-独立模块-作用域互不影响

• template里只能有一个根标签

• style配合scoped属性, 保证样式只针对当前template内标签生效

• Vue文件打包起来插入到index.html, 然后在浏览器运行

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

1.6 vscode插件安装

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

脚手架使用总结

步骤

第一步：进行全局安装，仅第一次执行（警告忽略）

npm install -g @vue/cli

第二步：切换到需要创建项目的目录，使用命令行创建项目

vue create xxx

第三步：启动项目

npm run serve

1.7 Yarn(补充)

1.7.1 Yarn是什么？

Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的一些缺陷而出现的。

安装:

• 通过安装包安装,也可以通过npm安装:npm install yarn -g

• 通过安装包安装

1.7.2 Yarn和npm(Node Package Manager)命令对比

npm	yarn
npm install	yarn
npm install vue	yarn add vue
npm uninstall vue	yarn remove vue
npm install vue --save-dev/-D	yarn add vue --dev
npm install -g @vue/cli	yarn global add @vue/cli

1.7.3 npm的未来：npm5.0之后

有了yarn的压力之后，npm做了一些类似的改进。

1. 默认新增了类似yarn.lock的 package-lock.json；

2. git 依赖支持优化：这个特性在需要安装大量内部项目，或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。

3. 文件依赖优化：在之前的版本，如果将本地目录作为依赖来安装，将会把文件目录作为副本拷贝到 node_modules 中。而在 npm5 中，将改为使用创建 symlinks 的方式来实现,这将会提升安装速度。目前yarn还不支持。

1.7.4 npm和yarn切换包管理器

用户目录下找到

将 "packageManager": "npm" --> 修改为 "packageManager": "yarn",

二.v-bind

v-bind 指令被用来响应地更新 HTML 属性

2.1 绑定 href/src

• v-bind:href 可以缩写为 :href;

<!-- 绑定一个属性 -->
<a v-bind:href="url">百度</a>
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<a :href="url">百度</a>
<img :src="imgLog" alt="">
<script>//导入
import logosrc from "./assets/logo.png"
export default {name: "App",components: {},data() {return {msg1:"hello , vue!!!",msg2:"http://www.baidu.com",imageSrc:"https://cdn4.buysellads.net/uu/1/41334/1550855391-cc_dark.png",imgLog:logosrc};},
};
</script>

2.2绑定class(重要)

• 我们可以给v-bind:class 一个对象，以动态地切换class。

• 注意：v-bind:class指令可以与普通的class特性共存

v-bind 中支持绑定一个对象 ​ 如果绑定的是一个对象,则键对应的类名值为对应data中的数据

1) 绑定数组

v-bind 中支持绑定一个数组,数组中classA和 classB 对应为data中的数据

这里的classA 对用data 中的 classA 这里的classB 对用data 中的 classB

<ul class="box" :class="[classA, classB]"><li>学习Vue</li><li>学习Node</li><li>学习React</li>
</ul>
<script>
...
data() {return {classA: "a",classB: "b",};},
</script>

2) 绑定对象

<ul class="box" ><li :class="{a:true}">学习Vue</li><li :class="{a:false}">学习Node</li><li :class="{a:flag}">学习React</li>
</ul>
<script>
...
data() {return {flag:true};},
</script>

3) 总和

<ul class="box" ><li :class="class1">学习Vue</li><li :class="class2">学习Node</li><li :class="class3">学习React</li>
</ul>
<script>
...
data() {return {class1:'a',class2:['a','b'],class3:{a:true,b:true,c:false}};},
</script>

2.3 绑定style

1）对象

<div v-bind:style="styleObject">绑定样式对象</div>
<script>
data() {return {styleObject:{width:"200px",height:"200px",backgroundColor:"red"}
}   
</script>

2）属性

<!-- CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来)    --><div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div><script>
data() {return {activeColor:'blue',fontSize:"20px"
}   
</script>

3）数组

<!--组语法可以将多个样式对象应用到同一个元素 -->
<div v-bind:style="[styleObject, styleObj2]"></div>
<script>
data() {return {styleObject:{width:"200px",height:"200px",backgroundColor:"red"},styleObj2:{border:"10px solid black"}
}   
</script>

2.4 动态属性(了解)

<div :[attrname]="attrvalue">动态属性名称绑定</div>
<script>data() {return {attrname:"id",attrvalue:"1"};},
</script>

三. 分支结构(重点)

3.1 v-if 使用场景

• 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

• 2- 进行两个视图之间的切换

    <div><div v-if="score >= 90">优秀</div><div v-else-if="score > 80">良好</div><div v-else-if="score > 60">及格</div><div v-else>不及格</div></div><div><span v-if="sex=='男'">男</span><span v-else-if="sex=='女'">女</span><span v-else>保密</span></div>

3.2 v-if和v-show的区别

• v-if是动态的向DOM树内添加或者删除DOM元素

• v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

• v-show本质就是标签display设置为none，控制隐藏

• v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，某些情况下v-show性能更好一点。

<span v-show="flag">隐藏显示</span>

四. 循环结构 v-for(重点)

4.1 普通数组

• 用于循环的数组里面的值是普通元素

<li v-for="item, index in items" :key="index">
{{item}} ---------- {{ index}}
</li>
<script>data() {return {items: ["张三", "李四", "王五"],}}
</script>

4.2 对象

<li v-for="( value, key, index) in obj" :key="index">
{{ value }} ---------- {{ key }} -----------{{ index }}
</li>
<script>data() {return {obj: {name: "张三",age: 12,sex: "男",clazz: "火花225",},}}
</script>

4.3 数组对象

<li v-for="( item, index) in items" :key="item.id">
{{ item.id }} ---{{item.name}}--------{{ index }}
</li>
<script>data() {return {items: [{id:1,name:"张三1"},{id:2,name:"张三2"},{id:3,name:"张三3"},{id:4,name:"张三4"},],}}
</script>

4.4 字符串

<li v-for="( item, index) in str" :key="index">
{{ item }} ---------{{ index }}
</li>
<script>data() {return {str:"hello world",}}
</script>

4.5 数值

<li v-for="( item, index) in str" :key="index">
{{ item }} ---------{{ index }}
</li>
<script>data() {return {num:20,}}
</script>

4.6 v-for 中的key值

Vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法，我们将在下节详细讲解key值得意义。

4.7 不推荐同时使用 v-if 和 v-for

• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。