Vue基础知识

1 . 计算属性 (主要产生缓存的数据属性,防止DOM 性能消耗)

　　计算属性的方法既可以在模板语法中使用,有可以在指令系统中使用.

　　模板内的表达式非常便利,但是设计他们的初衷是用于简便运算的,在模板中放入太多的逻辑会让模板过重且难以维护. 例如 : 

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

　　在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。例如：

<div id="example">
  <p>原数据: "{{ message }}"</p>
  <p>翻转后的数据: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter（计算属性默认只有getter方法）
    reversedMessage: function () {
      return this.message.split('').reverse().join('')  // `this`指向vm实例
    }
  }
})

2 . 侦听器 (watch) 

　　虽然计算属性在大多数情况下更合适,但有时候也需要一个自定义的侦听器. 也就是为什么 Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化. 当需要在数据变化时执行异步或开销较大的操作时,这个方法是最有用的.

　　watch 可以监听单个属性,如果想监听多个属性,则声明多个属性的监听. 如下 : 

<div id="app">
    <p>{{ msg }}</p>
    <button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:"alex",
                age:18
            }
        },
        methods:{
            clickHandler(){
                this.msg = "wusir"
            }
        },
        watch:{
            // 监听属性'msg'
            'msg':function (value) {
                console.log(value);
                if (value === 'wusir'){
                   this.msg = '大武sir';
                }
            },
            // 监听属性'age'
            'age':function (value) {
                
            }
        }
    })
</script>

 　　注意 : 计算属性即可以监听单个属性,有可以监听多个属性. 如下示例 : 

<div id="app">
    <p>{{ myMsg }}</p>
    <button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:"alex",
                age:18
            }
        },
        methods:{
            clickHandler(){
                this.msg = "wusir";
                this.age = 20;
            }
        },
        computed:{
            myMsg: function () {
                // 即监听msg属性，又监听age属性
                return `我的名字叫${this.msg},年龄是${this.age}`;
            }
        }
    })
</script>

 

 3 . 查看接口 : 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

\