初识Vue框架

冷不防 2022-11-01 05:56 177阅读 0赞

### 文章目录 ###

*   *  一、Vue是什么
     *  二、Vue的安装
     *   *  1. 独立版本
         *  2. 使用CDN方法
     *  三、Vue起步

## 一、Vue是什么 ##

*  Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
 *  Vue 只关注视图层， 采用自底向上增量开发的设计。
 *  Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

## 二、Vue的安装 ##

### 1. 独立版本 ###

在 Vue.js 的官网上直接下载 [vue.min.js ][vue.min.js] 并用 `<script>` 标签引入。

### 2. 使用CDN方法 ###

*  Staticfile CDN（国内） : [https://cdn.staticfile.org/vue/2.2.2/vue.min.js][https_cdn.staticfile.org_vue_2.2.2_vue.min.js]
 *  unpkg：[https://unpkg.com/vue/dist/vue.js][https_unpkg.com_vue_dist_vue.js], 会保持和 npm 发布的最新的版本一致。
 *  cdnjs : [https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js][https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js]

## 三、Vue起步 ##

每个Vue应用都需要通过实例化Vue来实现，语法格式如下：

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

以下为Vue实例，我们主要关注其构造器中的内容：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script>
    	<body>
    		<div id="app">
    			<p>{ { message}}</p>
    			<a href="#">{ { details()}}</a>
    		</div>
    		<script type="text/javascript">
    			// 创建一个 Vue 实例
    			var vm = new Vue({ 
    				// 对应 DOM 中的 id,意味着从接下来开始操作其内部（外部不受影响）
    				el: "#app",
    				// 定义数据对象
    				// data 用于定义属性,实例中有 message 属性
    				data: { 
    					message: "Hello"
    				},
    				// methods 用于定义的函数，可以通过 return 来返回函数值。
    				// { { }} 用于输出对象属性和函数返回值。
    				methods: { 
    					details: function(){ 
    						return this.message + "Vue";
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

[vue.min.js]: https://vuejs.org/js/vue.min.js
[https_cdn.staticfile.org_vue_2.2.2_vue.min.js]: https://cdn.staticfile.org/vue/2.2.2/vue.min.js
[https_unpkg.com_vue_dist_vue.js]: https://unpkg.com/vue/dist/vue.js
[https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js]: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js