初识Vue-白红宇

Vue是一个简单小巧,渐进式的,功能强大的技术栈.用了和Angular和React一样的MVVM模式(数据层和视图层的双向绑定,让我们无需关注DOM的操作,将更多的经历放在数据和业务逻辑上).

Vue实例的创建

Tip:访问实例下的属性直接 app.$el,其中app为实例名.其他属性则使用 app.example即可.

生命周期钩子

created 实例创建完成后调用,此阶段完成了数据观测等.尚未挂载,$el等还不可用,

mounted 相当于jQuery的$('document').ready()方法.$el等挂载到DOM上时调用.一般第一个业务逻辑会从这里开始.

beforeDestroy 实例销毁之前调用,用来解绑一些监听事件.

文本插值和表达式

使用双大括号{

{}}是基本的文本插值方法,它会将我们绑定的数据实时的显示出来(如通过控制台改变其对应的值,会实时同步到网页中).


    
     {
   {example}}
    
复制代码

将这段代码加到上面的代码中,即可显示example对应的值--'123'.在{

{}}中除了简单的绑定数据外,还可以使用简单的js表达式,如:

{
{6+6*2}} ,会显示为18

{
{6 > 3 ? '哈哈':'唉唉'}} ,三元运算符

过滤器

Vue支持在{

{}}插值的尾部加入 '|'符号对数据进行过滤,经常用于格式化文本.过滤的规则是自定义的,通过给Vue实例添加属性 filters来实现.来个例子先.

html部分

  
      过滤器示例  
    
         {
   {date | formatDate}}    
       
    
  复制代码

js部分

var plusDate = function(value){      return value<10 ? '0'+value:value    }    var app = new Vue({        el:'#app',                      data:{            date: new Date()           },      filters:{        formatDate: function(value){          var date = new Date(value);          var year = date.getFullYear();          var month = plusDate(date.getMonth()+1);          var day = plusDate(date.getDate());          var hour = plusDate(date.getHours());          var min = plusDate(date.getMinutes());          var sec = plusDate(date.getSeconds());          return year+'--' +month+'--'+day+'--'+hour+'--'+min+'--'+sec          }      },        methods:{            example1:function(){console.log(1)}        },        computed:function(){                  },        mounted:function(){          var _this = this;          this.timer = setInterval(function(){          _this.date = new Date();          },1000)        },        beforeDestory:function(){          if(this.timer){            clearInterval(this.timer)          }        }    })复制代码

指令

指令是Vue中最常用的一项功能,带有前缀 v-.能帮我们快速完成DOM操作,循环渲染,显示和隐藏.这里介绍四个.

v-text 解析为文本

data:{    apple: 苹果}复制代码

此时页面中就会显示出apple对应的值--苹果.v-text的作用与{

{}}相同.

v-html 解析为html

date:{    banana: 香蕉}复制代码

解析为html,显示黄色的香蕉两个字

v-bind


    
     hh
    
data:{    className : transRed}复制代码

文字'hh'变红.v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id 、 class 等.可简写为 ":". 4. v-on

data:{  num : 0  },methods:{    count:function(){        this.num +=1    }}复制代码

v-on用来绑定事件监听.click是事件,此外还有dbclick,mousemove,keyup等.count则是要调用的方法.可简写为 "@"