01-Vue.js安装与初体验

一、初识Vue

• Vue是一个渐进式框架——可以将Vue作为应用的一部分嵌入其中

• Vue有很多开发中常见的高级功能
  1. 解耦视图和数据
  2. 虚拟DOM
  3. 状态管理
  4. 前端路由技术
  5. 可复用的组件
• 学习Vue一定需要具备HTML、CSS、JavaScript基础

二、安装Vue

官方网站：https://cn.vuejs.org/v2/guide/installation.html

方法一：直接CDN引用

• CDN地址参考：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



<!-- 生产环境版本，优化了尺寸和速度 -->

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  

方法二：下载和引用

• 开发环境：https://vuejs.org/js/vue.js

• 生产环境：https://vuejs.org/js/vue.min.js

方法三：NPM安装

• 说明：学习webpack和CLI后主要使用此方式进行安装

三、Vue.js初体验

1、首先使用方法二的下载开发版本的vue.js到本地

2、将Vue.js文件放入准备写代码的文件夹，然后用VScode打开

就可以开始使用Vue了

3、新建一个html文档，在body中输入以下内容：

• el属性：决定了Vue对象挂载到哪一个元素

• data属性：存储一些数据，可以自己直接定义，也可能来自网络，从服务器加载

4、在浏览器中运行，发现{{message}}成功传入在app实例中定义的数据

• 这种处理方法，实现了数据与页面分离。当修改实例中的内容时，页面会随之改变，这也就是Vue的响应式。

• 接着我们再来体验一下v-for，将arr数组中的内容使用无序列表输出：

、

 

• 输出效果：

简单的几句代码，就将数组定义的数据输出到页面中了，内容变动时，可直接修改arr中的数据，页面也会随之改变，十分的方便。

 

• 再来体验一下vue方法的定义方式：

 

• 输出效果：

在app实例中的methods中定义了click方法add增加与sub减少，使得点击+号或-号时，counter会随着点击操作而增加或减少。

其中，v-on:click也可以用@click代替。

 

四、Vue中的MVVM

MVVM:Model View ViewModel

 

DOM Listeners:监听页面DOM

Data Bindings：数据回调

 

图中绿色方块在代码中为 new Vue，右边的Model为Vue实例中定义的data等数据

 

五、创建Vue实例传入的Options

Vue实例中主要传入以下三种options：

• el:

    类型：string | HTMLElement

    作用：决定Vue实例管理的DOM

• data：

    类型：Object | Function（data必须是一个函数）

    作用：Vue实例对应的数据对象

• methods:

    类型：{[key:string]:Function}

    作用：定义属于Vue的方法，可以在其他地方调用，也可以在指令中使用