m0_64389585的博客

本帖演示了五个vue示例，个个都很经典，欢迎大家一起交流学习。

Vue 可以添加数据动态响应接口。例如以下实例，我们通过使用 $watch 属性来实现数据的监听，$watch 必须添加在 Vue 实例之外才能实现正确的响应。实例中通过点击按钮计数器会加 1。setTimeout 设置 10 秒后计算器的值加上 20。Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。Vue 不能检测到对象属性的添加或删除，最好的方式就是在初始化实例前声明根级响应式属性，哪怕只是一个空值。

Vue 要实现异步加载需要使用到 vue-resource 库。Vue.js 2.0 版本推荐使用来完成 ajax 请求。

通过 Vue.directive() 函数注册一个全局的指令。通过组件的 directives 属性，对该组件添加一个局部的指令。

本帖主要学习Vue.js表单上的应用。可以用v-model指令在表单控件元素上创建双向数据绑定。v-model会根据控件类型自动选取正确的方法来更新元素。

<title>Vue测试实例</title>

class与style是HTML元素的属性，用于设置元素的样式，我们可以用v-bind来设置样式属性。Vue.jsv-bind在处理class和style时，专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

计算属性关键词:computed。计算属性在处理一些复杂逻辑时是很有用的。实例1中模板变的很复杂起来，也不容易看懂理解。实例2中声明了一个计算属性reversedMessage。提供的函数将用作属性vm.reversedMessage的getter。vm.reversedMessage依赖于vm.message，在vm.message发生改变时，vm.reversedMessage也会更新。

本帖将为大家介绍Vue.js路由。Vue.js路由允许我们通过不同的URL访问不同的内容。通过Vue.js可以实现多视图的单页Web应用（singlepagewebapplication，SPA）。Vue.js路由需要载入。

混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

<title>Vue测试实例</title>

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。v-on 可以接收一个定义的方法来调用。

本节学习了vue的条件/循环语句，欢迎大家一起沟通学习。

本节介绍vue的语法模板，笔者最近正在学习中，欢迎大家一起交流指正，一起进步。

当一个Vue实例被创建时，它向Vue的响应式系统中加入了其data对象中能找到的所有的属性。当这些属性的值发生改变时，html视图将也会产生相应的变化。可以看到在Vue构造器中有一个el参数，它是DOM元素中的id。除了数据属性，Vue实例还提供了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。这意味着我们接下来的改动全部在以上指定的div内，div外部不受影响。用于定义属性，实例中有三个属性分别为：site、url、alexa。

App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。在 IDE（Eclipse、Atom等） 中打开上个章节建立的新项目。首页入口文件，你可以添加一些 meta 信息或统计代码啥的。components: 目录里面放了一个组件文件，可以不用。这里是我们要开发的目录，基本上要做的事情都在这个目录里。配置目录，包括端口号等。我们初学可以使用默认的。这些是一些配置文件，包括语法配置，git配置等。main.js: 项目的核心文件。静态资源目录，如图片、字体等。

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。在 Vue.js 的官网上直接下载 vue.min.js 并用。