更多总结 猛戳这里
属性与方法
不要在实例属性或者回调函数中（例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数。因为箭头函数会绑定父级上下文，所以 this 不会按照预期指向 Vue 实例，然后 this.myMethod 将是未定义。
语法
v- 指令是带有v-的特殊属性
- v-if 条件渲染
- v-show
- v-else (必须在v-if/v-else-if/v-show指令后)
- v-else-if (v-if/v-else-if后)
- v-for (遍历)
- v-html (绑定HTML属性中的值)
- v-bind (响应更新HTML特性，绑定自定义属性，如绑定某个class元素或style)
- v-on (监听指定元素的dom事件)
- v-model (内置的双向数据绑定，用在表单控件，绑定的value通常是静态字符串)
- v-cloak 关于vuejs页面闪烁{{message}}
- v-once 只渲染元素和组件一次，随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过
<p v-if="seen">超然haha</p> <p v-else></p> <div v-show="isSeen">超然haha</div> <div v-else></div> <ul v-bind:class="{'class1': class1}"> <li v-for="item in items">{{ item }}</li> </ul> <button v-on:click="handleClick">click</button> <div> <p>{{ message }}</p> <input v-model="message"> </div> <!-- v-for --> <!-- 可以通过一个对象的属性来迭代数据 --> <li v-for="value in object"> {{ value }} </li> <!-- 也可以提供第二个的参数为键名 --> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> <!-- 第三个参数为索引 --> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> <!-- 也可以循环整数 --> <li v-for="n in 10"> {{ n }} </li> <!-- v-cloak --> <!-- 和CSS规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕 --> [v-cloak]{ display:none; } <div v-cloak>{{message}}</div> <!-- v-once --> <!-- 组件 --> <my-component v-once :comment="msg"></my-component>
表达式——提供了JavaScript表达式支持
参数——指令后以冒号声明
<a v-bind:href="url">超然haha</a>
过滤器
<div id="app"> {{ message | capitalize }} </div>
<script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>
缩写
- v-bind
- v-on
<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>
计算属性
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter
var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) // 调用 setter， vm.name 和 vm.url 也会被对应更新 vm.site = '菜鸟教程 http://www.runoob.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);
特殊属性
key 主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes
<li v-for="item in items" :key="item.id">...</li>
ref 给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上
<!-- vm.$refs.p will be the DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child will be the child comp instance --> <child-comp ref="child"></child-comp>
is 用于动态组件,决定哪个组件被渲染
<!-- 动态组件由 vm 实例的属性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
keep-alive 缓存不活动的组件实例，而不是销毁它们,保留组件状态避免重新渲染
<!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive>
include && exclude 允许组件有条件的缓存
vue 样式绑定
class属性
- v-bind:class
<div v-bind:class="{ active: isActive }"></div>
- v-bind:class 数组绑定
<div v-bind:class="[activeClass, errorClass]"></div>
style(内联样式)
- v-bind:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">超然haha</div>
- v-bind:style (将多个样式绑定到一个元素)
<div v-bind:style="[baseStyles, overridingStyles]">超然haha</div>
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
vue事件处理器
v-on
- 接收方法
<button v-on:click="greet">Greet</button>
- 内联js语句
<button v-on:click="say('hi')">Say hi</button>
- 事件修饰符
- .stop 阻止单击事件冒泡
- .prevent 不再重载页面
- .capture 使用事件捕获模式
- .self 只当事件在该元素本身（不是子元素）触发时触发
- .once 事件只会触发一次
- 键值修饰符
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- 鼠标按键修饰符
- .left
- .right
- .middle
表单控件绑定
基础用法
- 文本
- 复选框
- 单选按钮
- 选择列表
<!-- 文本 --> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <!-- 复选框 --> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <!-- 单选按钮 --> <div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <!-- 选择列表 --> <div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
修饰符
- .lazy 从输入转变为在 change 事件中同步
- .number 自动将用户的输入值转为 Number 类型
- .trim 自动过滤用户输入的首尾空格
父子组件通信
props （父–>子）
Vue.component('child', { // 声明 props props: ['message'], // 就像 data 一样，prop 可以用在模板内 // 同样也可以在 vm 实例中像“this.message”这样使用 template: '<span>{{ message }}</span>' }) <child message="hello!"></child>
on/emit (子–>父)
父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件
不能用 $on 侦听子组件抛出的事件，而必须在模板里直接用 v-on 绑定
<button-counter v-on:increment="incrementTotal"></button-counter>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
})
子组件索引
- JavaScript 中直接访问子组件。为此可以使用 ref 为子组件指定一个索引 ID*
<div id="parent"> <user-profile ref="profile"></user-profile> </div>
var parent = new Vue({ el: '#parent' }) // 访问子组件 var child = parent.$refs.profile
过渡效果
插入、更新或者移除 DOM 时
单元素组件的过度
- v-if
- v-show
- 动态组件
- 组件根节点
-
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
new Vue({ el: '#demo', data: { show: true } }) .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ { opacity: 0 }
删除或插入包含在transition组件中的元素时，处理过程：
1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作（插入/删除）在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和Vue的 nextTick 概念不同)
过渡的css类名
- v-enter 过渡开始状态
- v-enter-active 过渡状态
- v-enter-to 过渡的结束状态（插入后）
- v-leave 离开过渡开始状态
- v-leave-active 过渡状态
- v-leave-to 离开过渡结束状态
v- 是这些类名的前缀。使用 可以重置前缀，比如 v-enter 替换为 my-transition-enter。
<div id="example-3"> <button @click="show = !show"> Toggle render </button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">hello</p> </transition> </div>
vue经验总结
click
- 普通元素： @click
- 组件元素： @click.native
slot
- 非必要元素
- 可自定义
router-link
- tag 指定渲染标签类型
- active-class 激活时样式n