Vue.js+中文文档+1.0解读.docx

目录 教程 3 起步 3 概述 3 Vue 实例 3 数据绑定语法 3 计算属性 3 Class 与 Style 绑定 3 条件渲染 3 列表渲染 3 方法与事件处理器 3 表单控件绑定 3 过渡 3 组件 3 深入响应式原理 3 自定义指令 3 自定义过滤器 3 混合 3 插件 3 构建大型应用 3 对比其它框架 3 API 4 示例 5 Markdown 编辑器 Example 5 GitHub 提交 Example 5 Firebase + 验证 Example 5 表格组件 Example 5 树状视图 Example 5 SVG 图形 Example 5 模态组件 Example 5 Elastic Header Example 5 自定义指令 Example 5 TodoMVC Example 5 HackerNews 克隆 Example 5 教程 教程 起步 起步 我们以 Vue 数据绑定的快速导览开始。如果你对高级概述更感兴趣，可查看这篇博文。 尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。 Hello World div?id=app?{{?message?}}/div new?Vue({?el:?#app,?data:?{?message:?Hello?Vue.js!?}}) 双向绑定 div?id=app?p{{?message?}}/p?input?v-model=message/div new?Vue({?el:?#app,?data:?{?message:?Hello?Vue.js!?}}) 渲染列表 div?id=app?ul?li?v-for=todo?in?todos?{{?todo.text?}}?/li?/ul/div new?Vue({?el:?#app,?data:?{?todos:?[?{?text:?Learn?JavaScript?},?{?text:?Learn?Vue.js?},?{?text:?Build?Something?Awesome?}?]?}}) 处理用户输入 div?id=app?p{{?message?}}/p?button?v-on:click=reverseMessageReverse?Message/button/div new?Vue({?el:?#app,?data:?{?message:?Hello?Vue.js!?},?methods:?{?reverseMessage:?function?()?{?this.message?=?this.message.split().reverse().join()?}?}}) 综合 div?id=app?input?v-model=newTodo?v-on:keyup.enter=addTodo?ul?li?v-for=todo?in?todos?span{{?todo.text?}}/span?button?v-on:click=removeTodo($index)X/button?/li?/ul/div new?Vue({?el:?#app,?data:?{?newTodo:?,?todos:?[?{?text:?Add?some?todos?}?]?},?methods:?{?addTodo:?function?()?{?var?text?=?this.newTodo.trim()?if?(text)?{?this.todos.push({?text:?text?})?this.newTodo?=??}?},?removeTodo:?function?(index)?{?this.todos.splice(index,?1)?}?}}) 希望上例能让你对 Vue.js 的工作原理有一个基础概念。我知道你现在有许多疑问——继续阅读，在后面的教程将一一解答。 概述 概述 Vue.js（读音 /vju?/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。 如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其