1、vue基本用法

本节介绍Vue如何操作DOM元素文本、HTML内容、属性、如何进行条件循环处理、表单双向绑定、事件绑定方式。

创建vue实例

new Vue({ 
 el: “绑定的DOM元素”，
 data:{
   attr:value
}, 

methods:{
  methodName:function(){}
}

})

插入文本使用模板语法双大括号{}
插入HTML内容使用指令v-html=”data”
HTML属性绑定使用指令v-bind:属性名或者简写 :属性名
使用指令v-if、v-for进行条件和循环处理
使用指令v-model实现表单双向绑定
使用指令v-on:事件名或简写 @事件名实现DOM元素的事件绑定。

图片 1.png 图片 2.png 图片 3.png

2、计算属性和侦听属性

需求：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化。通过计算属性得到。

比如：data有2个数据属性 firstName lastName ，而我们需要通过firstName和lastName结果得到fullName显示。

2.1 计算属性computer：

将fullName属性放在计算属性computer中

图片 11.png

2.2 方法methods，通过调用方法达到同样效果：

图片 21.png

2.3 computer和methods区别：

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 firstName和lastName还没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A ，它需
要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

2.4 侦听属性watch

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch——特别是如果你之前使用过 AngularJS。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

图片 31.png

2.5 watch、computer、methods的区别？

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。官方更推荐使用计算属性而不是命令式的 watch 回调。
计算属性和侦听属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
对methods:methods里面是用来定义函数的，很显然，它需要手动调用才能执行。而不像watch和computed那样，“自动执行”预先定义的函数。
watch和computed各自处理的数据关系场景不同

watch场景：一个数据影响多个数据
computed场景：一个数据受多个数据影响
相比于watch/computed，methods不处理数据逻辑关系，只提供可调用的函数

3、vue生命周期

图片 4.png 图片 5.png 图片 41.png

4、new vue()option选项详解

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。

var vm = new Vue({

  // 选项

})

vue示例的option有哪些?

当创建一个 Vue 实例时，你可以传入一个***选项对象***。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档中浏览完整的选项列表。

https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

图片 10.png

5、组件基础

全局组件和局部组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展***HTML***元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

图片 101.png 图片 11.png

5.1组件名规范：

图片 12.png

5.2组件中data必须是一个函数

图片 13.png

5.3全局组件

图片 14.png

5.4局部组件

图片 15.png

示例：

图片 111.png
图片 121.png

4.5父子组件传值-通过props传递数据

父子通讯中最常见的数据传递方式就是通过props传递数据，就好像方法的传参一样，父组件调用子组件并传入数据，子组件接受到父组件传递的数据进行验证使用

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值
prop 的定义应该尽量详细，至少需要指定其类型。

图片 17.png 图片 16.png 图片 151.png 图片 20.png 图片 131.png 图片 141.png

4.6子父组件传值-$emit()事件

有些时候可能要求我们子组件和父级组件进行沟通，在子组件中无法直接修改父组件的data属性，需要通过两件事件完成：

1.子组件可以通过调用内建的 emit 方法并传入事件名称来触发一个事件

2.父级组件可以像处理 native DOM 事件一样通过 v-on 监听子组件实例的任意事件，执行事件要做的事情...

例子：在子组件中通过按钮告诉父组件我们想要更新字号，通知父组件更新data数据postFontSize

图片 18.png 图片 19.png

4.7template标签

在component的template中书写大量的HTML元素很麻烦。
Vue提供了template标签，在template标签中定义HTML模板。然后通过ID指定到组件内的template属性上；

图片 201.png

6、vue单文件组件

图片 7.png 图片 21.png 图片 22.png

概述

Vue.js 最受欢迎的特性之一就是单文件组件（SFC）。它可以将模板和组件定义全部放在一个文件里。里面的模板会被 vue-loader 编译成 render 函数，因此也可以获得最佳的运行时性能。

单文件组件是一个.vue文件，比如Checkbox.vue，在 template 标签中定义模板， script 标签中定义组件属性和逻辑，style标签中定义组件样式，然后就可以在应用中导入使用了。

只要你习惯使用 Vue CLI 或者其他构建工具，单文件组件是个不错的选择

vue单文件组件中,包含3个部分：

这是一个文件名为 Hello.vue 的简单实例：

图片 8.png

①template标签

Vue提供了template标签，在 template 标签中定义HTML模板

注意：一个组件下只能有一个并列的 div。

②script标签

在script 标签中定义组件属性和逻辑，将其导出

③style标签

在style标签中定义组件样式

图片 23.png

当前在我们的HTML项目中，无法运行.vue文件，需要npm命令。

图片 9.png

未来在vue-cli脚手架项目中基于组件化开发，采用单文件组件开发。

7、使用vue-cli脚手架项目环境准备

图片 24.png

在实际项目中更多的是使用vue-cli脚手架创建vue项目

图片 25.png

7.1npm

npm：node Package Manager(包管理器)。

vue-cli的运行依赖于node的npm管理工具实现。

新版node.js集成npm,即安装node.js之后就可以使用npm。

7.2Node 版本要求

Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

7.3安装Node

下载地址：http://nodejs.cn

图片 27.png

下载完毕后，可以安装node，建议不要安装在系统盘（如C：）。

图片 28.png

安装之后打开cmd窗口

输入node -v 回车，查看node版本号,显示版本号即安装成功。
输入npm -v回车，查看npm版本号。

图片 29.png

7.4配置npm模块存储路径和缓存存储路径

1、在nodejs安装路径下，新建node_global和node_cache两个文件夹，用于存放npm的全局模块的存放路径以及cache缓存路径

图片 30.png

2、配置npm的全局模块的存放路径以及cache缓存路径

设置全局模块存放路径

npm config set prefix "D:\nodejs\node_global"

设置缓存路径

npm config set cache "D:\nodejs\node_cache"

图片 31.png

设置成功后，以后用命令npm install XXX -g安装的模块就在存放在D:\nodejs\node_global里

7.5 配置系统环境变量

说明：设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。

1、编辑系统变量PATH中添加

“D:\nodejs\node_global” 这个npm安装的模块的存储路径（具体要根据安装的路径填写）

图片 32.png

2、添加系统变量NODE_PATH

D:\nodejs\node_modules表示node所安装的模块都会存放在此目录下

图片 33.png

7.6基于 Node.js 安装cnpm（淘宝镜像）

npm作为国外的node仓库安装工具，国内用户在安装相关的资源的时候，会出现安装失败，以及速度很慢的情况。为了解决npm安装的问题，国内出现了很多npm的镜像网址，taobao的npm镜像算是使用频率比较高的了。

使用阿里定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.检测cnpm版本，如果安装成功可以看到cnpm的基本信息。

cnpm -v

图片 34.png

7.7安装Vue

cnpm install vue -g

图片 35.png

7.8安装vue命令行工具，即vue-cli 脚手架

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可简化项目构建的过程，提供了扩展其他vue组件的功能。

1.安装vue-cli

cnpm install vue-cli -g

图片 36.png

2.检查vue-cli脚手架版本,如果安装成功可以看到vue-cli脚手架的版本信息

$ vue -V 
    或
$ vue --version

图片 37.png

（注意以上查询结果不是vue的版本，vue版本号在项目中的package.json文件中"dependencies"中的vue属性后的版本号）

通过以上3-8步骤，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建vue项目。

图片 38.png

8、通过vue-cli工具构建vue项目

1.在本地磁盘中创建一个存放vue项目的工作空间，比如D:\vue-project

图片 39.png

2.切换到指定的工作空间中通过命令构建项目

在当前存储项目的目录下输入下载项目模板的命令

【下载模板】

$ vue init webpack-simple 项目名

$ vue init webpack 项目名

例子：

$ vue init webpack vue-cli-demo

注意：

webpack-simple和webpack 是项目模板，分别为简单模式和完全模式，简单模式仅包含基于vue.js开发必要的一些资源和包，使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。

我们上课中直接使用完全模式的模板。

图片 40.png

【进入交互页面，根据自己情况选择】

Project name vue-cli-demo # 项目名称，直接回车，按照括号中默认名字（注意这里的名字不能有大写字母，如果有会报错Sorry, name can no longer contain capital letters）。

Project description A Vue.js project # 项目描述,随便写
Author # 作者名称
Vue build standalone # 我选择的运行加编译时
Runtime + Compiler: recommended for most users
Install vue-router? Yes # 是否需要路由
Use ESLint to lint your code? NO# 是否使用 ESLint 作为代码规范.
Pick an ESLint preset Standard # 我选择的是标准风格
Standard
Set up unit tests Yes # 是否安装单元测试,我选择yes
Pick a test runner jest # 测试模块,按需选择,我选择jest
Setup e2e tests with Nightwatch? Yes # 是否安装e2e测试,我选择Yes
Should we run npm install for you after the project has been created? (recommended) npm # 包管理器，我选的NPM

图片 41.png