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

作者：黎燃

2022 年 6 月 02 日
本文字数：967 字
阅读完需：约 3 分钟

Vue.js 组件 - 自定义事件

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

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

使用 $o n (e v e n t N a m e) 监听事件使用$ 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 文件内容 -> 上面三个文件按照区分 --> 进行文件夹内配置的删除装一个插件

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/5be8af12002cab137fd6a1af2】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

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

Vue.js 组件 - 自定义事件

语法

webpack 配置分离

黎燃

评论

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