Vue.js+中文文档+1.0课案.docx

目录教程3起步3概述3Vue 实例3数据绑定语法3计算属性3Class 与 Style 绑定3条件渲染3列表渲染3方法与事件处理器3表单控件绑定3过渡3组件3深入响应式原理3自定义指令3自定义过滤器3混合3插件3构建大型应用3对比其它框架3API4示例5Markdown 编辑器 Example5GitHub 提交 Example5Firebase + 验证 Example5表格组件 Example5树状视图 Example5SVG 图形 Example5模态组件 Example5Elastic Header Example5自定义指令 Example5TodoMVC Example5HackerNews 克隆 Example5教程教程起步起步我们以 Vue 数据绑定的快速导览开始。如果你对高级概述更感兴趣，可查看这篇博文。尝试 Vue.js 最简单的方法是使用 JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。Hello Worlddiv?id=app?{{?message?}}/divnew?Vue({?el:?#app,?data:?{?message:?Hello?Vue.js!?}})双向绑定div?id=app?p{{?message?}}/p?input?v-model=message/divnew?Vue({?el:?#app,?data:?{?message:?Hello?Vue.js!?}})渲染列表div?id=app?ul?li?v-for=todo?in?todos?{{?todo.text?}}?/li?/ul/divnew?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/divnew?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/divnew?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 与其它库/框架的区别，查看对比其它框架；如果你对使用 Vue.js 开发大型应用更感兴趣，查看构建大型应用。响应的数据绑定Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTM