1 基本介绍及快速上手

1.1 概念

• v2官网：Vue.js (vuejs.org)；

• v3官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)；

• 概念：：Vue 是一个用于构建用户界面的**渐进式框架 **；

  • 构建用户界面：基于数据渲染出用户看到的页面；

    

  • 渐进式：循序渐进；

    

    • Vue核心包开发：
    • 场景：局部模块改造
    • Vue核心包 & Vue插件，工程化开发
      • 场景：整站 开发

  • 框架：一套完整的项目解决方案，能大大提升开发效率。

1.2 创建vue实例

• 步骤：

  1. 准备容器（Vue管理的范围）；
  2. 从官网引包，分为开发版本和生产版本；
     • 开发版本包含了完整的注释和警告，非上线环境一般用这个；
  3. 创建Vue实例；
  4. 指定配置项，渲染数据；

• 例：

  <div id="app">
    <h1>{{ msg }}</h1>
    <a href="#">{{ count }}</a>
  </div>
  
  <!-- 引入的是开发版本，包含了完整的注释和警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  
  <script>
    //一旦引入了Vue的核心包，在全局环境下就有了Vue的构造函数
    const app = new Vue({
    	//通过el配置选择器，指定Vue管理的是哪一个盒子
    	el: '#app',
    	//通过data来提供要渲染的数据
    	data: {
    	  msg: 'Hello, Vue'
        count: 666
    	}
    })
  </script>
  

1.3 插值表达式

• 插值表达式是一种 Vue 的模板语法；

• 作用：利用表达式进行插值，渲染到页面中；

  • 表达式：是可以被求值的代码，JS引擎会将其计算出一个结果；

    

• 语法：{{ 表达式 }}；

  • 例：

    <h3>{{ title }}</h3>
    <p> {{ obj.name }} </p>
    

• 注意：

  • 使用的数据必须存在，即必须在声明的Vue变量中有创建；

  • 两个大括号中支持的是表达式，而非语句，如if、for；

  • 不能在标签属性中使用插值表达式，以下是错误用法；

    <p title="{{ username }}">我是p标签</p>
    

1.4 响应式特性

• Vue对数据的响应式处理；

  • 响应式：数据变化，视图自动更新；

• 以修改Vue实例对象中的data属性为例，在浏览器的控制台中按照以下语法输入时，视图中的数据会发生对应变化；

  • 访问数据：实例.属性名
  • 修改数据：实例.属性名 = 值

• Vue聚焦于数据，以数据驱动视图；

  

• 使用 Vue 开发，关注业务的核心逻辑，根据业务修改数据即可。

1.5 开发者工具

• 安装插件调试Vue应用；

• 下载地址：极简插件官网_Chrome插件下载_Chrome浏览器应用商店 (zzzmh.cn)；

  

• 步骤：

  1. 在上面的下载地址中搜索vue，选择vue.js Devtools，选择推荐下载；

  2. 得到一个压缩包，进行解压；

  3. 在不同的浏览器上安装Vue的开发者工具：

     • Edge浏览器：

       

     • Chrome浏览器：方法同上。如果插件不能导入成功，直接在Chrome的应用商店下载就行。

  4. 将代码文件在VSCode打开后，再在浏览器运行，就可以看到有Vue调试工具：