Vue学习第三天

Vue模板语法

插值表达式

    <div>{{name}}</div>

v-html语句和v-text语句

    <div v-text="name"></div>
    <div v-html="name"></div>

二者的区别在于，v-text直接将内容复制给页面，而v-html则将经过解析之后再将结果展示，示例如下：

<div id="app">
   <div v-text="name"></div>
    <div v-html="name"></div>
 </div>
  <scrpit>
   var vm = new Vue({
   el:"#app",
   data:{
   name:"<h1>Dell</h1>"
   })
 </script>   

输出示例：
<h1>Dell</h1>
Dell(h1格式输出）

Vue与js
所有Vue中的指令都可以去写js的表达式，例如：

<div id="app">
   <div v-text="name +'mark'"></div>
    <div v-html="name+'mark'"></div>
 </div>
  <scrpit>
   var vm = new Vue({
   el:"#app",
   data:{
   name:"Dell"
   })
 </script>   

输出示例：
Dell mark
Dell mark

同样在插值表达式中野可以去写js语句，例如：

<div>{{name+'mark'}}</div>

输出示例：
Dell mark

计算属性、方法、侦听器

<div id="app">
    {{fullName}}
    {{age}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstName:"Dell",
            lastName:"Lee",
            age:27
        },
        //计算属性
       computed:{
            fullName:function () {
                return this.firstName + " " +this.lastName;
            }
        }
    })

计算属性computed在一定程度上解决了数据冗余，同时计算属性存在一个缓存区，当计算属性中依赖的值没有发生改变时，计算属性会直接调用缓存区的值，不需要再次运算。

<div id="app">
    {{fullName（）}}//方法的调用需要注意括号的添加
    {{age}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstName:"Dell",
            lastName:"Lee",
            age:27
        },
        //方法
        methods:{
            fullName:function () {
                return this.firstName + " " +this.lastName;
            }
        }
   })

直接用方法也可以实现上述功能，但是当重新渲染时，方法并不能实现缓存效果，即一旦有数据发生改变，方法中的内容也将被重新渲染。

<div id="app">
    {{fullName}}
    {{age}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstName:"Dell",
            lastName:"Lee",
            age:27
        },
        //监听器
        watch:{
            firstName: function () {
                this.fullName = this.firstName + " " + this.lastName;
            },
            lastName: function () {
                this.fullName = this.firstName + " " + this.lastName;
            }
        }
    })

使用侦听器的方法与计算属性一样，存在缓存功能。但是由于监听器的结构比计算属性要复杂的多，所以一般我们大多采用计算属性方法来实现该项功能。
计算属性的setter和getter

<div id="app">
    {{fullName}}
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            firstName:"Dell",
            lastName:"Lee",
        },
        //计算属性
          computed:{
              fullName:{
                  get:function () {
                      return this.firstName + " " +this.lastName;
                  },
                  set:function (value) {
                      var arr = value.split(" ");
                      this.firstName = arr[0];
                      this.lastName = arr[1];
                  }
              }
          }
    })
</script>

计算属性中的get和set方法允许用户对对象属性进行修改，并重新渲染展示。
split()函数复习回顾
split()方法用于把一个字符串分割成字符串数组。
语法部分

stringObject.split(separator,howmany)

separator属性：决定了数组以什么标识符来划分，是必须的属性；
howmany属性：决定了字符串的长度，是可选的属性；
示例：

value = "how are you?"
 var arr = value.split(" ");     //['how','are','you?']
 var arr = value.split(" ",2);   //['how','are']