vue常用指令及方法

v-model

双向绑定，监听用户的输入事件，更新数据

 // 去掉input内容前后空格 监听回车事件

v-bind

能够及时对页面的数据进行更改

必须是变量，不能是常量

缩写 v-bind :html属性

'{red:isred}'

'isred ? "red" : "blue"'

'[{red: "isred"}, {blue: "isblue"}]'

v-bind:class="activeNumber === n + 1 ? 'active' : ''"

不加 v-bind 那么 someclass 就是个常量，没有任何动态数据参与。当加上 v-bind 之后，它的值 someclass 不是字符串，而是vue实例对应的 data.someclass 这个变量。

全选
 // checkAllFlag为true渲染出 ckeck class名

v-on

缩写 v-on @方法

v-bind 产生的效果不含有双向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变。

---

阻止冒泡

@click.stop=""

v-for

item in/of 数据json

    
{{item.name}}

v-show

控制元素显示与隐藏

show布尔值

new Vue({
  el: '#box',
  data() {
    return {
      show: true
    }
  }
})

v-text

读取文本内容

    



new Vue({
  el: '',
  data() {
    return {
      msg: 'aaa'
    }
  }
})

v-html

    



new Vue({
  el: '',
  data() {
    return {
      html: '
123
'
    }
  }
})

v-if v-else v-else-if

只有一个会被渲染出来

v-once

@click.once="show"

v-cloak 防闪烁

使用 v-cloak 防止页面加载时出现 vuejs 的变量名，使用方法如下：在做外层的div 里面添加v-cloak，css里面display：none

    
欢迎{{msg}}


new Vue({
  el: '',
  data() {
    return {
      msg: '1111'
    }
  }
})

[v-cloak] {
  display: none;
}

v-pre

在模板中跳过vue的编译，直接输出原始值

如下面例子网网页会渲染出 欢迎{{msg}}

    
欢迎{{msg}}


new Vue({
  el: '',
  data() {
    return {
      msg: '1111'
    }
  }
})

{{}} 输出

出来变量，也可以加方法

     {{getDay(item.id)}}

getDay (day) {
    var arr = day.split('-');
    let dayN = arr[2];
    return dayN;
}

计算属性computed

var vm = new Vue({
  el: '#app',
  data: {
    message: 'hello',
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

v-if v-else v-else-if

只能执行一个

和v-for一起使用时 v-for优先级更高

侦听属性watch

响应数据的变化，

  
{{ answer }}
  


var watchVM = new Vue({
  el: '#watch-example',
  data：{
    answer: 'answer',
    question: '',
  },
  watch: {
    question: function() {
      // question发生改变执行此函数
    }
  }
})

vue mvvm module模型 view视图 controller控制器 vm视图数据之间的传递

    import Header from '@/components/public/header/header'
    export default {
        props: ['shopId']
        name: 'mall',
        components: {
            Header
        },
        data () {
            return {
                msg: '商城首页'
            }
        },
        mounted(){//  数据请求
            this._timeOut = setInterval(() => {
                do something
            },2000)
        },
        mounted(){
            this.init();
            beforeDestroy() { // 清除计时器
                clearInterval(this._timeOut);
            }
        },
        created () {

        },
        updated() { 
             window.scroll(0, 0); 
        },
        methods: {
            init(){
                
            }
        },
　　　　　watch: {
            shopId(newValue, oldValue) {
                console.log(newValue)
                this.init();
            }
        },
        mixins: [http]
    }