web框架：Vue.js详解

简介

Vue.js 只聚焦视图层，是一个构建数据驱动的 Web 界面的库。

特性:

• 轻量
• 数据绑定
• 指令
• 插件化

与其他框架的区别
React
Angular 1
Angular 2
Knockout
Polymer
Riot

// .vue是Vue.js特有的文件格式，表示一个Vue组件，称为单页式组件
// 视图
<template>
</template>

// 组件样式表
<style>
</style>

<script>
</script>

数据绑定

数据绑定将数据与视图相关联，当数据发生变化时，可以自动更新视图。

// 插值，使用双大括号
<span>{{text}}</span>
// 有时只需要渲染一次数据，后续数据变化不再关心，可以通过“*”实现
<span>{{*text}}</span>
// 双大括号会把里面的值全部当作字符串来处理，如果值是 HTML 片段，则可以使用三个大括号来绑定
// 双大括号还可以放在HTML标签内
<li data-id='{{id}}'></li>

// 表达式
{{ true ? 1 : 0 }}
// Vue.js 允许在表达式后面添加过滤符

指令是带有 v- 前缀的特殊特性，其值限定为绑定表达式。

指令

指令的职责就是当其表达式的值改变时把某些特殊的行为应用到DOM上。
v-if
v-show
v-for

计算属性

表单与 v-model

class 与 style绑定

Render 函数

组件详解

webpack

发展历程

• Vue.js