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 相关文章推荐
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jQuery控制文本框只能输入数字和字母及使用方法
May 26 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
使用 Node.js 实现图片的动态裁切及算法实例代码详解
Sep 29 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
javascript中的with语句学习笔记及用法
Feb 17 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
再说下636单管机
2021/03/02 无线电
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
php查看当前Session的ID实例
2015/03/16 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
PHP5.6.8连接SQL Server 2008 R2数据库常用技巧分析总结
2019/05/06 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
AngularJS的表单使用详解
2015/06/17 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
2015/12/17 Javascript
微信JS接口大全
2016/08/25 Javascript
Bootstrap导航条鼠标悬停下拉菜单
2017/01/04 Javascript
js实现自定义路由
2017/02/04 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
Flask中获取小程序Request数据的两种方法
2017/05/12 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
python机器学习之神经网络(三)
2017/12/20 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python安装whl文件过程图解
2020/02/18 Python
python实现飞船大战
2020/04/24 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
WiFi云数码相框:Nixplay
2018/07/05 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
详细的本科生职业生涯规划范文
2014/09/16 职场文书
飞越疯人院观后感
2015/06/09 职场文书
法律讲堂观后感
2015/06/11 职场文书
大学生十八大感想
2015/08/11 职场文书
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript