vue.js指令和组件的详细介绍和示例

大家好，本文介绍了vue.js的一个基本概念

Vue.js指令

div id=' app ' div v-text=' message '/div/div var app=new Vue({ El : ' # app '，data : { message : ' Hello Vue！'}})在这个例子中，我们可以得到“hellowue！”被插入到v-text所在的div元素中这个字符串，那么我们为什么会产生这样一个结果，我们来分析一下：

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

第二步是在#app中，识别v-text指令，它接受的参数是‘message’。vue获取此参数，并在其实例化数据中查找名为message的属性，发现message的内容最初是“hello vue”，因此它向页面呈现“hello vue”。

类似的指令包括用于元素的事件绑定的v-if、条件判断、v-for、列表呈现和v-on。等等。Vue.js主要通过这些内置指令与页面即模板进行交互。

Vue.js组件

模块化在开发前端页面方面有很多优势，比如通用侧边栏，比如通用日期选择器。

模块化的另一个优点是简化了开发逻辑，使项目具有可扩展性。

vue.js的模块化主要体现在组件上，以组件为单位进行模块化。

在实例化Vue对象之前，我们可以通过Vue.component方法注册全局组件，例如：

全局组件

//告诉Vue我需要一个叫todo-item的组件，它的配置如下，即vue.component ('todo-item '，{props: ['todo'])，里面包含道具和模板。template 3360 ' Li { { todo . text } }/Li ' })//实例化一个vue对象，将其挂载到元素#app-7下，并设置其属性groceryList，该属性是一个数组var app7=new Vue({ el: '#app-7 '，data : { groceryList :[{ text : '蔬菜' }，{text:' cheese'}，{ text 3: '不管人们还支持什么

div id='app-7' ol！-因为全局todo-item组件已注册，所以我们可以直接使用todo-item标记在挂载范围内引用该组件，-！-组件的内部将被todo-item配置表中的模板替换以进行呈现。属性todo也是配置对象中指定的可接受参数。-todo-item v-for='增长列表中的项目' v-bind : todo=' item '/todo-item/ol/div子组件

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

我们刚才提到的每个组件都有一个配置表，它是一个js对象，例如：

{ prop :[' todo ']，template:' Li {{todo。文本}}/Li'}我们可以将此配置引入实例化的对象，并成为该vue对象的子组件，例如：

newvue({ components 3360 { ' component-a ' : { prop s :[' todo ']，template3360' li {{todo。text}}/li'})在这种情况下，和前面的全局组件一样，我们也可以在实例化对象的挂载范围内。

然后，让我们考虑子组件也可以有自己的子组件，例如：

新Vue({ components : { ' components-a ' : { prop s :[' todo ']，template : ' Li { { todo . text } }/Li '，components 3360 { ' components-b ' : { template : '我是组件b '，components 3360 <.}}}} }})如果这样继续下去，我们可以有无数个子组件组成一个组件树：

因此，一个具有Vue.js架构的网站可以看作是组件的开发，最后还有一个根节点，它是项目中唯一实例化的Vue对象，而这些组件实际上就是配置对象及其对应的模板(html片段)。

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