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