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


Posted in Javascript onApril 06, 2017

大家好,本文给各位做一下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.js指令和组件详细介绍及实例

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

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

第二步是在#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.js架构的网站,我们可以看成是一个个组件的开发,最终存在一个根节点,就是项目里唯一实例化的Vue对象,而这一个个组件,其实就是一份份配置对象,以及它们对应的template 模板(html片段)。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
提高网站性能之 如何对待JavaScript
Oct 31 Javascript
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
React服务端渲染(总结)
Jul 01 Javascript
详解升级react-router 4 踩坑指南
Aug 14 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
javascript闭包功能与用法实例分析
Apr 06 #Javascript
深入理解 JavaScript 中的 JSON
Apr 06 #Javascript
ES6中module模块化开发实例浅析
Apr 06 #Javascript
ES6中class类用法实例浅析
Apr 06 #Javascript
ES6中Proxy代理用法实例浅析
Apr 06 #Javascript
ES6中Symbol类型用法实例详解
Apr 06 #Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
You might like
PHP脚本数据库功能详解(中)
2006/10/09 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
JavaScript中跨域调用Flash的方法
2014/08/11 Javascript
JavaScript插件化开发教程(六)
2015/02/01 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
利用JS实现简单的日期选择插件
2017/01/23 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
JavaScript模块模式实例详解
2017/10/25 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
[33:17]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
python复制与引用用法分析
2015/04/08 Python
Python语法快速入门指南
2015/10/12 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
木马的传播途径主要有哪些
2016/04/08 面试题
项目经理任命书
2014/06/04 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
讲座新闻稿
2015/07/18 职场文书
医院病假条范文
2015/08/17 职场文书
2016猴年开门红标语口号
2015/12/26 职场文书
Oracle设置DB、监听和EM开机启动的方法
2021/04/25 Oracle
详细总结Python常见的安全问题
2021/05/21 Python
Python scrapy爬取起点中文网小说榜单
2021/06/13 Python
JAVA API 实用类 String详解
2021/10/05 Java/Android
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Java中try catch处理异常示例
2021/12/06 Java/Android