javascript-vue介绍
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介绍的更多相关文章
- Vue.js是什么,vue介绍
Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- vue——介绍和使用
一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...
- JavaScript入门介绍(二)
JavaScript入门介绍 [函数] 函数function 是Javascript的基础模块单元,用于代码的复用.信息影藏和组合调用. function a(){} 函数对象Function Lit ...
- JavaScript入门介绍(一)
JavaScript入门介绍 [经常使用的调试工具][w3school.com.cn在线编辑] [Chrome浏览器 开发调试工具]按F121.代码后台输出调试:console.log("t ...
- Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖
1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...
- javascript的介绍,实现和输出以及语法-javascript学习之旅(1)
javascript的介绍 : 1.javascript死互联网最流行的脚本语言,可用于web和html,并且可用于服务器,pc和移动端 2.javascript脚本语言: 1.是一种轻量级的脚本语言 ...
- javascript的介绍、javascirpt的存在形式、javascript注释
本文内容: javascript的介绍 javascirpt的存在形式 javascript注释 javascript的介绍: javascript是一种解释性脚本语言 它的用途是给html网页增加动 ...
- 《javascript高级程序设计》读书笔记(一)javascript简单介绍
第一章:javascript简单介绍 Netscape Navigator 开发的javascript Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. ...
- JavaScript — event介绍以及兼容处理
JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个 ...
随机推荐
- golang context包
go context标准库 context包在Go1.7版本时加入到标准库中.其设计目标是给Golang提供一个标准接口来给其他任务发送取消信号和传递数据.其具体作用为: 可以通过context发送取 ...
- QT学习日记篇-02-QT信号和槽
课程大纲: <1>给控件改名字 随着UI界面的控件变多,如果使用系统自带的名称,后期会让人不明觉厉,说白了,就是掌握C++的命名规则:易懂,条例清晰,人性化 方法:直接点击控件,进入右侧对 ...
- react + layui 坑总结
与react 结合的时候,layui 是纯dom操作,而react是虚拟dom ,二者的结合难免会出现诸多问题. 1 select 下拉框 默认值的修改要通过defaultValue 属性来修改,并且 ...
- jQuery扩展方法 (插件机制)
jQuery.extend(object) 扩展jQuery对象本身. 用来在jQuery命名空间上增加新函数. 在jQuery命名空间上增加两个函数: <script> jQuery.e ...
- Django项目中的模板继承
1. 定义一个基础的页面HTML文件base.html <!DOCTYPE html> <html lang="en"> <head> < ...
- 痞子衡嵌入式:MCUXpresso IDE下将应用程序RW段分散链接的几种方法
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是MCUXpresso IDE下将应用程序RW段分散链接的几种方法. 早期的 MCU 芯片,一般都会嵌入内部 Flash 和 RAM,并且 ...
- 《Go语言圣经》阅读笔记:第二章程序结构
第二章 程序结构 2.1 命名 在GO语言中,所有的变量名.函数.常量.类型.语句标号.包名都遵循一个原则: 名字必须以字母或者下划线开头,后面紧跟任意数量的字母数字下划线.区分大小写. 在GO语言中 ...
- vuex前端工程化之动态导入文件--require.context( )
随着项目的复杂,文件结构越来越多,Store中modules中的文件也越来越多,如果一个一个加载是不是很麻烦呢? 先看一个项目中store项目结构: 过去都是通过import分别引入文件: 1 imp ...
- MobaXterm - 渗透之旅的终端神器
一.背景 1.SSH概念 如果想要连接Linux服务器来进行文件之间的传送,那就需要一个Secure Shell软件(简称SSH的)来完成.从概念上来讲,SSH其实是一个网络协议,允许通过网络连接到L ...
- 【TP3.2.3】addAll方法的坑
问题:做一个导入Excel到数据库的功能中需要用到addAll功能,但是每次执行到addAll()时都会报错,如下 Insert value list does not match column li ...