vue.js功能介绍 – 指令，组件

小四
前端
2023-01-27
4热度
0评论

大家好，本文给各位做一下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 } ] } })

模板：

子组件

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

我们刚刚说的每个组件都有一个配置表，就是一个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.js 2.0开发_Vue2.0入门教程

由我主讲的vue.js课程正式上线了，课程会从类似上面的基本概念入手，带领大家理解+学习 vue.js。

学习本课程需要大家动脑自己思考，触类旁通，相信带给大家超过vue.js本身的知识和思考。

作者： fishenal

链接：https://www.imooc.com/article/17097

来源：慕课网

本文原创发布于慕课网，转载请注明出处，谢谢合作