前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue初探

Vue初探

原创
作者头像
Quinlan
发布2022-02-16 15:21:15
1650
发布2022-02-16 15:21:15
举报

specialty

vue文件中,包含了html、css、Js文件

1.采用组件化模式,提高代码复用率、且让代码更好维护。

2.声明式编码,让编码人员无需直接操作DOM,提高开发效率。

3.使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。

组件化

示例

定义:

代码语言:javascript
复制
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

引入方式:

代码语言:javascript
复制
<div id="components-demo">
  <button-counter></button-counter>
</div>

new Vue({ el: '#components-demo' })

组件的复用

代码语言:javascript
复制
你可以将组件进行任意次数的复用:
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

data 必须是一个函数

组件的结构

全局注册局部注册

全局注册

我们的组件都只是通过 Vue.component 全局注册的:

代码语言:javascript
复制
Vue.component('my-component-name', {
  // ... options ...
})

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • specialty
  • 组件化
    • 示例
      • 组件的复用
        • data 必须是一个函数
      • 组件的结构
        • 全局注册
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档