开发者社区> 文艺小青年> 正文

Vue 入门指南

简介:
+关注继续查看

介绍

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'
            }
        ]
    }
})
复制代码

 

粗略翻译,有错误请指出


本文转自艾伦 Aaron博客园博客,原文链接:http://www.cnblogs.com/aaronjs/p/3660102.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Vue3】快速入门Vue3 -上篇
【Vue3】快速入门Vue3 -上篇
26 0
Vue3 教程
Vue3 教程
26 0
【Vue 开发实战】实战篇 # 27:使用Vue CLI 3快速创建项目
【Vue 开发实战】实战篇 # 27:使用Vue CLI 3快速创建项目
32 0
vue简介
vue简介
132 0
Vue视频 | 【Vue2 + Vue3 前端教程】完整版
目前大部分公司还是以vue、react技术为主的,而Vue中还是以Vue2为主流,但不可否认Vue3是未来所必须的且已有这个趋向了 今天给大家介绍一个Vue的教程 里面既有现在主流的Vue2 同时也存在Vue3教程 每个教程里面都有视频 以及配套资料(代码,讲义ppt,学习计划)
93 0
VUE [入门篇]
1、 v-if 、v-else、v-else-if、v-show 2、v-for 3、v-text 、v-html 4、v-on 5、v-model 6、v-bind 7、v-pre、v-cloak、v-once
97 0
vue3初体验-tsx
vue3初体验-tsx
137 0
vue3初体验-插件
vue3初体验-插件
52 0
总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)
总结Vue 第四天:vue-cli(Vue2.0 新手入门 — 从环境搭建到发布)
88 0
+关注
文艺小青年
文章
问答
视频
文章排行榜
最热
最新
相关电子书
更多
23-Vue.js在前端...1506518547.pdf
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载