Vue.js教程讲义.docx

Vue.js教程起步我们以 Vue 数据绑定的快速导览开始。如果你对高级概述更感兴趣，可查看这篇博文。尝试 Vue.js 最简单的方法是使用?JSFiddle Hello World 例子。在浏览器新标签页中打开它，跟着我们查看一些基础示例。如果你喜欢用包管理器下载/安装，查看安装教程。Hello Worlddiv id=app {{ message }}/divnew Vue({ el: #app, data: { message: Hello Vue.js! }})Hello Vue.js!双向绑定div id=appp{{ message }}/pinput v-model=message/divnew Vue({ el: #app, data: { message: Hello Vue.js! }})Hello Vue.js!渲染列表div id=appulli 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 } ] }})Learn JavaScriptLearn Vue.jsBuild Something Awesome处理用户输入div id=appp{{ message }}/pbutton 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() } }})Hello Vue.js!Reverse Message综合div id=appinput v-model=newTodov-on:keyup.enter=addTodoulli v-for=todo in todosspan{{ todo.text }}/spanbutton 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) } }})Add some todos?X希望上例能让你对 Vue.js 的工作原理有一个基础概念。我知道你现在有许多疑问——继续阅读，在后面的教程将一一解答。概述Innovative powerful. Over 100 elements, 230 styles, and 18 header styles.ads via CarbonVue.js（读音 /vju?/, 类似于?view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。如果你是有经验的前端开发者，想知道 Vue.js 与其它库/框架的区别，查看对比其它框架；如果你对使用 Vue.js 开发大型应用更感兴趣，查看构建大型应用。响应的数据绑定Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DO