1、Object.freeze() 冻结阻止当前对象响应发生变化
    eg:

    1. var obj = {
    2. foo: 'bar'
    3. }
    4. Object.freeze(obj)
    5. new Vue({
    6. el: '#app',
    7. data: obj
    8. })
    1. <div id="app">
    2. <p>{{ foo }}</p>
    3. <!-- 这里的 `foo` 不会更新! -->
    4. <button v-on:click="foo = 'baz'">Change it</button>
    5. </div>

    2、vue实例自身暴露的实例property和方法

    1. var data = { a: 1 }
    2. var vm = new Vue({
    3. el: '#example',
    4. data: data
    5. })
    6. vm.$data === data // => true
    7. vm.$el === document.getElementById('example') // => true
    8. // $watch 是一个实例方法
    9. vm.$watch('a', function (newValue, oldValue) {
    10. // 这个回调将在 `vm.a` 改变后调用
    11. })

    3、生命周期
    image.png

    4、动态参数绑定

    5、缩写

    1. <!--v-bind-->
    2. <!-- 完整语法 -->
    3. <a v-bind:href="url">...</a>
    4. <!-- 缩写 -->
    5. <a :href="url">...</a>
    6. <!-- 动态参数的缩写 (2.6.0+) -->
    7. <a :[key]="url"> ... </a>
    8. <!--v-on-->
    9. <!-- 完整语法 -->
    10. <a v-on:click="doSomething">...</a>
    11. <!-- 缩写 -->
    12. <a @click="doSomething">...</a>
    13. <!-- 动态参数的缩写 (2.6.0+) -->
    14. <a @[event]="doSomething"> ... </a>

    6、计算属性
    计算属性是基于它们的响应式依赖进行缓存的
    **
    7、class与style绑定
    1)用在对象上:


    2)用在数组上

    1. <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    2. <div v-bind:class="[{ active: isActive }, errorClass]"></div>

    3)用在组件上

    1. Vue.component('my-component', {
    2. template: '<p class="foo bar">Hi</p>'
    3. })
    4. 然后在使用它的时候添加一些 class
    5. <my-component class="baz boo"></my-component>
    6. HTML 将被渲染为:
    7. <p class="foo bar baz boo">Hi</p>
    8. 对于带数据绑定 class 也同样适用:
    9. <my-component v-bind:class="{ active: isActive }"></my-component>
    10. isActive truthy[1] 时,HTML 将被渲染成为:
    11. <p class="foo bar active">Hi</p>

    8、provide & inject 跨组件传值
    可实现跨组件传值,数据的流只能是向下传递
    provide: 必须在分级组件(不一定是app.vue)进行使用,给后代组件注入依赖(属性或方法)

    inject: 必须在子组件使用,获取根组件定义的跨组件传递的数据。
    应用:

    1. 根组件定义:
    2. <template>
    3. <div id="app">
    4. <h1>appVue父组件</h1>
    5. <Child9/>
    6. </div>
    7. </template>
    8. <script>
    9. import Child9 from './components/child9'
    10. export default {
    11. components:{
    12. Child9,
    13. },
    14. /*
    15. provide(){ //provide作为一个方法使用 ( 推荐使用 )。
    16. return{
    17. 'userName' : 'bruce',
    18. }
    19. },
    20. */
    21. provide : { //provide也可以作为一个对象进行使用.
    22. "userName" : 'bruce',
    23. }
    24. }
    25. </script>
    26. 子组件接收:
    27. <template>
    28. <div class="box">
    29. <h2>组件10</h2>
    30. <h3>接受到根组件的传递的数据{{userName}}</h3> <!-- 使用根组件传递过来的数据 -->
    31. </div>
    32. </template>
    33. <script>
    34. export default {
    35. // inject : ['userName'] //inject后面用一个数组接收
    36. inject : { //inject后面可以是一个对象
    37. userName : {
    38. default : '默认值' //指定默认值
    39. }
    40. }
    41. }
    42. </script>

    9、组件间传值(https://segmentfault.com/a/1190000019208626)
    1)props / $emit

    2) $emit / $on

    3) vuex

    4) $attrs / $listeners