大家好,本文给各位做一下vue.js一个最基本的概念介绍。
大家好,本文给各位做一下vue.js一个最基本的概念介绍。
这个例子我们会得到,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进行交互,主要是通过这些内置指令来完成的。
开发前端页面,模块化有很多好处,比如公用的sidebar,比如公用的日期选择器。
模块化还有一个好处,就是简化开发逻辑,让项目具有扩展性。
vue.js的模块化主要体现在组件上,以组件为单位进行模块化。
我们可以在实例化vue对象之前,通过Vue.component方法来注册全局的组件,比如:
模板:
实际项目开发中,我们更多的使用的是子组件。
我们刚刚说的每个组件都有一个配置表,就是一个js对象,比如:
我们把这份配置引入到实例化对象里,就可以成为这个vue对象的子组件,比如:
这样的话,我们和之前全局组件一样,也可以在实例化对象挂载的范围内,直接使用
那么接下来,我们考虑一下,子组件里也可以有自己的子组件,比如:
那么这样下去,我们可以有无数个子组件,形成一个组件树:
所以,一个vue.js架构的网站,我们可以看成是一个个组件的开发,最终存在一个根节点,就是项目里唯一实例化的Vue对象,而这一个个组件,其实就是一份份配置对象,以及它们对应的template 模板(html片段)。
原文链接:https://www.f2er.com/vue/40174.html