推荐阅读
  • Vue3 教程

    Vue3 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单,本教程基于 Vue 3.0.5 版本测试。 阅读本教程前,您需要了解的知识: HTML CSS JavaScript

  • Vue3 监听属性

    Vue3 监听属性 本章节,我们将为大家介绍 Vue3 监听属性 watch,我们可以通过 watch 来响应数据的变化。 以下实例通过使用 watch 实现计数器: 实例 [mycode3 type='html'] 计数器: {{ counter }} 点我 const app = { data() { return {

  • Vue3 混入

    Vue3 混入 混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。 来看一个简单的实例: 实例 [mycode3 type='js'] // 定义混入对象 const myMixin = { created() { this.hello() },

  • Vue3 表单

    Vue3 表单 这节我们为大家介绍 Vue 表单上的应用。 我们可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等元素上创建双向数据绑定。 v-model 会根据控件类型自动选取正确的方法来更新元素。 v-model 会忽略所有表单元素的 value、checked

  • Vue3 自定义指令

    Vue3 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。 下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时,元素获得焦点: 实例 [mycode3 type='html'] 页面载入时,input 元素自动获取焦点: const app = Vue.createA

  • Vue3 Ajax(axios)

    Vue3 Ajax(axios) Vue 版本推荐使用 axios 来完成 ajax 请求。 Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 Github开源地址: https://github.com/axios/axios 安装方法 使用 cdn: 或 使用 npm: $ npm install axios 使用 bo

  • Vue3 条件语句

    Vue3 条件语句 条件判断 v-if 条件判断使用 v-if 指令,指令的表达式返回 true 时才会显示: v-if 指令 在元素中使用 v-if 指令: [mycode3 type='html'] 现在你看到我了 const app = { data() { return { seen: true /* 改为false

  • Vue3 组件

    Vue3 组件 组件(Component)是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素,封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树: 每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。 一个

  • Vue3 样式绑定

    Vue3 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。 v-bind 在处理 class 和 style 时, 表达式除了可以使用字符串之外,还可以是对象或数组。 v-bind:class 可以简写为 :class。 class 属性绑定 我们可以为 v-bind:class 设置一个对象,

  • Vue3 安装

    Vue3 安装 1、独立版本 我们可以在 Vue.js 的官网上直接下载最新版本, 并用 <script> 标签引入。 下载 Vue.js 2、使用 CDN 方法 以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。 Staticfile CDN(国内) : https://cdn.staticfile.org/vue/3.

Vue3 组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

每个 Vue 应用都是通过用 createApp 函数创建的,传递给 createApp 的选项用于配置根组件。当我们挂载应用时,该组件被用作渲染的起点。

一个应用需要被挂载到一个 DOM 元素中。

以下实例我们将 Vue 应用挂载到 <div id="app"></div>,应该传入 #app:

const RootComponent = { /* 选项 */ }

const app = Vue.createApp(RootComponent)

const vm = app.mount('#app')

注册一个全局组件语法格式如下:


const app = Vue.createApp({...})

app.component('my-component-name', {

  /* ... */

})

my-component-name 为组件名,/* ... */ 部分为配置选项。注册后,我们可以使用以下方式来调用组件:


<my-component-name></my-component-name>

一个简单的 Vue 组件的实例:


注册一个简单的全局组件 lvstudy,并使用它:

<div id="app">
    <lvstudy></lvstudy>
</div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 lvstudy的新全局组件
app.component('lvstudy', {
    template: '<h1>自定义组件!</h1>'
})
 
app.mount('#app')
</script>

接下来我们再注册一个 button-counter 组件,在每次点击后,计数器会加 1:

 
// 创建一个Vue 应用
const app = Vue.createApp({})

// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次!
    </button>`
})
app.mount('#app')
</script>

组件的复用

你可以将组件进行任意次数的复用:

 
<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

全局组件

以上的实例中我们的组件都只是通过 component 全局注册的。

全局注册的组件可以在随后创建的 app 实例模板中使用,也包括根实例组件树中的所有子组件的模板中。。


注册一个简单的全局组件 lvstudy,并使用它:

<div id="app">
    <lvstudy></lvstudy>
</div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 lvstudy 的新全局组件
app.component('lvstudy', {
    template: '<h1>自定义组件!</h1>'
})
 
app.mount('#app')
</script>

局部组件

全局注册往往是不够理想的。比如,如果你使用一个像 webpack 这样的构建系统,全局注册所有的组件意味着即便你已经不再使用一个组件了,它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下,你可以通过一个普通的 JavaScript 对象来定义组件:

const ComponentA = {

  /* ... */

}

const ComponentB = {

  /* ... */

}

const ComponentC = {

  /* ... */

}

然后在 components 选项中定义你想要使用的组件:

const app = Vue.createApp({

  components: {

    'component-a': ComponentA,

    'component-b': ComponentB

  }

})

对于 components 对象中的每个属性来说,其属性名就是自定义元素的名字(component-a、component-b),其属性值就是这个组件的选项对象(ComponentA、ComponentB)。

我们也可以在实例选项中注册局部组件,这样组件只能在这个实例中使用:


注册一个简单的局部组件 lvstudyA,并使用它:

<div id="app">
    <lvstudy-a></lvstudy-a>
</div>
<script>
var lvstudyA = {
  template: '<h1>自定义组件!</h1>'
}
 
const app = Vue.createApp({
  components: {
    'lvstudy-a': lvstudyA
  }
})
 
app.mount('#app')
</script>

Prop

prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":


<div id="app">
  <site-name title="Google"></site-namet>
  <site-name title="lvstudy"></site-namet>
  <site-name title="Taobao"></site-name>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('site-name', {
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#app')
</script>

一个组件默认可以拥有任意数量的 prop,任何值都可以传递给任何 prop。

动态 Prop

类似于用 v-bind 绑定 HTML 特性到一个表达式,也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时,该变化也会传导给子组件:


<div id="app">
  <site-info
    v-for="site in sites"
    :id="site.id"
    :title="site.title"
  ></site-info>
</div>
 
<script>
const Site = {
  data() {
    return {
      sites: [
        { id: 1, title: 'Google' },
        { id: 2, title: 'lvstudy' },
        { id: 3, title: 'Taobao' }
      ]
    }
  }
}
 
const app = Vue.createApp(Site)
 
app.component('site-info', {
  props: ['id','title'],
  template: `<h4>{{ id }} - {{ title }}</h4>`
})
 
app.mount('#app')
</script>

Prop 验证

组件可以为 props 指定验证要求。

为了定制 prop 的验证方式,你可以为 props 中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:


Vue.component('my-component', {

  props: {

    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)

    propA: Number,

    // 多个可能的类型

    propB: [String, Number],

    // 必填的字符串

    propC: {

      type: String,

      required: true

    },

    // 带有默认值的数字

    propD: {

      type: Number,

      default: 100

    },

    // 带有默认值的对象

    propE: {

      type: Object,

      // 对象或数组默认值必须从一个工厂函数获取

      default: function () {

        return { message: 'hello' }

      }

    },

    // 自定义验证函数

    propF: {

      validator: function (value) {

        // 这个值必须匹配下列字符串中的一个

        return ['success', 'warning', 'danger'].indexOf(value) !== -1

      }

    }

  }

})

当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

type 也可以是一个自定义构造器,使用 instanceof 检测。

关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图