属性绑定：<button :disabled=\"someDynamicCondition\">Button</button> // 绑定到一个布尔值，如果真则disabled属性就加在button上<li v-bind:class=\"{'j_current': currenttab=='login'}\"> 这是class绑定的演示</li>条件渲染：<h1 v-if=\"ok\">Yes</h1><h1 v-else>No</h1><template v-if=\"ok\"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>条件显示：<h1 v-show=\"ok\">Hello!</h1>列表渲染：<ul id=\"example-2\"> <li v-for=\"(index, item) of items\"> {{index}} {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>vuejs可以被应用在数组的push,pop,shift,unshift,splice,sort,reverse方法改变数组的场景，但是如果你使用下面的语法1. vm.items[0]={}; 2.vm.items.length=0改变数组vuejs则无法感知这个变化，vuejs推荐的解决方案是：1.使用$set方法： example1.items.$set(0,{});2.使用空数组来替换items即可 example1.items = [];vuejs也提供了直接删除一个数组一个元素的简单方法 this.items.$remove(item)v-for应用在对象上面：<ul id=\"repeat-object\" class=\"demo\"> <li v-for=\"value in object\"> {{ $key }} : {{ value }} </li></ul>v-on内联语句访问event参数:如果是一个函数作为v-on绑定的表达式的话，该函数自动带有(event参数），这个和普通的js事件处理函数是一样的
<button v-on:click=\"say('hello!', $event)\">Submit</button>事件修饰符：v-on:click.stop/v-on:submit.prevent/v-on:click.stop/v-on:click.capture/v-on:click.self=\"dothat\"// 定义组件var MyComponent = Vue.extend({ template: '<div>A custom component!</div>' })var Parent = Vue.extend({ components: { 'my-component': { template: '<div>A custom component!</div>' } } })// 注册组件Vue.component('my-component', MyComponent)子组件可硬用this.$parent访问父组件，this.$root访问祖根实例，每个父组件都有一个数组this.$children来包含所有子元素
如何在production build中自动将console.log清除掉？strip-loader可以完成这个工作通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新<span v-once>This will never change: {{ msg }}</span>computed相较于methods的优点：计算属性是基于它们的依赖进行缓存的key属性标示唯一值<input placeholder=\"Enter your username\" key=\"username-input\">当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级
prop验证：Vue.component('example', { props: { // 基础类型检测 （`null` 意思是任何类型都可以） propA: Number, // 多种类型 propB: [String, Number], // 必传且是字符串 propC: { type: String, required: true }, // 数字，有默认值 propD: { type: Number, default: 100 }, // 数组／对象的默认值应当由一个工厂函数返回 propE: { type: Object, default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { return value > 10 } } }})给组件绑定原生事件<my-component v-on:click.native=\"doTheThing\"></my-component>监测路由变化watch: { '$route' (to, from) { // 对路由变化作出响应... } }​