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做了一些类似的改进。

默认新增了类似yarn.lock的 package-lock.json；
git 依赖支持优化：这个特性在需要安装大量内部项目，或需要使用某些依赖的未发布版本时很有用。在这之前可能需要使用指定 commit_id 的方式来控制版本。
文件依赖优化：在之前的版本，如果将本地目录作为依赖来安装，将会把文件目录作为副本拷贝到 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 更高的优先级。

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

相关文章

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