Vue框架学习笔记 每天学习----四

Vue.js 组件 - 自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<div id="app">
    <div id="counter-event-example">
      <p>{{ total }}</p>
      <button-counter v-on:increment="incrementTotal"></button-counter>
      <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
</div>
 
<script>
Vue.component('button-counter', {
  template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementHandler: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

语法

v-once

后面不需要跟任何表达式

表示元素和组件只渲染一次, 不会随着数据的改变而变化

v-html

后面往往跟一个string类型

会将string的html解析出来并渲染

v-text

与Mustache相似, 一般不用, 不灵活

v-pre

用于跳过这个元素和它子元素的编译过程, 用于显示原本的Mustache语法

v-cloak

在某些情况下, 我们浏览器可能会直接显示出未编译的Mustache标签

v-bind

作用: 动态绑定属性

一般情况下，开源项目用到的技术都会在README中说明，但这个项目刚好没有。对于Vue项目只要看下它的package.json文件我们就能大概了解它的技术栈了。

{
  "dependencies": {
    "axios": "0.18.1",
    "element-ui": "2.13.0",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "vue": "2.6.10",
    "vue-router": "3.0.6",
    "vuex": "3.1.0"
  }
}

webpack配置分离

很多配置开发时需要, 发布时不需要,反之一样, 所以要做分离

在build文件夹中, 建立一个base.config.js文件 --> 公共配置

在build文件夹中, 建立一个dev.config.js文件 --> 开发配置

在build文件夹中, 建立一个prod.config.js文件 --> 发布配置

复制webpack.config.js文件内容 -> 上面三个文件

按照区分 --> 进行文件夹内配置的删除

装一个插件