vue技巧分享

.stop 是阻止冒泡行为,不让当前元素的事件继续往外触发,如阻止点击div内部事件,触发div事件
.prevent 是阻止事件本身行为,如阻止超链接的点击跳转,form表单的点击提交
.self 是只有是自己触发的自己才会执行,如果接受到内部的冒泡事件传递信号触发,会忽略掉这个信号
.capture 是改变js默认的事件机制,默认是冒泡,capture功能是将冒泡改为倾听模式
.once 是将事件设置为只执行一次,如 .click.prevent.once 代表只阻止事件的默认行为一次,当第二次触发的时候事件本身的行为会执行
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这个 .passive 修饰符尤其能够提升移动端的性能。
原生js的addEventListener第三个参数，默认是false，冒泡。改成true是捕获。

Home.vue

// Home.vue
 <template>
  <div class="container">
    <!-- <home-header></home-header> -->
    <button @click="setCount(count+1)">+1</button>
    <button @click="setCount(count-1)">-1</button>
    <div>store中count：{{count}}</div>
    <button @click="changeName(name1)">父页面修改name</button>
    <div>store中name：{{name}}</div>
    <!-- <router-link to="/detail">
      <h5>跳转到详情页</h5>
    </router-link>-->
  </div>
</template>  
    <script>  
import { store, mutations } from './store'
export default {
  data() {
    return {
      name1: '主页的name',

    }
  },
  components: {
    // HomeHeader
  },
  computed: {
    count() {
      return store.count
    },
    name() {
      return store.name
    },

  },
  methods: {
    setCount: mutations.setCount,
    changeName: mutations.changeName
  }
}
    </script>  

observable.js

import Vue from 'vue';

export let store = Vue.observable({ count: 0, name: '李四' });
export let mutations = {
    setCount(count) {
        store.count = count;
        console.log('count:', store.count)
    },
    changeName(name) {
        store.name = name;
        console.log('name-in:', store.name)
    }
}

另外需要说明的是，这里只是冻结了users的值，引用不会被冻结，当我们需要reactive数据的时候，我们可以重新给users赋值。

@TOC
render 函数 跟 template 一样都是创建 html 模板的，返回虚拟dom
render: h => h(App) 是下面内容的缩写：
render (h){
return h(App);
}
render (createElement) {
return createElement(App);

}

render: h => h(App) 

el : #app, 等于 $mount(’#app’)

// var vm = new Vue({
    //     el: "#root",
    //     data(){
    //         return{
    //             data: 11111
    //         }
    //     }
    // })
    var vm = new Vue({
        data(){
            return{
                data: 11111
            }
        }
    }).$mount("#root")

#=全局引入，在src/main.js文件
import jquery from ‘jquery’
window.$ = jquery

#在需要的组件中
import $ from ‘jquery’