Js 框架之Vue .JS学习记录 ① 与Vue 初识

目录

与 Vue.js 认识

VUE.JS是个啥？有啥好处？

Vue 的目标

战前准备  VUE.JS环境

VUE.JS 尝试一下，你就明白

第一步 实例化VUE 对象

第二步VueAPP 调用数据 函数  （HTML 展示）

---

与 Vue.js 认识

VUE.JS是个啥？有啥好处？

就是实现  数据与视图实时绑定的前端框架(个人的初学理解)

（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

自底向上设计是一种设计程序的过程和方法，就是先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能，

实际上是一种自底向上构造程序的过程。

自底向上设计方法是根据系统功能要求，

从具体的器件、逻辑部件或者相似系统开始

，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。

该方法是从底层（具体部件）开始的，实际中无论是取用已有模块还是自行设计电路，

其设计成本和开发周期都优于自顶向下法   

但由于设计是从最底层开始的，所以难以保证总体设计的最佳性，例如电路结构不优化、能够共用的器件没有共用。

应当说明的是，自底向上法并非一切从硬件开始设计，设计之初，依然要了解系统要求，设计中要保证系统功能的实现。所谓自底向上主要指在设计功能块时，应考虑如何使用现有器件。

实际上在现代许多设计中，是混合使用自顶向下法和自底向上法的，因为混合应用可能会取得更好的设计效果。

一般来说，自顶向下设计方法适用于设计各种规模的数字系统，而自底向上设计方法则更适用于设计小型数字系统。

Vue 的目标

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

即 简单接口 实现 数据交互时 页面视图，数据的 绑定响应。

战前准备  VUE.JS环境

点击下载 →vue.js 下载地址

国内CDN:

https://cdn.staticfile.org/vue/2.2.2/vue.min.js

其他CDN

• unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

VUE.JS 尝试一下，你就明白

第一步 实例化VUE 对象

Vue 构造器中el 参数:

是 DOM 元素中的 id。在例子中 id 为 vueAppId，

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

data 用于定义属性，

实例中有三个属性分别为：

userId: 12345,

                    userName: "EM-Baobao",

                    userPw: "123123"

methods 用于定义的函数，

可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值

---

var oVueName = new Vue({
				el: '#vueAppId', // APP 容器绑定
				data: {  // APP中存储数据变量的对象
					userId: 12345,// APP变量 userId
					userName: "EM-Baobao",// APP变量 userName
					userPw: "123123"// APP变量 userPw
				},
				methods: {// APP中存储函数的对象 

// APP函数 Login

					Login: function() {
						return "您好" + this.userName + " 女士/先生 欢迎您登陆！";
					}

				}
			})

---

第二步VueAPP 调用数据 函数  （HTML 展示）

<!-- APP容器 -->
		<div id="vueAppId">
			<!-- 调用APP 变量 userName -->
			<h1>Name : {{userName}}</h1>
			<!-- 调用APP 变量 userId -->
			<h2>ID : {{userId}}</h2>
			<!-- 调用APP 变量 userPw -->
			<h2>pw:{{ userPw}}</h2>
			<!-- 调用APP 函数 Login() -->
			<p>{{Login()}}</p>
		</div>