Vue.js基础知识汇总


Posted in Javascript onApril 27, 2016

介绍

vue.js 是用来构建web应用接口的一个库

技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式。实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters)

在哲学领域内,尽量让MVVM数据绑定API尽可能简单。模块化和可组合性也是重要的设计考虑。vue不是一个全面的框架,它被设计成简单的和灵活的。你可以用它快速原型,或混合和匹配与其他库定义前端堆栈。

Vue。js的API是参考了AngularJS、KnockoutJS Ractive.js Rivets.js。尽管有相似之处,我相信Vue.js提供一个有价值能够让你在现在的一些现有框架中舍取其价值

即使你已经熟悉其中的一些术语,建议您通过以下概念的概述,因为你的这些术语的概念可能在Vue.js的下文中有所不同

概念概述

ViewModel

一个对象,同步模型和视图. 在Vue.js中,ViewModels是实例化的Vue的构造器或者是它的子类

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

这是主要的对象,你会与作为开发人员在使用Vue.js交互。更多细节请参阅Class: Vue.

View

用户看到的实际HTML / DOM

vm.$el // The View

当使用Vue.js时候,除了自己自定义的指令你几乎不会触碰到DOM的操作,当数据更新后视图的更新将会自动的触发,视图的更新可以很精确的到每一个testNode节点,他们也批处理和异步执行从而提供更好的性能。

Model

这是一个略微修改的Javascript对象

vm.$data // The Model

在Vue.js中,模型只是简单的Javascript对象,数据对象,你能够操控他们的属性和视图模型,观察他们的从而能获取通知后更改。Vue.js在data对象胡总用ES5的 getter/setter 把属性转化了,它允许直接操作而不需要脏检查。

data对象在适当的时候会产生突变,所以修改它与通过引用修改vm.$data是一样的效果。这也方便了多个ViewModel实例观察同一块数据。

技术细节请看Instantiation Options: data.

Directives

私有的HTML属性是告诉Vue.js做一些关于DOM的处理

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

这里的div元素有一个v-text的指令,值是message.意思是告诉Vue.js 保持这个div节点的内容与viewMode中的message属性同步

指令可以封装任意DOM操作。例如v-attr 操作一个属性元素,v-repeat克隆基于数组的一个元素,v-on附加事件监听,我们稍后讨论.

Mustache Bindings

您还可以使用mustache-style绑定,在文本和属性。他们翻译成v-text v-attr指令。例如:

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

虽然方便,但有几件事你需要注意的:

如果设置一个image的src属性的时候,会发送一个HTTP请求,所以当模板是第一次解析出现404,此时用v-attr比较好

当解析HTML的时候,Internet Explorer将会删除无效的内部style属性,所以我们想要支持IE绑定内联的CSS 我就总是用v-style

在v-html内部,非转义的HTML你能用三个大括号{{{像这样}}}处理,但是这样会有潜在的XSS攻击,能打开windows,所以建议是绝对安全的数据全的时候才这样做,或者通过自定义管道过滤器清理不可信的HTML

Filters

在更新视图之前可以用函数来处理这个原始的数据。他们正在用一个“管道”指令或绑定:

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

现在在div的文本内容要更新之前,这个message的值将会通过capitalize函数处理。详细请看Filters in Depth.

Components

在Vue.js,一个组件是一个简单的视图模型构造函数,通过Vue.component(ID, constructor)注册。通过一个关联的ID,可以嵌套另外的视图模型的模板的v-component指令。这种简单的机制使声明视图模型的重用和组合方式类似于Web组件,而不需要最新的浏览器或重型polyfills。通过将应用程序分解成更小的组件,其结果是一个高度解耦和可维护的代码库。更多细节,请参阅Composing ViewModels.

A Quick Example

<div id="demo">
  <h1>{{title | uppercase}}</h1>
  <ul>
    <li
      v-repeat="todos"
      v-on="click: done = !done"
      class="{{done ? 'done' : ''}}">
      {{content}}
    </li>
  </ul>
</div>
var demo = new Vue({
  el: '#demo',
  data: {
    title: 'todos',
    todos: [
      {
        done: true,
        content: 'Learn JavaScript'
      },
      {
        done: false,
        content: 'Learn vue.js'
      }
    ]
  }
})

粗略翻译,有错误请指出

Javascript 相关文章推荐
js option删除代码集合
Nov 12 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
BootStrap3使用错误记录及解决办法
Dec 22 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
VUE实现一个分页组件的示例
Sep 13 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue select 绑定动态变量的实例讲解
Oct 22 Javascript
JS onkeypress兼容性写法详解
Apr 27 #Javascript
使用vue.js开发时一些注意事项
Apr 27 #Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 #Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 #Javascript
常用原生JS兼容性写法汇总
Apr 27 #Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 #Javascript
跨域资源共享 CORS 详解
Apr 26 #Javascript
You might like
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
调试Node.JS的辅助工具(NodeWatcher)
2012/01/04 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(二)
2016/09/14 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python算法应用实战之队列详解
2017/02/04 Python
Python实现的多线程http压力测试代码
2017/02/08 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
HTML5实现WebSocket协议原理浅析
2014/07/07 HTML / CSS
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
Quiksilver美国官网:始于1969年的优质冲浪服和滑雪板外套
2020/04/20 全球购物
应届生服装设计自我评价
2013/09/20 职场文书
护理专业应届毕业生推荐信
2013/11/15 职场文书
毕业生个人投资创业计划书
2014/01/04 职场文书
小学班主任工作随笔
2015/08/15 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书