第十一期分享:前端框架之VUE(二)

39人浏览 / 0人评论

最近赶上VUE 3.0发布,想起来之前还没做完的vue分享,实在是惭愧。明明有时间做的,但就是一直没有去做,真的是拖拖拉拉的习惯还是没有完全改掉,总是把一些重要的事情抛在脑后,看来是需要用心对待下了。。
既然提到了vue3.0,那就简单聊一聊吧(ps:其实我自己还没来得及体验新版本,只是说下自己的直观看法)。任何语言的更新迭代,都预示着会带来新的特性和体验,vue3.0与之前的任何版本都不一样,几乎是经历了重构,让vue更接近于完美。Vue CLI的核心目标是为基于webpack 4构建的预配置构建提供设置,目标是最大限度地减少开发人员配置的次数,所以Vue CLI 3对具有以下特点的项目都支持开箱即用:
1)预配置webpack功能,如模块热替换、代码拆分、 摇树优化(tree-shaking)、高效持久化缓存等;2)通过Babel 7 + preset-env(Babel插件)对 ES2017进行转换和基于使用情况注入polyfill3)支持PostCSS(默认启用autoprefixer)和所有主要的CSS预处理器4)Modern mode:并行发布原生ES2017 +bundle和传统bundle5)多页面模式:构建具有多个HTML / JS入口点的应用程序6)构建目标:将Vue单文件组件构建成为库或原生Web组件
来源地址:https://www.php.cn/js-tutorial-417728.html
看起来倒是美滋滋,不过目前还没有自己去尝试一下,改天体验了有必要的话再讲讲实际应用如何,在这里不做评论。

回到正题,还是继续vue相关语法的整理,上一期主要讲了vue的安装和基本语法指令使用,这一期就讲讲vue的组件。什么是组件?组件是可复用的 Vue 实例,且带有一个名字。例:

// 定义一个名为 mine-button 的新组件Vue.component('mine-button', {  data: function () {    return {    }  },  template'<button>按钮</button>'})

如何使用?我们可以在一个通过 new Vue 创建的 Vue 根实例中,把这个组件作为自定义元素来使用:

<div id="components-demo">  <mine-button></mine-button></div>
因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如  datacomputedwatchmethods 以及生命周期钩子等。仅有的例外是像  el 这样根实例特有的选项。
你可以将组件进行任意次数的复用:
<div id="components-demo">  <mine-button></mine-button>  <mine-button></mine-button>  <mine-button></mine-button>  <mine-button></mine-button></div>
组件的定义和使用基本如此,不知道写过vue的人有没有注意到一个现象,就是组件里的data在这里是一个函数,并非平时写的那样是一个对象?这就是vue所定的规则: 一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。如果没有这条规则,一个组件发生改变就可能改变所有实例,这在实际需求里面是不被允许的。

组件如何在模板中使用?为了能在模板中使用,这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型:全局注册和局部注册。至此,我们的组件都只是通过 Vue.component 全局注册的:

Vue.component('component-name', {  // 操作代码})

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。

组件之间如何传值?通过 prop向子组件传值。 Prop 是你可以在组件上注册的一些自定义 attribute 。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题,我们可以用一个  props  选项将其包含在该组件可接受的 prop 列表中:
Vue.component('blog-post', {  props: ['title'],  template: '<h3>{{ title }}</h3>'}

一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。在上述模板中,你会发现我们能够在组件实例中访问这个值,就像访问 data 中的值一样。一个 prop 被注册之后,你就可以像这样把数据作为一个自定义 attribute 传递进

<blog-post title="1"></blog-post><blog-post title="2"></blog-post><blog-post title="3"></blog-post>
如何监听子组件事件?Vue 实例提供了一个自定义事件的系统,父级组件可以像处理 native DOM 事件一样通过  v-on 监听子组件实例的任意事件。子组件可以通过调用内建的  $emit 方法并传入事件名称来触发一个事件。
组件基础到这里就告一段落了,有条件可以自己动手尝试,有问题可以在下面发起讨论 ↓  ↓  ↓ 


附:个人博客:http://blog.hongxiawangluo.com/

全部评论