vue常用指令及方法

v-model

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

<input v-model="message">
<input class="ipt_travelTit" type="text" v-model.trim="title" @keyup.enter="login" @keydown.up="upclick" placeholder="请输入您的游记标题" /> // 去掉input内容前后空格 监听回车事件

v-bind

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

必须是变量，不能是常量

缩写 v-bind :html属性

'{red:isred}'

'isred ? "red" : "blue"'

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

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

<p v-bind:class="someclass"></p>

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

<input v-bind:value="message" v-on:input="message = $event.target.value" />
<input :value="message" @input="message = 

---

三目运算 动态class名

<input type="button" class="sumbitBtn" :class="isChecked == true? 'checked' : ''" value="确认">

<p class="tt_ft" v-bind:class="{'ckeck' : checkAllFlag}">全选</p> // checkAllFlag为true渲染出 ckeck class名

v-on

缩写 v-on @方法

<input :value="name" v-model="body">

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

<ul>
    <li v-for="item in arr">{{item.name}}</li>
</ul>

v-show

控制元素显示与隐藏

show布尔值

<div v-show="show">
</div>

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

v-text

读取文本内容

<div>
    <p v-text="msg"></p>
</div>

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

v-html

<div>
    <p v-html="msg"></p>
</div>

new Vue({
  el: '',
  data() {
    return {
      html: '<p>123</p>'
    }
  }
})

v-if v-else v-else-if

只有一个会被渲染出来

v-once

@click.once="show"

v-cloak 防闪烁

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

<div>
    <div v-cloak="">欢迎{{msg}}</div>
</div>

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

[v-cloak] {
  display: none;
}

v-pre

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

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

<div>
    <div v-pre>欢迎{{msg}}</div>
</div>

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

{{}} 输出

出来变量，也可以加方法

<li v-for="(item,index) in dateList" :class="item.isSign =='0' ? 'activeQ': ''" 
　　key="index"
>
     {{getDay(item.id)}}
</li>
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

响应数据的变化，

<div id="watch-example">
  <p>{{ answer }}</p>
  <input v-model="question">
</div>

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]
    }