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 Object与Function使用
Jan 11 Javascript
jquery插件制作 自增长输入框实现代码
Aug 17 jQuery
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
Vue中JS动画与Velocity.js的结合使用
Feb 13 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 Javascript
JS控制只能输入数字并且最多允许小数点两位
Nov 24 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
vue中的.$mount('#app')手动挂载操作
Sep 02 Javascript
js+canvas实现画板功能
Sep 13 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的declare控制符和ticks教程(附示例)
2014/03/21 PHP
php绘制圆形的方法
2015/01/24 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
JavaScript实现列表分页功能特效
2015/05/15 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
AngularJS入门教程之AngularJS指令
2016/04/18 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
JS中substring与substr的用法
2016/11/16 Javascript
jsTree使用记录实例
2016/12/01 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
干货!教大家如何选择Vue和React
2017/03/13 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
python实现石头剪刀布程序
2021/01/20 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Python读取csv文件实例解析
2019/12/30 Python
详解anaconda离线安装pytorchGPU版
2020/09/08 Python
材料成型专业个人求职信范文
2013/09/25 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
中医学专业自荐信范文
2014/04/01 职场文书
保护动物的标语
2014/06/11 职场文书
2014年保育员个人工作总结
2014/12/02 职场文书
项目战略合作意向书
2015/05/08 职场文书
居委会工作总结2015
2015/05/18 职场文书