vue.js是一个用于创建web交互页面的库

从技术角度讲，vue专注于MVVM模型的viewModel层，它通过双向数据绑定把view层和model层连接起来，实际DOM封装和输出格式都被抽象为Directive和Filters。

概念综述：

ViewModel

一个同步model和view的对象，在vue中，每个vue实例都是一个ViewModel。他通过构造函数vue或其他子类被创建出来的。

var vm=new Vue({/*options*/})

这是你作为一个开发者在使用vue时主要打交道的对象。

View（视图）

被vue实例管理的DOM节点

vm.$el    //The View

vue使用基于Dom的模板，每个vue实例都关联着一个DOM元素。当一个vue实例被创建时，他会地柜遍历根元素的所有节点，同时完成必要的数据绑定，当这个视图被编译后，他会自动相应数据变化。

在使用vue时，除了已定义指令，几乎不必直接接触DOM。当数据发生变化时，视图将会自动发生更新，更新精确到一个文字节点。同时为了更好地性能，这些更新是批量异步执行的。

Model（模型）

是一个轻微改动过的原生js对象

vm.$data

vue中的模型就是普通的js对象，也可以叫做数据对象，一旦某对象被作为Vue实例中的数据，他就成为一个“反应式“的对象了，你可以操作他们的属性，同时正在观察他的Vue实例也会提示，每当数据变化时，视图都会在下一帧更新。

vue实例代理了他们观察到的数据对象的所有属性，所以一旦一个对象{a:1}被观察，那么vm.$data.a和vm.a将会返回相同的值，而设置vm.a=2则也会修改vm.$data

<body>

	<div id="div1">{{a}}</div>

</body>

<script>

	var vm=new Vue({

		el:"#div1",

		data:{

			a:1

		}

	});

</script>

　　

一旦数据被观察，vue就不会再侦测到新加入或者删除的属性了，作为弥补，会为观察的对象增加$add,$set和$delete方法

下面是vue数据观测机制实现的高层概览

Directives（指令）

带特殊前缀的html属性，可以让vue对一个Dom元素做各种处理

<div v-text="message"></div>

　　这里的div元素有一个v-text指令，其值为message。vue会让该div的文本内容与vue实例中的message属性保持一致。

Directives可以封装任何DOM操作，比如v-attr会操作一个元素的特性；v-repeat会基于数组来复制一个元素；v-on会绑定事件等。

Mustache风格绑定

也可以使用mustache风格的绑定，不管在文本还是在属性中，他们在底层会被转换成v-text和v-attr的指令。

比如

<div id="person-{{id}}">Hello{{name}}</div>

　　

这主要注意一些事项

一个<img>的src属性在赋值时会产生一个HTTP请求，所以当模板在第一次被解析时会产生404请求。这种情况适合用v-attr。

IE在解析html时会移除非法的内联style属性，所以如果你想支持IE，请在绑定内联css的时候始终使用v-style。

你可以使用三对花括号来回避html代码，而这种写法会在底层转换为v-html；

{{{safeHTMLString}}}

　　这种写法会留下XSS攻击隐患，所以建议只对绝对信任的数据来源使用三对花括号的写法，或者先通过自定义的过滤器filter对不可信任的html进行过滤

最后，你可以在你的mustache绑定里加入*来注明这里是一个一次性撰写的数据，这样的话他就不会相应后续的数据变化：

{{*onlyOnce}}

　　过滤器（Filters）

过滤器是用于在更新视图之前处理原始数值的函数。他们通过一个“管道”在指令或绑定中进行处理；

<div>{{message | capitalize}}</div>

　　这样在div文本内容被更新之前，message的值会先传给capitalize函数处理。

Components（组件）

在vue中，每个组件都是一个简单的vue实例。一个树形嵌套的各种组件就代表了你的应用程序的各种接口。通过Vue.extend返回的自定义构造函数可以把这些组件实例化，不过更加 推荐声明式的用法是通过Vue.component(id,constructor)注册这些组件，一旦组件被注册，他们就可以在vue实例的模板中以自定义元素形式使用了

例如

<my-component>
<!--internals handled by my-component-->
</my-compomnent>

　　这个简单的机制使得我们可以以类似文本web Components的声明形式对Vue组件进行复用和组合，同时无需最新版本的浏览器。

javascript-vue介绍的更多相关文章

  1. Vue.js是什么，vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  2. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  3. vue——介绍和使用

    一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...

  4. JavaScript入门介绍(二)

    JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...

  5. JavaScript入门介绍(一)

    JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...

  6. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  7. javascript的介绍，实现和输出以及语法-javascript学习之旅（1）

    javascript的介绍 : 1.javascript死互联网最流行的脚本语言,可用于web和html,并且可用于服务器,pc和移动端 2.javascript脚本语言: 1.是一种轻量级的脚本语言 ...

  8. javascript的介绍、javascirpt的存在形式、javascript注释

    本文内容: javascript的介绍 javascirpt的存在形式 javascript注释 javascript的介绍: javascript是一种解释性脚本语言 它的用途是给html网页增加动 ...

  9. 《javascript高级程序设计》读书笔记（一）javascript简单介绍

    第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...

  10. JavaScript — event介绍以及兼容处理

    JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个 ...

随机推荐

  1. 发布日志 - kratos v2.0.4 版本发布

    V2.0.4 Release Release v2.0.4 · go-kratos/kratos (github.com) 新的功能 proto-gen-http 工具在生产代码时如果 POST/PU ...

  2. git clone 设置临时的 proxy

    export ALL_PROXY=socks5://127.0.0.1:1086 git clone --depth 1 https://github.com/xxx/xxx.git unset AL ...

  3. 多个mysql同时运行

    一.准备 mysql下载地址 https://dev.mysql.com/downloads/mysql/ 1.下载 2.解压缩 3.创建my.ini [Client] port = 3307 [my ...

  4. 使用easyui进行上左右布局

    在后台管理系统开发的过程中,上左右的布局是最常见的页面布局方式,现在我们来看看使用easyui这个jquery前端框架如何快速搭建一个可用的页面框架. 1.在页面中引入easyui所需的文件 1 &l ...

  5. squid缓存代理

    目录: 一.Squid 代理服务器 二.Squid 代理安装 三.搭建传统代理 四.搭建透明代理 五.ACL访问控制 六.Squid日志分析 七.反向代理 一.Squid 代理服务器Squid 主要提 ...

  6. java基础语法以及进制的转换

    关键字 关键字: 被Java语言赋予特定含义的单词 关键字特点 组成关键字的字母全部小写 关键字注意事项 goto和const作为保留字存在,目前并不使用 类似IDEA这样的集成工具,针对关键字有特殊 ...

  7. nginx proxy_next_upstream 与openresty balancer.set_more_tries的使用

    背景 我们这边网关服务使用的 kong,前段时间上线一个服务,这个服务它报错了,产生了502的错误码,追查这个报错的时候发现了网关服务的两个可疑的地方,第一个疑点是我们在Kong上配置的 Retrie ...

  8. Java从入门到精通（第5版）上半部分

    1.1java简介 先起了oak 橡树 这个名字,因为商标原因改为爪洼岛谐音的Java 一次编写,到处运行 java如何运行 java程序既是编译型又是解释型 Java版本 Java SE 标准版(开 ...

  9. 【PHP】数组按照字母排序

    /** * 将数组按字母A-Z排序 * @return [type] [description] */ private function chartSort($list) { // $user=$th ...

  10. Java面向对象系列（6）- 封装详解

    封装 该露的露,该藏得藏 我们程序设计要追求"高内聚,低耦合".高内聚就是类得内部数据操作细节自己完成,不允许外部干涉:低耦合:仅暴露少量得方法给外部使用 封装(数据得隐藏) 通常 ...