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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
javascript实现五星评分功能
Nov 10 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
高效Web开发的10个jQuery代码片段
Jul 22 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
微信小程序 检查接口状态实例详解
Jun 23 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
JavaScript实现新年倒计时效果
Nov 17 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
TypeScript 运行时类型检查补充工具
Sep 28 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的FTP学习(一)
2006/10/09 PHP
使用PHP批量生成随机用户名
2008/07/10 PHP
PHP设计模式之适配器模式代码实例
2015/05/11 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
php 获取文件行数的方法总结
2016/10/11 PHP
Javascript里使用Dom操作Xml
2007/01/22 Javascript
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
一个获取第n个元素节点的js函数
2014/09/02 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
浅谈$(document)和$(window)的区别
2015/07/15 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
vue 进阶之实现父子组件间的传值
2019/04/26 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
基于python的列表list和集合set操作
2019/11/24 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
Html5 video标签视频的最佳实践
2020/02/26 HTML / CSS
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
写好自荐信的技巧
2013/11/08 职场文书
优秀员工自荐书
2013/12/19 职场文书
家长对小学生的评语
2014/01/28 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
教师党员一句话承诺
2014/03/28 职场文书
小学师德师风整改措施
2014/10/27 职场文书
辛亥革命观后感
2015/06/02 职场文书
法人身份证明书
2015/06/18 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python