vue入门（一）

Love The Way You Lie 2023-01-05 12:28 186阅读 0赞

## 一、[Vue.js 是什么][Vue.js]？ ##

[Vue.js][Vue.js 1]是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

## 二、MVVM模式 ##

下图不仅概括了MVVM模式（Model-View-ViewModel），还描述了在Vue.js中ViewModel是如何和View以及Model进行交互的。

![MVVM][]

**ViewModel是Vue.js的核心，它是一个Vue实例。**Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。  
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；  
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

## **三、Vue入门安装** ##

官网地址：[https://cn.vuejs.org/][https_cn.vuejs.org]

1、引入CDN

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

2、下载到本地并引入本地文件

开发环境 https://vuejs.org/js/vue.js  
 生产环境 https://vuejs.org/js/vue.min.js

>   <script src="vue.js"></script>

3、NPM安装

> \# 最新稳定版 $ npm install vue

##  四、体验vue.js的第一个程序 ##

> <!DOCTYPE html>
> 
> <html lang="en">
> 
>  
> 
> <head>
> 
>     <meta charset="UTF-8">
> 
>     <meta name="viewport" content="width=device-width, initial-scale=1.0">
> 
>     <title>v-on</title>
> 
>     <script src="vue.js"></script>
> 
> </head>
> 
> <body>
> 
> <div id="app">  
>         <h2>\{ \{message\}\}</h2>  
>     </div>  
>     <script>
> 
>       // 创建一个Vue的实例
> 
>       // 当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
> 
>       // 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
> 
>      let vm = new Vue(\{  
>             el:'\#app',
> 
>             // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的  
>             data:\{// data 属性中，存放的是 el 中要用到的数据  
>                 message:"Hello Vue!",// 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】  
>             \}  
>         \})  
>     </script>
> 
> </body>
> 
> </html>

**1）构造器**

> // 建立Vue实例  
> var vm = new Vue(\{  
>     // 选项  
> \})

**2）实例的属性和方法**

每个Vue.js实例在被创建之前都要经过一系列的初始化过程，在初始化过程中加入一些data属性，即表示此实例的一些响应事件或数据属性等，如：

> var data = \{ a:1 \}  
> var vm = new Vue(\{  
>     el: "\#app",  
>     data:\{  
>                message:"Hello Vue!",  
>      \}  
> \})  
>    
> vm.$data === data;    // true  
>    
> vm.$watch('a', function(newValue, oldValue)\{  
>     // 这个回调将在 vm.a 改变后调用  
> \})

[Vue.js]: https://cn.vuejs.org/v2/guide/#Vue-js-%E6%98%AF%E4%BB%80%E4%B9%88
[Vue.js 1]: https://github.com/vuejs/vue
[MVVM]: /images/20221119/e1c237e3252c4df98a26847e578bf749.png
[https_cn.vuejs.org]: https://cn.vuejs.org/