vue.js初学入门教程（2）

接着上一篇vue慢速入门教程学习。

4.组件使用基础

什么是组件？组件可以理解为可重用的自定义HTML。
可以使用一堆组件来构造大型应用，任意类型的应用界面都可以抽象为一个组件树：

可以把组件代码按照template、style、script的拆分方式，放置到对应的.vue文件中。
组件预定义选项中最核心的几个：

模板（template）、初始数据（data）、接受的外部参数（props）、方法（methods）、生命周期钩子函数（lifecycle hooks）。

4.1 基本步骤

使用组件首先需要创建构造器：

var MyComponent = Vue.extend({
 // 选项...
})

要把这个构造器用作组件，需要用 Vue.component(tag, constructor) 注册 ：

// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)

然后使用：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="xxx">
   <my-component></my-component>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  var myComponent = Vue.extend({
   template: '<p>9898不得了！</p>'
  });
  Vue.component('my-component', myComponent);
  new Vue({
   el: '#xxx'
  });
 </script>
</html>

其中，

Vue.component('my-component', MyComponent)这种是全局注册，第一个参数是注册组件的名称，第二个参数是组件的构造函数；

选项对象的template属性用于定义组件要渲染的HTML；

组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。组件挂载在vue实例上才会生效。

对于自定义标签名字，Vue.js 不强制要求遵循 W3C 规则（小写，并且包含一个短杠），为了避免不必要的事端尽管遵循这个规则。

4.2 局部注册

用实例选项 components 注册：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="xxx">
   <my-component></my-component>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  var myComponent = Vue.extend({
   template: '<p>9898不得了！</p>'
  });
//  Vue.component('my-component', myComponent);
  new Vue({
   el: '#xxx',
   components: {
    'my-component': myComponent
   }
  });
 </script>
</html>

也可以在组件中定义并使用其他组件：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="example">
   <xx-component></xx-component>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  var Child = Vue.extend({
   template: '<div>i am zai</div>',
   replace: true
  })
  var Parent = Vue.extend({
   template: '<p>i am baba</p><br/><wa></wa>',
   components: {
    // <xx-component>只能用在父组件模板内
    'wa': Child
   }
  })
  // 创建根实例
  new Vue({
   el: '#example',
   components: {
    'xx-component': Parent
   }
  })
 </script>
</html>

其中，子组件只能在父组件的template中使用。

另外，有简化的写法，Vue在背后会自动地调用Vue.extend()：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="xxx">
   <my-component-continue></my-component-continue>
  </div>
 </body>
 <script src="js/vue.js"></script>
 <script>
  // 局部注册的简化写法
  var vm2 = new Vue({
   el: '#xxx',
   components: {
    'my-component': {
     template: '<div>9898不得了！</div>'
    },
    'my-component-continue': {
     template: '<div>粮食大丰收！</div>'
    }
   }
  })
 </script>
</html>

4.3 组件选项问题

在定义组件的选项时，data和el选项必须使用函数。

如果data选项指向某个对象，这意味着所有的组件实例共用一个data。
所以应当使用一个函数作为 data 选项，让这个函数返回一个新对象：

Vue.component('my-component', {
 data: function(){

  return {a : 1}

 }

})

同理，el 选项用在 Vue.extend() 中时也须是一个函数。

5.数据传递

Vue.js组件之间有三种数据传递方式：

props
组件通信
slot

5.1 props

　　“props”是组件数据的一个字段，期望从父组件传下来数据。因为组件实例的作用域是孤立的，所以子组件需要显式地用props选项来获取父组件的数据。

　　Props选项可以是字面量、表达式、绑定修饰符。

5.1.1 字面量

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <child msg="hello!"></child>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   Vue.component('child', {
    // 声明 props
    props: ['msg'],
    // prop 可以用在模板内
    // 可以用 `this.msg` 设置
    template: '<span>{{ msg }}你困吗</span>'
   })
   new Vue({
    el: 'body'
   })
  </script>
 </body>
</html>

HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）：

Vue.component('child', {
 // camelCase in JavaScript
 props: ['myMessage'],
 template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>　

5.1.2 动态

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 绑定动态 Props 到父组件的数据。每当父组件的数据变化时，也会传导给子组件。比如酱：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div>
   <input v-model="parentMsg">
   <br>
   <child :my-message="parentMsg"></child>
  </div>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   Vue.component('child', {
    props: ['myMessage'],
    template: '<span>{{ myMessage }}你困吗</span>'
   })
   new Vue({
    el: 'body',
    data:{
     parentMsg:''
    }
   })
  </script>
 </body>
</html>

当我在input里面输入哈哈的时候：

5.1.3 绑定类型

可以使用绑定修饰符：

.sync，双向绑定
.once，单次绑定

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。

不过需要注意的是：如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。

示例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="app">

   <table>
    <tr>
     <th colspan="3">父组件数据</td>
    </tr>
    <tr>
     <td>name</td>
     <td>{{ name }}</td>
     <td><input type="text" v-model="name" /></td>
    </tr>
    <tr>
     <td>age</td>
     <td>{{ age }}</td>
     <td><input type="text" v-model="age" /></td>
    </tr>
   </table>

   <my-component v-bind:my-name.sync="name" v-bind:my-age="age"></my-component>
  </div>

  <template id="myComponent">
   <table>
    <tr>
     <th colspan="3">子组件数据</td>
    </tr>
    <tr>
     <td>my name</td>
     <td>{{ myName }}</td>
     <td><input type="text" v-model="myName" /></td>
    </tr>
    <tr>
     <td>my age</td>
     <td>{{ myAge }}</td>
     <td><input type="text" v-model="myAge" /></td>
    </tr>
   </table>
  </template>
  <script src="js/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     name: 'k',
     age: 24
    },
    components: {
     'my-component': {
      template: '#myComponent',
      props: ['myName', 'myAge']
     }
    }
   })
  </script>
 </body>
</html>

上面这段设置了名字双向，年龄单向：

以下是一个大神的综合示例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div id="app">

   <table>
    <tr>
     <th colspan="3">父组件数据</td>
    </tr>
    <tr>
     <td>name</td>
     <td>{{ name }}</td>
     <td><input type="text" v-model="name" /></td>
    </tr>
    <tr>
     <td>age</td>
     <td>{{ age }}</td>
     <td><input type="text" v-model="age" /></td>
    </tr>
   </table>

   <my-component v-bind:my-name.sync="name" v-bind:my-age="age"></my-component>
  </div>

  <template id="myComponent">
   <table>
    <tr>
     <th colspan="3">子组件数据</td>
    </tr>
    <tr>
     <td>my name</td>
     <td>{{ myName }}</td>
     <td><input type="text" v-model="myName" /></td>
    </tr>
    <tr>
     <td>my age</td>
     <td>{{ myAge }}</td>
     <td><input type="text" v-model="myAge" /></td>
    </tr>
   </table>
  </template>
  <script src="js/vue.js"></script>
  <script>
   var vm = new Vue({
    el: '#app',
    data: {
     name: 'k',
     age: 24
    },
    components: {
     'my-component': {
      template: '#myComponent',
      props: ['myName', 'myAge']
     }
    }
   })
  </script>
 </body>
</html>


　　

可以检索：

其中，{{ col | capitalize}}过滤，首字母大写。

<tr v-for="entry in data | filterBy filterKey">

　　<td v-for="col in columns">

　　　　{{entry[col]}}

　　</td>

</tr>

过滤搜索关键词；

双循环，tr循环data条数，4行，entry表示每行；td循环columns数量，3列，col表示每列，entry[col]取具体数据。

props: {
　　data: Array,
　　columns: Array,
　　filterKey: String

}

验证：父组件传递过来的data和columns必须是Array类型，filterKey必须是字符串类型。

验证要求示例：

Vue.component('example', {
 props: {
 // 基础类型检测 （`null` 意思是任何类型都可以）
 propA: Number,
 // 多种类型 (1.0.21+)
 propM: [String, Number],
 // 必需且是字符串
 propB: {
  type: String,
  required: true
 },
 // 数字，有默认值
 propC: {
  type: Number,
  default: 100
 },
 // 对象/数组的默认值应当由一个函数返回
 propD: {
  type: Object,
  default: function () {
  return { msg: 'hello' }
  }
 },
 // 指定这个 prop 为双向绑定
 // 如果绑定类型不对将抛出一条警告
 propE: {
  twoWay: true
 },
 // 自定义验证函数
 propF: {
  validator: function (value) {
  return value > 10
  }
 },
 // 转换函数（1.0.12 新增）
 // 在设置值之前转换值
 propG: {
  coerce: function (val) {
  return val + '' // 将值转换为字符串
  }
 },
 propH: {
  coerce: function (val) {
  return JSON.parse(val) // 将 JSON 字符串转换为对象
  }
 }
 }
})

Stringtype 可以是下面原生构造器：

Number
Boolean
Function
Object
Array

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

当 prop 验证失败时，Vue 将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。

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

参考：Vue.js——60分钟组件快速入门（上篇）

　　《vue.js权威指南》

赞 (0)

相关推荐

  • Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    Vue.js第一天学习笔记（数据的双向绑定、常用指令）

    数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时: 将input 框里面的值清空时: 重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <div

  • Vue.js每天必学之表单控件绑定

    基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.根据控件类型它自动选取正确的方法更新元素.尽管有点神奇,v-model 不过是语法糖,在用户输入事件中更新数据,以及特别处理一些极端例子. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit

  • 学习vue.js中class与style绑定

    关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu

  • vue.js学习笔记之绑定style样式和class列表

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q

  • Vue.js每天必学之Class与样式绑定

    数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"

  • Vue.js 60分钟轻松入门

    Vue.js 60分钟轻松入门

    .btn-demo { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #19b586; text-decoration: none; border: none; border-radius: 4px; color: #fff !important; text-decoration: none !important; cursor: poi

  • Vue.js绑定HTML class数组语法错误的原因分析

    Vue.js绑定HTML class数组语法错误,详情如下所示: 昨天在官网教程上发现一个错误是这样的,下面看图 http://cn.vuejs.org/guide/class-and-style.html 当有多个条件class时这样写有些繁琐.在1.0.19+中,可以在数组语法中使用对象语法: 如果这样写是可以执行成功的,但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC:

  • Vue.js每天必学之数据双向绑定

    Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新. 你也可以只处理

  • vue.js入门教程之绑定class和style样式

    一.前言 相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo

  • vue.js初学入门教程（2）

    vue.js初学入门教程（2）

    接着上一篇vue慢速入门教程学习. 4.组件使用基础 什么是组件?组件可以理解为可重用的自定义HTML. 可以使用一堆组件来构造大型应用,任意类型的应用界面都可以抽象为一个组件树: 可以把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 组件预定义选项中最核心的几个: 模板(template).初始数据(data).接受的外部参数(props).方法(methods).生命周期钩子函数(lifecycle hooks). 4.1 基本步骤 使用组件首

  • vue.js初学入门教程（1）

    vue.js初学入门教程（1）

    Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 不太懂也没关系,慢慢就懂了. 1.基础示例 代码: <!DOCTYPE html> <html> <head> &l

  • Vue.js快速入门教程

    Vue.js快速入门教程

    像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

  • webpack+vue.js快速入门教程

    前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

  • Vue.js快速入门实例教程

    什么是vue vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 一.基本结构 index.html代码: <script src="../vue.js"></script> <div id="app"> {{ message }} </div> <script src="app.js"></script> <

  • 超简单的Vue.js环境搭建教程

    超简单的Vue.js环境搭建教程

    vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

  • Three.js快速入门教程

    Three.js快速入门教程

    引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

  • 使用淘宝镜像cnpm安装Vue.js的图文教程

    前言 Vue.js是前端一个比较火的MVVM框架,要使用它,我们必须提前配置,其中有一种安装方式是使用npm,比较适合比较大型的应用.今天就来看看这种方式如何操作,由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue. 步骤 首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了. 1.打开命令行窗口,输入 npm install -g cnpm --registry=https://r

  • JavaScript的Vue.js库入门学习教程

    JavaScript的Vue.js库入门学习教程

    Vue是一个小巧轻便的javascript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. MVVM 数据绑定 MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angula

  • JS库之Three.js 简易入门教程(详解之一)

    JS库之Three.js 简易入门教程(详解之一)

    开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章

随机推荐