写点什么

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

作者:黎燃
  • 2022 年 6 月 02 日
  • 本文字数:967 字

    阅读完需:约 3 分钟

Vue.js 组件 - 自定义事件

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


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


使用 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
用户头像

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

评论

发布
暂无评论
Vue框架学习笔记 每天学习----四_6月月更_黎燃_InfoQ写作社区