Vue.js 学习笔记: 第二课

       关于Vue.js相关知识，我们连载第二课

       首先来说说关于vue.js调用函数的问题，即computed和methods，举个例子

       <div id="app-1"><h1>{{details()}}</h1></div> 我们都知道双大括号中封装的是内容，所以对于当前details()后面加了括号这种，默认是一个函数方法，在js中就要将其封装在methods中，如：

       var app1 = new Vue({el:"#app-1",methods:{details:function(){return "I am iron man"}}})，这样就会在{{details()}}返回 "I am iron man"  这句话在页面上显示。

       但如果{{details}}中没有括号，这就不能用methods去封装了，需要用computed，否则页面会显示错误，内部做的处理还是一样的函数处理，返回结果之类的。

        还有一种触发函数，用v-on去绑定监听触发事件的办法，去操作这个

        <div id="app-2"><p>{{message}}</p><button v-on:click="reverseMessage">消息逆转</button></div>

        可以看出在{{ }}之中，可以选择加括号details()或者不加括号details。但是在" "双引号中，一般不加括号，现在我要求通过触发reverseMessage这个点击事件函数，来逆转message的内容。

        var app2 = new Vue({el:"#app-2",data:{message:"Hello Vue!"},methods:{reverseMessage:function(){this.message = this.message.split('').reverse().join('')}}}}) 这样就把消息逆转了。

        

       对于var vm = new Vue({el:"",data:{},methods:{}}) 内部如何调用el，data，methods呢？用 vm.$el，vm.$data，vm.$methods 前面加 $ 符号，怎么调用data内部的属性值呢? 直接用vm.message什么的即可 ，只要是data:{}大括号内部的属性名字即可调用。

        v-html: 绑定了一个html字段的内容。

        <div id="app-3"><div v-html="message"></div></div>

        var app3 = new Vue({el:"#app-3",data:{message:"<h1 style='color:red'>I am iron man</h1>"}})

       这样就会在v-html的那个div中显示一串红色的字符串I am iron man。

 

 

       接下来说说关于vue.js对 class属性的操作，都知道在html和css中离不开两个属性的操控，一个是id，一个是class，id在vue中是用作绑定标签，因为那是唯一属性，而class不能作为绑定标签的标识，而是用作这个class是否使用其中的修饰和属性。就像v-bind属性可以绑定class，也可以绑定id

       .class1{color:red}

       <div id="app-4"><p><label for="r1">改变颜色:</label><input  type="checkbox" id="r1" v-model="use"/></p><div v-bind:class="{'class1':use}">I am iron man</div></div>

        var app4 = new Vue({el:"#app-4",data:{use:false}})

       这段代码，点击复选框之后，I am iron man变成红色，取消复选框，I am iron man 变成原来的颜色，这个就是绑定表单后实时监控数据的变化。

       

       过滤器:filter

       <div id="app-5">{{message,message2 | capitalize("aa",5)}}</div>     

       过滤器的参数可以有很多,但是 | 前面的message 和 message2 必须作为过滤器的第一个参数和第二个参数，括号中的 "aa" 和 5 是作为过滤器的第3，第四个参数传入，类型可以是数值类型，也可以是字符串，对象等，其实随便什么类型都可以。

    而在传入参数时，capitalize要定义好function的传入参数的个数，然后对参数进行使用，控制，修改和返回结果。   

new Vue({
  el: '#app',
  data: {
    message: 'runoob',
    message2: 'runoob'
  },
  filters: {
    capitalize: function (value,value2,value3，value4) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)+value.substring(0,value2.length-1)+value2.charAt(value2.length-1).toUpperCase()+'<br>'+value3
    }
  }
})