1、Object.freeze() 冻结阻止当前对象响应发生变化
eg:
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新! -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
2、vue实例自身暴露的实例property和方法
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
3、生命周期
4、动态参数绑定
…
5、缩写
<!--v-bind-->
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
<!--v-on-->
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
6、计算属性
计算属性是基于它们的响应式依赖进行缓存的
**
7、class与style绑定
1)用在对象上:
2)用在数组上
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
<div v-bind:class="[{ active: isActive }, errorClass]"></div>
3)用在组件上
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
然后在使用它的时候添加一些 class:
<my-component class="baz boo"></my-component>
HTML 将被渲染为:
<p class="foo bar baz boo">Hi</p>
对于带数据绑定 class 也同样适用:
<my-component v-bind:class="{ active: isActive }"></my-component>
当 isActive 为 truthy[1] 时,HTML 将被渲染成为:
<p class="foo bar active">Hi</p>
8、provide & inject 跨组件传值
可实现跨组件传值,数据的流只能是向下传递
provide: 必须在分级组件(不一定是app.vue)进行使用,给后代组件注入依赖(属性或方法)
inject: 必须在子组件使用,获取根组件定义的跨组件传递的数据。
应用:
根组件定义:
<template>
<div id="app">
<h1>appVue父组件</h1>
<Child9/>
</div>
</template>
<script>
import Child9 from './components/child9'
export default {
components:{
Child9,
},
/*
provide(){ //provide作为一个方法使用 ( 推荐使用 )。
return{
'userName' : 'bruce',
}
},
*/
provide : { //provide也可以作为一个对象进行使用.
"userName" : 'bruce',
}
}
</script>
子组件接收:
<template>
<div class="box">
<h2>组件10</h2>
<h3>接受到根组件的传递的数据{{userName}}</h3> <!-- 使用根组件传递过来的数据 -->
</div>
</template>
<script>
export default {
// inject : ['userName'] //inject后面用一个数组接收
inject : { //inject后面可以是一个对象
userName : {
default : '默认值' //指定默认值
}
}
}
</script>
9、组件间传值(https://segmentfault.com/a/1190000019208626)
1)props / $emit
2) $emit / $on
3) vuex
4) $attrs / $listeners