这里有新鲜出炉的 vue.js 教程,程序狗速度看过来!
Vue.js 是构建 web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。
这篇文章主要介绍了 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!'
- }
- })
这个例子我们会得到,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'
- }]
- }
- })
模板:
- <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>'
- }
- }
- })
这样的话,我们和之前全局组件一样,也可以在实例化对象挂载的范围内,直接使用
那么接下来,我们考虑一下,子组件里也可以有自己的子组件,比如:
- 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 片段)。
来源: http://www.phperz.com/article/17/0610/334259.html