Vue——B站黑马程序员教程

一、基础

（一）安装

1. 直接用 < script> 引入
   直接下载并用 < script> 标签引入，Vue 会被注册为一个全局变量。

2. 使用CDN方法
   建议开发时使用开发环境版本，发布时使用生产环境版本。

   <!-- 开发环境版本，包含了有帮助的命令行警告 -->
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   

   <!-- 生产环境版本，优化了尺寸和速度 -->
   <script src="https://cdn.jsdelivr.net/npm/vue"></script>
   

3. NPM
   
   

（二）介绍

1. Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
   构建用户界面：用vue往html页面中填充数据，非常的方便
2. Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
3. 它专注于MVVM模型的ViewModel层，通过双向数据绑定把View层和Model层链接起来。
   
   • m 是vue实例中的data，自定义的数据或后端返回的数据。不是mvc里的model，概念不同
   • vm是vue的实例，是m和v之间的调度者，所以vm是MVVM思想的核心
   • v是html页面
4. vue的两个特征：
   • 数据驱动视图
     数据的变化会驱动视图自动更新
     好处：程序员只需要把数据维护好，那么页面结构就会被vue自动渲染出来
   • 双向数据绑定
     在页面中，form表单负责采集数据，Ajax负责提交数据
     js数据的变化，会被自动渲染到页面上
     页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

注意：数据驱动视图和双向数据绑定的底层原理是MVVM。

（三）Vue实例

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

   var vm = new Vue({
     // 选项
   })
   

2. 当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

3. 生命周期及生命周期钩子图示
   
   
   

（四）插值表达式

花括号

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

{{ 表达式 }}

说明：

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值）
• 表达式必须有返回结果，例如 1 + 1；没有结果的表达式不允许使用，如：var a = 1 + 1;
• 可以直接获取Vue实例中定义的数据或函数

插值闪烁

使用{{ }}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{ }}，加载完毕后才显示正确数据，我们称为插值闪烁。

v-text 和 v-html

可以使用v-text和v-html指令来替代 {{ }}。

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

v-text 和 v-html 都不会出现插值闪烁问题，当没有数据时，页面会显示空白。

（五）class 与 style 绑定（v-bind）

是Vue中提供的用于绑定属性的指令(属性绑定机制)。
v-bind 中，可以写合法的表达式。

1. 作用是：为元素绑定属性
2. 完整写法是 v-bind:属性名=表达式
3. 简写的话可以省略v-bind，只保留 :属性名=表达式
4. 如果需要动态的增删class，建议使用对象的方式
   
   

（六）条件渲染（v-show/v-if）

v-if

1. v-if指令的作用是：根据表达式的真假切换元素的显示状态
2. 本质是通过操纵dom元素来切换显示状态
3. 若表达式的值为true，则元素存在于dom树中；若为false，则从dom树中删除
4. 频繁切换的元素用v-show，反之用v-if。因为操作dom树对性能的消耗比较大

v-show

另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样。

1. v-show指令的作用是：根据真假切换元素的显示状态
2. 原理是修改元素的display，实现显示隐藏
3. 指令后面的内容，最终都会解析为布尔值。值为true则元素显示，为false则元素隐藏
   不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
   【注】v-show 不支持 <template> 元素，也不支持 v-else。

v-if   VS   v-show

• v-if有更高的切换开销；v-show有更高的初始渲染开销。
• 如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好。
  
  

（七）列表渲染（v-for）

1. 可以用 v-for 指令基于一个数组来渲染一个列表。语法：v-for = "item in items"

2. v-for 还支持一个可选的第二个参数，即当前项的索引。语法：v-for="(item, index) in items"

   • in 后面可以放普通数组、对象数组、对象、还可以放数字。
   • 也可以用 of 替代 in 作为分隔符。如果使用 v-for 迭代数字的话， count值从1开始。
   • 也可以用 v-for 来遍历一个对象的 property。v-for="(value, name, index) in object"
     建议尽可能在使用 v-for 时提供 key attribute，key属性只能使用 number 或者 string。key在使用的时候，必须使用v-bind属性绑定的形式来指定key的值。

   <div v-for="item in items" v-bind:key="item.id">
     <!-- 内容 -->
   </div>
   

在组件上使用v-for：
2.2.0+ 的版本里，当在组件上使用 v-for 时， key 现在是必须的。

（八）事件处理（v-on）

1. v-on指令的作用是：为元素绑定事件
2. 事件名不需要写on
3. 指令可以简写为@
4. 绑定的方法定义在methods属性中
5. 方法内部通过this关键字可以访问定义在data中的数据
   v-on 指令用于监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

v-on的事件修饰符

• .stop
  防止事件冒泡。
  冒泡事件：嵌套两三层父子关系，然后所有都有点击事件，点击子节点，就会触发从内至外的点击事件
• .prevent
  防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）
• .capture
  使用事件捕获模式。与事件冒泡的方向相反，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理。
• .self
  只会触发自己范围内的事件，不包含子元素
• .once
  事件只会触发一次
• .passive
  这个修饰符会执行默认方法，即告诉浏览器你不想阻止事件的默认行为。

passive和prevent冲突，不能同时绑定在一个监听器上，如果一起使用，.prevent将会被忽略。

.stop 和 .self 的区别
.self 只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为。

按键修饰符

• .enter：回车键
• .tab：制表键
• .delete：含delete和backspace键
• .esc：返回键
• .space: 空格键
• .up：向上键
• .down：向下键
• .left：向左键
• .right：向右键
  
  

（九）表单输入绑定（v-model）

v-bind 只能实现数据的单向绑定，从 M 自动绑定到 V，无法实现数据的双向绑定。
v-model 指令可以实现表单元素和 Model 中数据的双向绑定。

• input
• radio
• select
• checkbox
• textarea
• components（Vue中的自定义组件）

【注】v-model只能运用在表单元素中

v-model 修饰符

• .lazy
  默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为change事件再同步。

  <input v-model.lazy="msg">
  

• .number
  自动将用户的输入值转化为数值类型。

  <input v-model.number="age">
  

• .trim
  自动过滤用户输入的首尾空白字符。

  <input v-model.trim="msg">
  

二、组件

写得很不错的一篇总结，具体的看这里复习吧。

（一）组件基础

1. 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以调用对应的组件即可。

2. 模块化 VS 组件化

   • 模块化：是从代码逻辑的角度进行划分的；方便后台代码的分层开发，保证每个功能模块的职能单一。
   • 组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用

3. 通过template属性，指定了组件要展示的HTML内容

4. 如果使用Vue.component 定义全局组件的时候，组件使用了驼峰命名，则在引用组件的时候，需要把大写的驼峰改成小写的字母，同时，两个单词之间使用-连接。如果不使用驼峰，则直接拿名称来用即可。

5. 组件可以有自己的 data 数据。与实例中的data不同的是，实例中的data可以为一个对象，但组件中的data必须是一个方法，而且这个方法内部还必须返回一个对象。组件中的data使用方式，和实例中data使用方式完全一样。

6. Vue提供了 component，来展示对应名称的组件

   <!-- component 是一个占位符，:is 属性 可以用来指定要展示的组件的名称 -->
   <component :is="'componentId'"></component>
   

7. 父组件向子组件传递方法，使用的是事件绑定机制 v-on

（二）组件的创建

组件中style标签lang属性和scoped属性

1. 在vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块
2. 普通的style标签只支持普通的样式，如果想要启用scss或less，需要为style元素设置lang属性
   
   

三、过渡 & 动画

四、路由

（一）什么是路由

1. 前端路由：对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；
2. 后端路由 ：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash实现。
3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）
4. URL中的hash
   
   

（二）vue-router的基本使用

1. 安装
   怎么安装就找了老半天，原来是要用 ctrl + s （微笑）
   参考
   
   

五、webpack

（一）概念引入

1. 在网页中有哪些静态资源？
   js、css、Images、字体文件（Fonts）、模板文件
2. 网页中引入的静态资源多了以后有什么问题？
   • 网页加载速度慢，因为我们要发起很多的二次请求
   • 要处理错综复杂的依赖关系
3. 如何解决上述的两个问题？
   • 合并、压缩、精灵图、图片的Base64编码
   • 可以使用requireJS，也可以使用webpack解决各个包之间复杂的依赖关系
4. 什么是webpack？
   webpack是前端的一个项目构建工具，它是基于Node.js 开发出来的一个前端工具
5. webpack可以做什么？
   • webpack 能够处理 JS 文件的互相依赖关系；
   • webpack 能够处理 JS 的兼容问题，把高级的、浏览器不识别的语法，转为低级的、浏览器能正常识别的语法。
   
   

（二）基本使用

1. 命令格式： webpack 要打包的文件的路径 打包好的输出文件的路径

2. 这样

   const path = require('path')
   module.exports = {
   	entry: path.join(__dirname,'./src/main.js'),  //入口，表示要使用webpack打包哪个文件
   	output:{  //输出文件的相关配置
   		path:path.join(__dirname, './dist'),  //指定打包好的文件要输出到哪个文件目录中去
   		filename:'bundle.js'   //指定输出文件的名称
   	}
   }
   

• 当我们在控制台直接输入 webpack 命令执行的时候， webpack 做了以下几步：
  1. 首先， webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
  2. webpack 就会去项目的根目录中，查找一个叫做 ‘webpack.config.js’ 的配置文件
  3. 当找到配置文件后， webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中导出的配置对象
  4. 当 webpack 拿到配置对象后，就拿到了配置对象中指定的入口和出口，然后进行打包构建
     
     

（三）使用 webpack-dev-server 实现自动打包编译

1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2. 安装完毕后，这个工具的用法和 webpack 工具的用法完全一样
3. 由于我们是在项目中本地安装的 webpack-dev-server ，所以无法把它当作脚本命令，在 powershell 终端中直接运行；（只有那些安装到 -g 的工具才能在终端中正常执行
4. 注意，webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack
5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上，而是直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的 bundle.js（放到内存中的目的：快）
6. 我们可以认为 webpack-dev-server 把它打包好的文件以一种虚拟的形式，托管到了我们项目的根目录中，虽然我们看不但它，但是可以认为和 dist src node_modules 平级，有一个看不见的文件叫做 bundle.js

(就还挺麻烦的。。。)

（四）webpack-dev-server 常用的命令参数

1. 停止项目操作的快捷键：ctrl + c
2. –open 自动打开浏览器
3. –port 设置启动时候的运行窗口
4. –contentBase 指定托管的跟目录
5. –hot启用热更新
   
   

（五）第三方 loader 处理 css 样式

webpack 默认只能打包处理 JS 类型的文件，无法处理其他的非 js 类型的文件。
如果非要处理非 JS 类型的文件，我们需要手动安装一些合适的 loader 加载器。

1. 如果只想要打包处理 css 文件，需要安装 cnpm i style-loader css-loader -D；
2. 打开 webpack.config.js 这个配置文件，在里面新增一个配置节点，叫做 module，它是一个对象，在这个module对象身上，有个 rules 属性是个数组，在这个数组中存放了所有第三方文件的匹配和处理规则。
   
   

（六）使用 html-webpack-plugin 插件配置启动页面

由于使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改 index.html 中的 script 标签的src属性，所以推荐大家使用 html-webpack-plugin 插件配置来启动页面。

1. 运行 cnpm i html-webpack-plugin --save-dev 安装到开发环境依赖
2. 修改 webpack.config.js 配置文件如下：
   （半途而废的笔记）
   
   

六、过滤器

1. vue.js允许自定义过滤器，可以被用作一些常见的文本格式(（也就是修饰文本，但是文本内容不会改变）)。
   过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。
   更详细的

   <!-- 在双花括号中 -->
   {{ message | capitalize }}
   
   <!-- 在 `v-bind` 中 -->
   <div v-bind:id="rawId | formatId"></div>
   

七、nrm的安装使用

1. 作用：提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务地址。
2. 镜像：原来包括一开始只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过数据是从人家那里拿过来的，除此之外，使用方式完全一样。
   • 运行 ‘npm i nrm -g’ 全局安装 ‘nrm’ 包
   • 使用 ‘nrm ls’ 查看当前所有可用资源
   • 使用 ‘nrm use npm’ 或 ‘nrm use taobao’ 切换不同的镜像源地址

【注】nrm只是单纯的提供了几个常用的下载包的 URL 地址，并能够让我们在这几个地址中方便的进行切换。但是，我们每次装包的时候，使用的装包工具都是 npm

最后：Vue属性、方法、指令总结

点击移步