初识Vue务逻辑上). 相当于jQuery的$('document').ready()方法.$el等挂载到DOM上时调用

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

Vue实例的创建

<body>
    <div id='app'></div>    
    <!--将Vue实例挂载此-->
</body>
<script src='https://cdn.bootcss.com/vue/2.5.16/vue.min.js'>
<script>
    var app = new Vue({
        el:'#app',               //element,必不可少的属性,指定挂载到#app上
        data:{
            example:'123'       //声明需要双向绑定的数据,建议将所有会用到的数据在data 中声明,便于维护
        },
        methods:{
            example1:function(){console.log(1)}
        },
        computed:function(){console.log(2)}
    })
</script>

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

生命周期钩子

created
mounted
beforeDestroy

文本插值和表达式

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

<div id='app'>{{example}}</div>

将这段代码加到上面的代码中,即可显示example对应的值--'123'.在{{}}中除了简单的绑定数据外,还可以使用简单的js表达式,如:

{{6+6*2}} ,会显示为18
{{6 > 3 ? '哈哈':'唉唉'}} ,三元运算符

过滤器

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

html部分

<html>
<head>
  <meta charset="utf-8">
  <title>过滤器示例</title>
</head>
<body>
  <div id="app">
    {{date | formatDate}}
    <!-- 此为过滤器的使用方法,另外过滤器可以使用多个,都以 '|' 分隔.过滤器也可传参,传参时过滤器第一个参数对应函数里的第二个参数,以此类推.因为第一个参数总是 "date" -->
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</body>
</html>

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 解析为文本

<span v-text='apple'></span>
data:{
    apple: 苹果
}

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

v-html 解析为html

<span v-html='banana'></span>
date:{
    banana: <span 'style=color:yellow'>香蕉</span>
}

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

v-bind

<style>
    .transRed{
        color:red;
    }
</style>
<div v-bind:class='className'>hh</div>
data:{
    className : transRed
}

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

<button v-on:click='count'>
</button>
data:{
  num : 0  
},
methods:{
    count:function(){
        this.num +=1
    }
}

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