潘正

Vue.js起手式+Vue小作品实战

本文主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用；
在最后，我参考SegmentFault上的一篇技博，对Vue进行初入的实战，目的是将新鲜学到的知识立即派上用场；
如果你还是前端的小白，相信这篇文章可能会对产生一些帮助和引起思想的碰撞，因为大家的学习历程是相似的，遇到的困惑也有一定的共通性，如果文章出现谬误之处，欢迎各位童鞋及时指正；

1.Vue.js是什么

2.Vue.js的基本语法

3.Vue.js的小作品

1. Vue.js是什么

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是Vue 的核心库只关注视图层。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js是一种MVVM框架，其中html是view层，js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变；

2.Vue的基本语法

2.1 Vue构造函数开启Vue之旅

通过构造函数Vue创建一个Vue的根实例

 1 
 2 ---
 3 var vm = new Vue({
 4   //options
 5   el:'#el',
 6   data:{},
 7   methods:{}
 8 })
 9 ---
10 //扩展Vue构造器
11 var MyComponent = Vue.extend({
12     //扩展选项
13 })
14 var vm = new MyComponent({})

解读：

使用Vue构造函数创建一个Vue实例，然后通过Vue实例的el接口实现和HTML元素的挂载；
构造函数Vue需要传入一个选项对象，可包含挂载元素、数据、方法和生命周期钩子等；
构造函数Vue可以通过extend方法实现扩展，从而可以用预定义的选项创建可复用的组件构造函数，但是构建组件的常用方法是使用Vue.component()接口去实现；

2.2 Vue实例的属性和方法

Vue实例将代理data对象的所有属性，也就是说部署在data对象上的所有属性和方法都将直接成为Vue实例的属性和方法

 1 {{message}}
 2   
 3 
 4 ---
 5 var app = new Vue({
 6     el:'#app',
 7     data:{
 8       message:'hello world!',
 9       sayHello:function(){
10           console.log(1)
11       }
12   }
13 })
14 ---
15 //如果想要获取到app这一实例中选项的对象，Vue提供$进行获取
16 app.$el === document.getElementById('app')//true
17 app.$data.message//hello world

【demo】

【TIP】
Vue实例所代理data对象上的属性只有在实例创建的同时进行初始化才具有响应式更新，若在实例创建之后添加是不会触发视图更新的；

2.3数据绑定操作

绑定文本和HTML

 1 
 2     {{msg}}
 3     
 4 
 5 ---
 6 var app  = new Vue({
 7     el: '#app',
 8     data:{
 9       msg: 'hello world!',
10       hi:'hi'
11   }
12 })

解读：

HTML部分实现数据的动态绑定，这个数据是vue实例的属性值；
JS部分的语法可以从jQuery角度去理解，相当于创建一个Vue实例，这个实例指向#app，并在Vue提供的固定接口data上定义Vue实例的属性；
使用{{message}}的mustache语法只能将数据解释为纯文本，为了输出HTML，可以使用v-html指令；

绑定数据在元素的属性

 1 
 2      {{message}}
 3   
 4 ---
 5 var app = new Vue({
 6   el: '#app',
 7   data:{
 8     message: 'hello world!',
 9     red: 'color:red'
10   }
11 })

解读：

定义在Vue实例的data接口上的数据的绑定灵活的，可以绑定在DOM节点内部，也可以绑在属性上；
绑定数据到节点属性上时，需要使用v-bind指令，这个元素节点的 title属性和 Vue 实例的 message属性绑定到一起，从而建立数据与该属性值的绑定，也可以使用v-bind:href="url"的缩写方式:href="url"；
v-once指令能够让你执行一次性的插值，当数据改变时，插值处的内容不会更新；
【demo】

使用JS表达式处理数据

 1  
 2     {{num + 10 }}
 3     {{message + 'jirengu'}}
 4 
 5 ---
 6 var app = new Vue({
 7   el: '#app',
 8   data:{
 9     num:10,
10     message: 'hello world!',
11     seen:true
12   }
13 })

【demo】

使用过滤器来格式化数据


    {{message | capitalize}}
  
---
var app = new Vue({
  el: '#app',
  data:{
    message: 'hello world!',
    seen:true,
  },
  filters:{
    capitalize:function(value){
      if(!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

【demo】

条件指令控制DOM元素的显示操作

 1 
 2      {{message}}
 3   
 4 ---
 5 var app = new Vue({
 6   el: '#app',
 7   data:{
 8     message: 'hello world!',
 9     seen:true
10   }
11 })

解读：

v-if指令可以绑定一个属性值为布尔型的属性，当值为真时，元素将显示，反之则消失；

循环指令实现数据的遍历

 1  
 2     
 3       
 4         {{ item.text }}
 5       
 6     
 7 
 8 ---
 9 var app = new Vue({
10   el: '#app',
11   data:{
12     items:[
13       {text:'Vue'},
14       {text:'React'},
15       {text:'Angular'}
16     ]
17   }
18 })

解读：

v-for可以绑定数组型数据进行绑定，并使用item in items形式，从而数据的遍历操作；

【demo】

事件绑定指令可以实现事件监听

 1 
 2   {{message}}
 3   
 4 
 5 ---
 6 var app = new Vue({
 7   el: '#app',
 8   data:{
 9     message: 'hello world!'
10   },
11   methods:{
12   reverseMessage:function(){
13     this.message = this.message.split('').reverse().join('')
14     }
15   }
16 })

解读：

v-on指令用于监听事件操作，click="reverseMessage"定义点击事件后执行的回调函数；
v-on指令也可以采用缩写方式：@click="method"
在Vue实例中，提供methods接口用于统一定义函数；

【demo】

小结

本章涉及Vue的基础的数据绑定操作，内容包括：

{{message}}实现文本数据的绑定，并且文本数据可以使用JS表达式和过滤器进行进一步处理；
-v-html="hi"实现HTML数据的绑定；
v-bind:href="url"实现属性数据的绑定；
v-if="seen"和v-for="item in items"指令实现流程控制；
v-on:click="method"指令实现事件监听

2.4计算属性

使用计算属性完成一些数据计算操作

 1 
 2     Original message : {{message}}
 3     Reversed message : {{ReversedMessage}}
 4   
 5 ---
 6 var app = new Vue({
 7   el: '#app',
 8   data:{
 9     message: 'hello world!',
10   },
11   computed:{
12     ReversedMessage:function(){
13      return  this.message.split('').reverse().join('')
14     }
15   }
16 })

解读：

Vue实例提供computed对象，我们可以在对象内部定义需要进行计算的属性ReverseMessage，而提供的函数将作为属性的getter，即获取器；
上述的代码使得app.ReverseMessage依赖于app.message；
与先前直接在{{message.split('').reverse().join('') }}使用表达式相比，它让模板过重并且难以维护代码；

计算属性 VS Methods

 1 
 2     Original message : {{message}}
 3     Reversed message : {{ReversedMessage}}
 4      Reversed message:{{reversedMessage()}}   
 5   
 6 ---
 7 var app = new Vue({
 8   el: '#app',
 9   data:{
10     message: 'hello world!',
11   },
12   computed:{
13     ReversedMessage:function(){
14      return  this.message.split('').reverse().join('')
15     }
16   },
17   methods:{
18     reversedMessage:function(){
19      return  this.message.split('').reverse().join('')
20     }
21   }
22 })
23 解读：
24 
25 通过Vue实例的methods接口，我们在模板中调用reversedMessage函数同样实现需求；
26 methods与computed方法的区别在于：computed的数据依赖于app.message，只要message未变，则访问ReverseMessage计算属性将立即返回之前的计算结果，而methods则每次重新渲染时总是执行函数；
27 如果有缓存需要，请使用computed方法，否则使用methods替代；
28 计算属性的setter
29 
30 Vue实例的computed对象默认只有getter，如果你要设置数据，可以提供一个setter，即设置器；
31 
32  
33     Hi,I'm{{fullName}}
34 
35 ---
36 var app = new Vue({
37   el: '#app',
38   data:{
39     message: 'hello world!',
40     name:'Teren'
41   },
42   computed:{
43     fullName:{
44       get:function(){
45          return this.name   
46       },
47       set:function(value){
48         this.name = value
49       }
50     }
51   }
52 })

2.5Class与Style的绑定

绑定Class

 1 
 2     
 3       Hello world!
 4    
 5  こんにちは     
 6    你好
 7     
 8     
 9 Olá
10     
11   
12 ---
13 //css
14 .static{
15   width: 200px;
16   height: 100px;
17   background: #ccc;
18 }
19 .active{
20   color:red;
21 }
22 .error{
23   font-weight: 800;
24 }
25 ---
26 var app = new Vue({
27   el: '#app',
28   data:{
29    isActive:true,
30    hasError:true,
31    classObj:{
32      static:true,
33      active:true,
34      error:true,
35    },
36   staticClass:'static',
37   activeClass:'active',
38   errorClass:'error',
39 
40   },
41   computed:{
42     style:function(){
43       return {
44         active: this.isActive,
45         static:true,
46         error:this.hasError
47       }
48     }
49   },
50   methods:{
51     changeColor:function(){
52       this.isActive = !this.isActive
53     }
54   }
55 })

解读：

通过v-bind:class="{}"或v-bind:class=[]方式为模板绑定class
通过v-bind:class="{active:isActive,error:hasError}"绑定class，首先要在css中设置.active和,error，然后在Vue实例的data对象中设置isActive和hasError的布尔值；也可以直接传一个对象给class,即v-bind:class="classObj，再在data对象上直接赋值:

 
           data:{ 
          
           classObj:{ 
          
           static 
           : 
           true 
           , 
          
           active: 
           true 
           , 
          
           error: 
           true 
           , 
          
           } 
          
           你也可以通过传递数组的方式为 
           class 
           赋值v-bind: 
           class 
           = 
           "[staticClass,activeClass,errorClass]" 
           ，此时你要在data对象上为数组的元素的属性赋值： 
          
           data:{ 
          
           staticClass: 
           'static' 
           , 
          
           activeClass: 
           'active' 
           , 
          
           errorClass: 
           'error' 
           , 
          
           }

【TIP】无论是哪种方式，前提都是css中的class要先设定

【demo】

绑定style

 1 
 2     Hello World!
 3     你好
 4   
 5 ---
 6 var app = new Vue({
 7   el: '#app',
 8   data:{
 9     styleObj:{
10     fontWeight:800,
11     color:'red'
12   },
13     bgObj:{
14       width:'100px',
15       height:'80px',
16       background:'#ccc'
17     }
18   },
19 })

解读:

绑定style到模板的方法有两种，一是v-bind:style="styleObj"，然后在data对象上定义styleObj;而是可以通过数组方式为style传入多个样式对象

【demo】

2.6条件渲染和列表渲染

前面简单介绍了一下v-if、v-for和v-on指令，下面的部分将详细介绍以上3个指令；

条件渲染

 1 
 2   Hello World!
 3   Hello Universal
 4   
 8   Show Me
 9   
10 ---
11 var app = new Vue({
12   el: '#app',
13   data:{
14      ok:true,
15      motto:true,
16   },
17 })

解读：

通过v-if和v-else指令实现条件渲染，其中v-if="value"的valuey
要在data对象中赋布尔值，v-if支持

Vue.js起手式+Vue小作品实战

1. Vue.js是什么

2.Vue的基本语法

hi

Steve Jobs

Hello World

I'm the parent title

I'm the child title

Here might be a page title

Here might be a page title

3. 实战之Vue小作品

你可能感兴趣的:(Vue.js起手式+Vue小作品实战)