【vue】vuejs入门（一）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq379682421/article/details/80727825

###vue对象的属性

new Vue({
        el:'#app',
        data:{
            msg:'',
            mag:'呵呵呵',
            mnb:[
                {title:'啊哈哈'},
                {title:'啊哈哈2'},
                {title:'啊哈哈3'}   
            ]
        },
        // 侦听器
        watch:{
            msg(){
                console.log('哈哈哈');
            }
        },
        template:'',
        // 计算属性
        computed:{
            mpl(){
                return this.mag+this.msg;
            }
        },
        methods:{
            mplclick(){
                alert(this.mpl);
            }
        },
        // 定义组件
        components:{
            'todo-item':{
                template:'<li>item</li>'
            }
        },
    })

###vue的全局

	//全局组件
	Vue.component('todo-item',{
        template:'<li>item</li>'
    })

###vue的指令

指令	详细
v-text	纯字符串输出
v-html	转成html代码输出
v-bind:	简写（：） data与元素的属性绑定
v-on:	简写（@） 绑定事件到元素上
v-modul	双向数据绑定
v-if	销毁或创建dom
v-show	改变display显示或隐藏dom
v-for	循环显示某数组

###计算属性和侦听器

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

计算属性会缓存上一次的计算结果，已达到提高性能的目的。用于内部数据的计算。

侦听器：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

侦听数据项或计算属性是否发生变化，可用于限制ajax或者开销较大的方法的操作频率

在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

###v-for的key和多参数