v-if在字符串模板中,如 Handlebars,我们得像这样写一个条件块:<!-- Handlebars 模板 -->{{#if ok}} <h1>Yes</h1>{{/if}}在 Vue.js,我们使用 v-if 指令实现同样的功能:<h1 v-if="ok">Yes</h1>也可以用 v-else 添加一个 "else" 块:<h1 v-if="ok">Yes</h1><h1 v-else>No</h1>
在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。基础例子<div id="example"> a={{ a }}, b={{ b }}</div>
Vue.js 的模板是基于 DOM 实现的。这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。Vue 模板因而从根本上不同于基于字符串的模板,请记住这点。插值文本数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号):<span>Message: {{ msg }}</span>
构造器每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例:var vm = new Vue({ // 选项})一个 Vue 实例其实正是一个 MVVM 模式中所描述的 ViewModel - 因此在文档中经常会使用 vm 这个变量名。在实例化 Vue 时,需要传入一个选项对象,它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。全部的选项可以在 API 文档中查看。
MixinsMixin (混入) 是一种可以在多个 Vue 组件之间灵活复用特性的机制。你可以像写一个普通 Vue 组件的选项对象一样编写一个 mixin:// mixin.jsmodule.exports = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// test.jsvar myMixin = require('.
使用组件在 Vue.js 中,我们可以用 Vue 扩展出来的 ViewModel 子类当做可复用的组件。这在概念上与 Web Components 非常相似,不同之处在于 Vue 的组件无需任何 polyfill。要创建一个组件,只需调用 Vue.extend() 来生成一个 Vue 的子类构造函数:// 扩展 Vue 得到一个可复用的构造函数var MyComponent = Vue.extend({ template: '<p>A custom component!<
基础和自定义指令类似,你可以用全局方法 Vue.filter(),传递一个过滤器 ID 和一个过滤器函数来注册一个自定义过滤器。过滤器函数会接受一个参数值并返回将其转换后的值:Vue.filter('reverse', function (value) { return value.split('').reverse().join('')})<!-- 'abc' => 'cba' --><span v-text="message | reverse"></span>
基础Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为。你可以使用 Vue.directive(id, definition) 的方法传入指令 id 和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数(全部可选):bind: 仅调用一次,当指令第一次绑定元素的时候。
Vue.js 的内联表达式非常方便,但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑,你应该使用计算属性。在 Vue.
基本用法你可以在表单的 input 元素上使用 v-model 指令来创建双向数据绑定。它会根据 input 元素的类型自动选取正确的绑定模式。示例<form id="demo"> <!-- text --> <p> <input type="text" v-model="msg"> {{msg}} </p> <!-- checkbox --> <p> <input type="checkbox" v-model="checked">
你可以使用 v-on 指令来绑定并监听 DOM 事件。绑定的内容可以是一个当前实例上的方法 (后面无需跟括号) 或一个内联表达式。如果提供的是一个方法,则原生的 DOM event 会被作为第一个参数传入,同时这个 event 会带有 targetVM 属性,指向触发该事件的相应的 ViewModel:<div id="demo"> <a v-on="click: onClick">触发一个方法函数</a> <
你可以使用 v-repeat 指令来基于 ViewModel 上的对象数组渲染列表。对于数组中的每个对象,该指令将创建一个以该对象作为其 $data 对象的子 Vue 实例。这些子实例继承父实例的数据作用域,因此在重复的模板元素中你既可以访问子实例的属性,也可以访问父实例的属性。此外, 你还可以通过 $index 属性来获取当前实例对应的数组索引。示例:<ul id="demo"> <
Angular选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合:在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发。Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是任何时候都必须遵循 Angular 制定的规则。
新: 使用脚手架工具 vue-cli 可以快速地构建项目:单文件 Vue 组件,热加载,保存时检查代码,单元测试等。Vue.js 的设计思想是专注与灵活——它只是一个界面库,不强制使用哪个架构。它能很好地与已有项目整合,不过对于经验欠缺的开发者,从头开始构建大型应用可能是一个挑战。Vue.js 生态系统提供了一系列的工具与库,用于构建大型单页应用。
大部分的基础内容我们已经讲到了,现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图。这让状态管理非常简单且直观,不过理解它的原理也很重要,可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。如何追踪变化把一个普通对象传给 Vue 实例作为它的 data 选项,Vue.js 将遍历它的属性,用 Object.
基础用法可以用 v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子。Text<span>Message is: {{ message }}</span><br><input type="text" v-model="message" placeholder="edit me">{% raw %}<
方法处理器可以用 v-on 指令监听 DOM 事件:<div id="example"> <button v-on:click="greet">Greet</button></div>我们绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法:var vm = new Vue({ el: '#example', data: { name: 'Vue.
数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
数据初始化明确定义的数据模型更加适合 Vue 的数据观察模式。建议在定义组件时,在 data 选项中初始化所有需要进行动态观察的属性。例如,给定下面的模版:<div id="demo"><p v-class="green: validation.valid">{{message}}</p><input v-model="message"></div>
Vue.js 在设计思想上追求的是尽可能的灵活。它本身只是一个界面库,并不强制使用哪种架构。这对于快速原型开发很有用,但是对于经验欠缺的开发者,用 Vue.js 构建大型应用可能会是一个挑战。在这里我会针对在使用 Vue.js 时如何组织大型的项目提供一些略带个人偏好的建议。模块化虽然独立构建的 Vue.
关注时代Java