vue.js指令和组件详细介绍及实例_网络技术_宿州市腾雀网络科技有限公司

vue.js指令和组件详细介绍及实例

发布时间 - 2026-01-11 00:32:34 点击率：次

大家好，本文给各位做一下vue.js一个最基本的概念介绍。

vue.js 指令

<div id="app">
  <div v-text="message"></div>
</div>

var app = new Vue({
 el: '#app',
 data: {
  message: 'Hello Vue!'
 }
})

这个例子我们会得到，v-text所在的div元素的内部插入了'Hello Vue！'这段字符串，那么我们为什么会产生这样一个结果呢，我们来分析一下：

这一步的意思是，实例化的这个Vue接管了#app元素，这里面的所有内容归我管，也就是说可以接受vue的功能指令。

第二步是在#app里， v-text指令被识别出来，它接受的参数是'message'，vue获取到这个参数，并在自己实例化的data里查找叫message的属性，找到message的内容原来是'hello vue', 于是把'hello vue' 渲染到页面。

类似的指令，还有v-if，条件判断，v-for，列表渲染，v-on进行元素的事件绑定。等等。vue.js与页面也就是template进行交互，主要是通过这些内置指令来完成的。

vue.js 组件

开发前端页面，模块化有很多好处，比如公用的sidebar，比如公用的日期选择器。

模块化还有一个好处，就是简化开发逻辑，让项目具有扩展性。

vue.js的模块化主要体现在组件上，以组件为单位进行模块化。

我们可以在实例化vue对象之前，通过Vue.component方法来注册全局的组件，比如：

全局组件

// 告诉Vue，我需要一个组件叫做todo-item，它的配置如下，就是包含props和template那个对象
Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}) 
// 实例化一个vue对象，挂载在#app-7这个元素下，并且设定它的属性，groceryList，是一个数组
var app7 = new Vue({
 el: '#app-7',
 data: {
  groceryList: [
   { text: 'Vegetables' },
   { text: 'Cheese' },
   { text: 'Whatever else humans are supposed to eat' }
  ]
 }
})

模板：

<div id="app-7">
 <ol>
  <!--因为注册了全局的todo-item组件，所以在挂载范围内我们可以直接使用todo-item标签，来引用这个组件，-->
  <!--组件内部会被 todo-item配置表里的template替换，用来渲染。属性todo也是配置对象里规定的，可以接受的参数。-->
  <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
 </ol>
</div>

子组件

实际项目开发中，我们更多的使用的是子组件。

我们刚刚说的每个组件都有一个配置表，就是一个js对象，比如：

{
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
}

我们把这份配置引入到实例化对象里，就可以成为这个vue对象的子组件，比如：

new Vue({
  components: {
    'component-a' : {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'
    }
  }
})

这样的话，我们和之前全局组件一样，也可以在实例化对象挂载的范围内，直接使用<component-a>标签来引用组件。

那么接下来，我们考虑一下，子组件里也可以有自己的子组件，比如：

new Vue({
  components: {
    'component-a' : {
       props: ['todo'],
       template: '<li>{{ todo.text }}</li>'，
       components: {
          'component-b' : {
             template: 'i am component b'，
             components: {
                ...
             }
          }
       }
    }
  }
})

那么这样下去，我们可以有无数个子组件，形成一个组件树：

所以，一个vue.js架构的网站，我们可以看成是一个个组件的开发，最终存在一个根节点，就是项目里唯一实例化的Vue对象，而这一个个组件，其实就是一份份配置对象，以及它们对应的template 模板（html片段）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# vue.js指令 # vue # 组件 # 指令和组件的区别 # vue.js指令v-model使用方法 # vue.js中指令Directives详解 # Vue.js自定义指令的用法与实例解析 # Vue.JS入门教程之自定义指令 # vue.js指令v-model实现方法 # Vue.js第一天学习笔记（数据的双向绑定、常用指令） # Vue.js常用指令汇总（v-if、v-for等） # vue.js指令v-for使用及索引获取 # vue.js通过自定义指令实现数据拉取更新的实现方法 # Vue.js每天必学之指令系统与自定义指令 # 我们可以 # 是一个 # 自己的 # 的是 # 这一 # 是在 # 都有 # 有很多 # 并在 # 这段 # 这份 # 这样一个 # 还有一个 # 大家好 # 体现在 # 这里面 # 方法来 # 里也 # 所有内容 # 来完成

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：如何优化云代码自助建站生成的网站SEO效果？

下一篇：Linux如何使用top监控系统进程

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：如何优化云代码自助建站生成的网站SEO效果？

下一篇：Linux如何使用top监控系统进程