Vue的学习Ⅰ（mustache、一些指令、v-bind、计算属性、methods）

一、插值操作与一些指令

{{}}：mustache语法

mustache + v-once

<div class = "app">
  <h3>{{message}}，{{name}}</h3>
  <h3 v-once>{{message}}，{{name}}</h3>	  		/*v-once目的是当外部传入数据改变的时候不让h3里面数据的进行响应*/				
  <h3>{{message + ' ' + name}}</h3>
  <h3>{{message}} {{name}}</h3>
  <h3>{{age * 2}}</h3>
  <h3>{{age}} * 2</h3>
</div>
<script>
    const app=new Vue({
      el:'.app',
      data:{
        message:'你好',
        name:'李华',
        age:20
      }
    })
</script>

结果：

mustache + v-html与v-text

<div class = "app">	
  <h2><a :href = "url1">百度一下</a></h2>		/*a标签*/
  <h2>{{url2}}</h2>
  <h2 v-html="url2"></h2>						/*把获得的数据以html的方式输出*/
  <h2 v-text="url2"></h2>						/*把获得的数据以text的方式输出，与mustache相同不过没有mustache灵活*/
</div>
<script>
  const app=new Vue({
    el:'.app',
    data:{
      url1:'https://www.baidu.com',
      url2:'<a href = "https://www.baidu.com">百度一下</a>'
    }
  })
</script>

结果：

mustache + v-pre

<div class = "app">
  <h2>{{name}}</h2>
  <h2 v-pre>{{name}}</h2>				/*v-pre不会解析mustache语法*/
</div>
<script>
  const app=new Vue({
    el:'.app',
    data:{
      name:'李华'
    }
  })
</script>

结果：

mustache + v-cloak

Vue在执行之前v-cloak存在，执行之后v-cloak消失

/*CSS*/
<style>
  [v-cloak]{				/*但凡有属性v-cloak的元素都隐藏*/
    display: none;
  }
</style>
/*HTML和JS*/
<div class = "app">
<h2 v-cloak>{{name}}</h2>
</div>
<script>
  setTimeout(function () {			/*设置定时器，1秒后执行js代码*/
    const app=new Vue({
      el:'.app',
      data:{
        name:'李华'
      }
    })
  },1000)
</script>

结果：

开始的时候因为css的原因把DOM元素隐藏了（因为在Vue执行之前DOM元素存在v-cloak属性，所以实际结果为{{name}}，但这样的输出对用户并不友好，所以选择隐藏），之后当vue执行完成的时候属性v-cloak就消失了，所以后来DOM元素显示出来了

二、v-bind的基本使用

v-bind简单说明：

<div class = "app">
<h2><a v-bind:href = "url">百度一下</a></h2>			/*v-bind响应式绑定*/
  <h2><a :href = "url">百度一下</a></h2>				/*语法糖*/
</div>
<script>
  const app=new Vue({
    el:'.app',
    data:{
      url:'https://www.baidu.com',
    }
  })
</script>

结果：

v-bind动态绑定class ①（对象）

/*CSS*/
.active{
  color: red;
}
.low{
  font-size: 40px;
}
.high{
  font-style: italic;
}
/*HTML与JS*/
<div class = "app">
  <h2 class="high" v-bind:class="{active: isActive,low: isLow}">你好</h2>					/*class在vue里面会进行自动合并*/
  /*这里也可以采取另一种方法*/
  /*<h2 v-bind:class="staus">你好</h2>*/
</div>
<script>
  const app=new Vue({
    el:'.app',
    data:{
      isActive:true,
      isLow:true
    }
    /*
    data:{
          staus:{
            active:true,
            low:true
          }
        }
    */
  })
</script>

结果：

v-bind动态绑定class ②（数组）

/*HTML*/
<div class = "app">
      <h2 class="high" v-bind:class="getClass()">你好</h2>
    </div>
/*JS*/
const app=new Vue({
el:'.app',
  data:{
    active:'active',
    low:'low'
  },
  methods:{
    getClass:function () {
      return [this.active,this.low];		/*this使用实例化的属性*/
    }
  }
})

结果：

v-bind动态绑定style ③（对象）

<div class = "app">
<h2 :style="{'font-size': num1}">你好</h2>		/*使用-就必须用引号*/
  <h2 :style="{fontSize: num2}">你好</h2>		/*建议使用驼峰命名*/
  <h2 :style="{fontSize: num3+'px'}">你好</h2>
</div>
<script>
  const app=new Vue({
    el:'.app',
    data:{
      num1: '50px',
      num2: '80px',
      num3: 100
    }
  })
</script>

结果：

v-bind动态绑定style ④（数组）

<div class = "app">
<h2 :style="[baseStyle1,baseStyle2,baseStyle3]">你好</h2>
</div>
<script>
  const app=new Vue({
    el:'.app',
    data:{
      baseStyle1:{
        fontSize: '50px'				/*建议使用驼峰命名*/
      },
      baseStyle2:{
        color: 'blue'
      },
      baseStyle3:{
        'background-color': 'red'		/*使用-就必须用引号*/
      },
    }
  })
</script>

结果：

三、计算属性的基本使用

<div class = "app">
<h2>{{firstName + ' ' + lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>getFullName()</h2>
  <h2>{{fullName}}</h2>				/*当成一个属性来使用*/
  <h2>fullName</h2>
</div>
<script>
  const app=new Vue({
    el:'.app',
    data:{
      firstName: 'll',
      lastName: 'ppp',
    },
    computed:{				/*计算属性*/
      fullName:function() {
        return this.firstName + ' ' + this.lastName;
      }
    },
    methods:{
      getFullName() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
</script>

结果：

由上面可知，computed与methods的执行结果相同，但是computed使用多次但只调用一次，而methods使用多次调用多次

那么这是为什么呢？让我娓娓道来

计算属性的setter与getter方法解释：

<div class = "app">
      <h2>{{sentence}}</h2>
    </div>
    <script>
      const app = new Vue({
        el: '.app',
        data: {
          word: 'Hello',
          name: '翠花'
        },
        computed: {
          
          /*sentence: function() {
            return this.word + ' , ' + this.name;
          }
          sentence() {
            return this.word + ' , ' + this.name;
          }*/
          
          // 下面的才是comtuted的实际写法，包括一个setter与getter方法，且sentence是一个属性
          sentence: {
            // set方法（写操作）很少用，所有该方法一般是没有使用的
            // setter的触发的方式：只要当sentence改变的时候就使用setter方法
            set: function (newValue) {
              let values = newValue.split(' ');
              this.word = values[0];
              this.name = values[1];
              console.log('修改传入成功');
            },
            // getter（读操作）
            get: function () {
              return this.word + ' , ' + this.name;
            }
          }
        }
      })
    </script>

结果：

四、methods与computed的区别

<div class = "app">
      <h2>使用mathache拼接方法（不推荐，因为在view模块里面不建议有过多的业务逻辑）</h2>
      <h3>{{word}} , {{name}}</h3>
      <hr/>
      <h2>computed属性使用三次</h2>
      <h3>{{sentence}}</h3>
      <h3>{{sentence}}</h3>
      <h3>{{sentence}}</h3>
      <hr/>
      <h2>methods方法使用三次</h2>
      <h3>{{getSentence()}}</h3>
      <h3>{{getSentence()}}</h3>
      <h3>{{getSentence()}}</h3>
    </div>
    <script>
      const app = new Vue({
        el: '.app',
        data: {
          word: 'Hello',
          name: '翠花'
        },
        computed: {
          sentence: function () {
            console.log('computed的sentence属性调用');
              return this.word + ' , ' + this.name;
          }
        },
        methods: {
          getSentence: function () {
            console.log('methods的getSentence()方法调用');
            return this.word + ' , ' + this.name;
          }
        }
      })
    </script>

结果：

那么为什么computed里面的getter只调用了一次呢？
因为在调用getter的时候他内部有一个缓存（应该是Vue内部的实现的），使用完之后在栈区并没有释放，而methods使用完之后就立即释放

五、有关Vue里面的this指向问题

点击这里

六、vue里面的template只能有一个根元素

本文只用于个人学习与记录