目录

与 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

<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>

Js 框架之Vue .JS学习记录 ① 与Vue 初识的更多相关文章

  1. 基于 Egg.js 框架的 Node.js 服务构建之用户管理设计

    前言 近来公司需要构建一套 EMM(Enterprise Mobility Management)的管理平台,就这种面向企业的应用管理本身需要考虑的需求是十分复杂的,技术层面管理端和服务端构建是架构核 ...

  2. Node.js框架之Egg.js

    Node.js是我前段时间接触的一个JavaScript的服务端语言,感觉还是挺有意思的. 也许有人说,你学这么多,学的过来吗?或者说学的太多,专而不精,有必要这样吗? 其实,我个人认为,自从我进入I ...

  3. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  4. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  5. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  6. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  7. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  8. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  9. (三)underscore.js框架Objects类API学习

    keys_.keys(object)  Retrieve all the names of the object's properties. _.keys({one: 1, two: 2, three ...

随机推荐

  1. python模块的使用

    这位老师的文章说的很清楚:模块 这里我只说一下,我在使用过程中的一些注意事项. 比如,我创建了一个包,该包下面有两个模块:model1和model2,如下图 那么我们再python中怎样去使用自己创建 ...

  2. Python母版使用

    设定base.html为母版,母版是页面的公共部分,可以减少代码冗余: 母版中变化的部分用:  {% block page-main % }  <!--page-mains是自己起的名称--&g ...

  3. Hadoop-Impala学习笔记之管理

    配置参数管理 待补充... 资源分配管理(Admission Control) Impala有资源池的概念,允许某些查询在特定的资源池执行,不过在白天不跑批/晚上不跑adhoc的DSS系统中,该机制并 ...

  4. 【题解】Luogu P4381 [IOI2008]Island

    原题传送门 题意:求基环树森林的直径(所有基环树直径之和) 首先,我们要对环上所有点的子树求出它们的直径和最大深度.然后,我们只用考虑在环上至少经过一条边的路径.那么,这种路径在环上一定有起始点和终点 ...

  5. sshpass安装使用

    部署sshpass1.下载wget http://sourceforge.net/projects/sshpass/files/latest/download -O sshpass.tar.gz 2. ...

  6. Linux性能优化-理解平均负载

    1 平均负载含义 当系统变慢的时候,我们一般使用 top 或 uptime 命令来查看系统平均负载情况. 正确定义:单位时间内,系统中处于可运行状态和不可中断状态的平均进程数.错误定义:单位时间内的c ...

  7. java截取2个指定字符之间的字符串

    /** * 截取字符串str中指定字符 strStart.strEnd之间的字符串 * * @param string * @param str1 * @param str2 * @return */ ...

  8. {408} client block at 0x005D4D10, subtype 0, 64 bytes long.a CButton object at $005D4D10, 64 bytes long

    现象:mfc动态生成了很多控件,new的,退出时也delet了,但是还是出现了标题的错误 解决:在任何可以执行的地方加代码: CMFCVisualManager ::SetDefaultManager ...

  9. python3中argparse模块

    1.定义:argparse是python标准库里面用来处理命令行参数的库 2.命令行参数分为位置参数和选项参数:         位置参数就是程序根据该参数出现的位置来确定的              ...

  10. kali网络配置

    touch 1.txt#创建一个文件 配置网卡 auto eth0iface eth0 inet staticaddress 172.16.30.102#要设置的主机IP地址netmask 255.2 ...