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组件进行复用和组合,同时无需最新版本的浏览器。

时间: 2024-10-11 21:59:56

javascript-vue介绍的相关文章

如何在程序开发项目中选择合适的 JavaScript 框架,节省时间和成本的9款极佳的JavaScript框架介绍

从技术上来看,iOS,Android 和 Windows Phone 上的移动应用是使用不同的程序语言开发的,iOS 应用使用 Objective-C,Android 应用使用 Java,而 Windows Phone 应用使用 .NET. .随着 JavaScript,CSS 和 HTML 知识技能的提升,相信你也可以构建一个超赞的移动应用.在这篇博客里,我们将会介绍一些极好的 JavaScript 移动应用程序开发框架. 说到网络开发,就不得不说 JavaScript,这是一款很有前途的程序

《javascript高级程序设计》读书笔记(一)javascript简单介绍

第一章:javascript简单介绍 Netscape Navigator 开发的javascript   Javascript的实现有三部分: 1.核心(ECMAScript):提供核心语言功能. 2.文档对象模型(DOM):提供訪问和操作网页内容的方法和接口. 3.浏览器对象模型(BOM):提供和浏览器交互的方法和接口. Web浏览器仅仅是ECMAScripr实现的可能宿主环境之中的一个. 五大主流Web浏览器(IE,Firefox,Safari,Chrome和Opera) 第二章:在Htm

用面向对象的Javascript来介绍一下自己

看了一道题目<用面向对象的Javascript来介绍一下自己>,然后自己觉得挺好玩的,所以就编写如下的代码. // HELPER function extend(sup, overrides) { var sub = overrides && overrides.constructor || function() { sup.apply(this, arguments); }; var fn = function() {}; var subp; fn.prototype = n

非阻塞式JavaScript脚本介绍

JavaScript 倾向于阻塞浏览器某些处理过程,如HTTP 请求和界面刷新,这是开发者面临的最显著的性能问题.保持JavaScript文件短小,并限制HTTP请求的数量,只是创建反应迅速的网页应用的第一步.一个应用程序所包含的功能越多,所需要的JavaScript 代码就越大,保持源码短小并不总是一种选择.尽管下载一个大JavaScript 文件只产生一次HTTP 请求,却会锁定浏览器一大段时间.为避开这种情况,你需要向页面中逐步添加JavaScript,某种程度上说不会阻塞浏览器.非阻塞脚

Javascript来源介绍

很多人学习javascript语言的时候不知道他到底怎么来的,他和其他的语言是否一样,具体是干嘛的,李书记php博客针对这些问题写了以下几点具有针对性的表现出javascript定义.背景.来源公司等相关的总结,希望对大家有所帮助!         1: 定义 基于事件和对象驱动,并具有安全性能的脚本语言. 2: 出现背景 上世纪90年代,在美国有出现,当时有上网的环境,并且有网站服务在运行. 3:注册服务 javascript来源介绍 上图涉及的问题: ① 带宽非常浪费,往往由于一个项目部正确

十款优秀的在线JavaScript工具介绍

JavaScript是Web开发者不可或缺的一项技能,它可以为你的网站添加丰富的交互功能和绚丽的视觉效果,以此来增强用户体验. 本文整理了10款非常优秀的在线JavaScript代码工具,涵盖编辑.压缩.美化.调试等功能,随时随地使用,大大节省你的开发成本和时间. 1. jsfiddle.net 在线编辑工具——由HTML编辑器.CSS编辑器.JavaScript编辑器和输出界面4个部分组成,你可以方便地进行代码测试. 2. jsbeautifier.org 在线美化工具——该工具可以处理你的凌

Vue【第1章】:Vue介绍与安装

内容概要: Vue介绍 安装Vue 一.Vue介绍 Vue是一套用于构建用户界面的渐进式框架.Vue的核心库只关注视图层.是一个单页面框架,是基于模块化组件化的开发模式. 二.安装Vue 1. 安装node.js nodejs目前使用nodejs最多的场景是前端构建工具,比如webpack.gulp.而Vue的组件要编译势必要借助webpack,所以肯定要提供npm的安装方式.目前Vue版本为2.5.x,配合nodejs的8.13.x版本使用.所以,我们安装一下nodejs8.14版本 1.1

1、Vue介绍、环境搭建、项目运行

1.Vue介绍 Vue和Angular.React都是前端框架,特点: 1.单页面框架: 2.基于模块化组件化的开发模式: 3.Vue简单 灵活 高效 国内的中小企业里面用的非常多. 2.开发环境搭建 1.必须要先安装nodejs(自带NPM工具) https://cn.vuejs.org/v2/guide/installation.html 安装后,命令行验证安装情况: 2.搭建vue的开发环境 ,安装vue的脚手架工具vue-clie 官方命令行工具 npm install --global

JavaScript — event介绍以及兼容处理

JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个特定的事件?可以想象在一张纸上的一组同心圆,如果把手指放在圆心上,那么你的手指指向的不是一个圆,而是纸上的所有圆.即在点击一个按钮时,不仅点击了按钮,也点击了整个页面. 事件流描述的是从页面中接收事件的顺序.不过IE 和 Netscape 开发团队提出的想法差不多完全相反. IE的事件流是事件冒泡流

vue介绍——模板语法

模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. 在底层的实现上,Vue将模板编译成虚拟dom渲染函数.结合响应式系统,Vue能够智能的重新计算出最少需要重新渲染多少组件,并把dom操作次数减少到最少. 如果熟悉虚拟dom并且偏爱JavaScript的原始力量,也可以不用模板,直接写渲染函数,使用可选的JSX语法. 插值--文本 数据绑定最常用的就