资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往

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

付伦发布于2019-08-01 16:07 / 2127人阅读

摘要：本文是小羊根据文档进行解读的第一篇文章，主要内容涵盖的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用在最后，我参考上的一篇技博，对进行初入的

本文是小羊根据Vue.js文档进行解读的第一篇文章，主要内容涵盖Vue.js的基础部分的知识的，文章顺序基本按照官方文档的顺序，每个知识点现附上代码，然后根据代码给予个人的一些理解，最后还放上在线编辑的代码以供练习和测试之用；
在最后，我参考SegmentFault上的一篇技博，对Vue进行初入的实战，目的是将新鲜学到的知识立即派上用场；

如果你还是前端的小白，相信这篇文章可能会对产生一些帮助和引起思想的碰撞，因为大家的学习历程是相似的，遇到的困惑也有一定的共通性，如果文章出现谬误之处，欢迎各位童鞋及时指正；

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的根实例


---
var vm = new Vue({
  //options
  el:"#el",
  data:{},
  methods:{}
})
---
//扩展Vue构造器
var MyComponent = Vue.extend({
    //扩展选项
})
var vm = new MyComponent({})

解读：

使用Vue构造函数创建一个Vue实例，然后通过Vue实例的el接口实现和HTML元素的挂载；

构造函数Vue需要传入一个选项对象，可包含挂载元素、数据、方法和生命周期钩子等；

构造函数Vue可以通过extend方法实现扩展，从而可以用预定义的选项创建可复用的组件构造函数，但是构建组件的常用方法是使用Vue.component()接口去实现；

2.2 Vue实例的属性和方法

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

{{message}}
  

---
var app = new Vue({
    el:"#app",
    data:{
      message:"hello world!",
      sayHello:function(){
          console.log(1)
      }
  }
})
---
//如果想要获取到app这一实例中选项的对象，Vue提供$进行获取
app.$el === document.getElementById("app")//true
app.$data.message//hello world

【demo】

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

2.3数据绑定操作

绑定文本和HTML


    {{msg}}
    

---
var app  = new Vue({
    el: "#app",
    data:{
      msg: "hello world!",
      hi:"hi"
  }
})

解读：

HTML部分实现数据的动态绑定，这个数据是vue实例的属性值；

JS部分的语法可以从jQuery角度去理解，相当于创建一个Vue实例，这个实例指向#app，并在Vue提供的固定接口data上定义Vue实例的属性；

使用{{message}}的mustache语法只能将数据解释为纯文本，为了输出HTML，可以使用v-html指令；

绑定数据在元素的属性

 
     {{message}}
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
    red: "color:red"
  }
})

解读：

定义在Vue实例的data接口上的数据的绑定灵活的，可以绑定在DOM节点内部，也可以绑在属性上；

绑定数据到节点属性上时，需要使用v-bind指令，这个元素节点的 title属性和 Vue 实例的 message属性绑定到一起，从而建立数据与该属性值的绑定，也可以使用v-bind:href="url"的缩写方式:href="url"；

v-once指令能够让你执行一次性的插值，当数据改变时，插值处的内容不会更新；
【demo】

使用JS表达式处理数据

 
    {{num + 10 }}
    {{message + "jirengu"}}

---
var app = new Vue({
  el: "#app",
  data:{
    num:10,
    message: "hello world!",
    seen:true
  }
})

【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元素的显示操作


     {{message}}
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
    seen:true
  }
})

解读：

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

循环指令实现数据的遍历

 
    
      
        {{ item.text }}
      
    

---
var app = new Vue({
  el: "#app",
  data:{
    items:[
      {text:"Vue"},
      {text:"React"},
      {text:"Angular"}
    ]
  }
})

解读：

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

【demo】

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


  {{message}}
  

---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!"
  },
  methods:{
  reverseMessage:function(){
    this.message = this.message.split("").reverse().join("")
    }
  }
})

解读：

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计算属性

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

 
    Original message : {{message}}
    Reversed message : {{ReversedMessage}}
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
  },
  computed:{
    ReversedMessage:function(){
     return  this.message.split("").reverse().join("")
    }
  }
})

解读：

Vue实例提供computed对象，我们可以在对象内部定义需要进行计算的属性ReverseMessage，而提供的函数将作为属性的getter，即获取器；

上述的代码使得app.ReverseMessage依赖于app.message；

与先前直接在{{message.split("").reverse().join("") }}使用表达式相比，它让模板过重并且难以维护代码；

计算属性 VS Methods

  
    Original message : {{message}}
    Reversed message : {{ReversedMessage}}
     Reversed message:{{reversedMessage()}}   
  
---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
  },
  computed:{
    ReversedMessage:function(){
     return  this.message.split("").reverse().join("")
    }
  },
  methods:{
    reversedMessage:function(){
     return  this.message.split("").reverse().join("")
    }
  }
})

解读：

通过Vue实例的methods接口，我们在模板中调用reversedMessage函数同样实现需求；

methods与computed方法的区别在于：computed的数据依赖于app.message，只要message未变，则访问ReverseMessage计算属性将立即返回之前的计算结果，而methods则每次重新渲染时总是执行函数；

如果有缓存需要，请使用computed方法，否则使用methods替代；

计算属性的setter

Vue实例的computed对象默认只有getter，如果你要设置数据，可以提供一个setter，即设置器；

 
    Hi,I"m{{fullName}}

---
var app = new Vue({
  el: "#app",
  data:{
    message: "hello world!",
    name:"Teren"
  },
  computed:{
    fullName:{
      get:function(){
         return this.name   
      },
      set:function(value){
        this.name = value
      }
    }
  }
})

2.5Class与Style的绑定

绑定Class


    
      Hello world!
   
 こんにちは     
   你好
    
    
Olá
    
  
---
//css
.static{
  width: 200px;
  height: 100px;
  background: #ccc;
}
.active{
  color:red;
}
.error{
  font-weight: 800;
}
---
var app = new Vue({
  el: "#app",
  data:{
   isActive:true,
   hasError:true,
   classObj:{
     static:true,
     active:true,
     error:true,
   },
  staticClass:"static",
  activeClass:"active",
  errorClass:"error",
  
  },
  computed:{
    style:function(){
      return {
        active: this.isActive,
        static:true,
        error:this.hasError
      }
    }
  },
  methods:{
    changeColor:function(){
      this.isActive = !this.isActive
    }
  }
})

解读：

通过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

  
    Hello World!
    你好
  
---
var app = new Vue({
  el: "#app",
  data:{
    styleObj:{
    fontWeight:800,
    color:"red"
  },
    bgObj:{
      width:"100px",
      height:"80px",
      background:"#ccc"
    }
  },
})

解读:

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

【demo】

2.6条件渲染和列表渲染

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

条件渲染


  Hello World!
  Hello Universal
  
  Show Me
  
---
var app = new Vue({
  el: "#app",
  data:{
     ok:true,
     motto:true,
  },
})

解读：

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

资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

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

2.1 Vue构造函数开启Vue之旅

2.2 Vue实例的属性和方法

2.3数据绑定操作

hi

2.4计算属性

2.5Class与Style的绑定

2.6条件渲染和列表渲染

Steve Jobs

2.7 事件监听

2.8 表单控件绑定

2.9 组件

Hello World

I"m the parent title

I"m the child title

Here might be a page title

Here might be a page title

2.10 vue-resource插件

相关文章

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

**踩坑--- 基于钉钉的Weex微应用开发起手式（其实写完发现变成Weex相关资料汇总了）**

发表评论

0条评论

付伦

男|高级讲师

TA的文章

金胜维固态硬盘MK8115主控开卡成功教程

「Mobi.css」轻量，灵活的移动端 css library， built with love

Web前端开发规范文档

js知识梳理5：关于函数的要点梳理(1)

JavaScript面向对象编程——原型

前端面试每日3+1（周汇总2019.08.25）

防止按钮在短时间内被多次点击多次触发事件

Git常用命令小结

最新活动