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 相关文章推荐
开发跨浏览器javascript常见注意事项
Jan 01 Javascript
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
类似php的js数组的in_array函数自定义方法
Dec 27 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
Aug 19 Javascript
Vue.js -- 过滤器使用总结
Feb 18 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
JS实现json对象数组按对象属性排序操作示例
May 18 Javascript
微信小程序实现点赞、取消点赞功能
Nov 02 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 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基础学习笔记
2007/03/18 PHP
初品cakephp 入门基础
2012/02/16 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
用JS实现3D球状标签云示例代码
2013/12/01 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
浅谈jquery的html方法里包含特殊字符的处理
2016/11/30 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
详解在Vue中如何使用axios跨域访问数据
2017/07/07 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python保存数据到本地文件的方法
2018/06/23 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
Python大数据之使用lxml库解析html网页文件示例
2019/11/16 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
python redis存入字典序列化存储教程
2020/07/16 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
大型会议策划方案
2014/05/17 职场文书
幸福中国演讲稿
2014/09/12 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
草房子读书笔记
2015/06/29 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技