Vue - 基本指令(一)

vue实例

el：绑定元素有效范围，在该元素下绑定的内容才会有效
data：设置变量
methods: 设置函数

<div id="test">
  <span v-model="msg"></span>
</div>
<script>
new Vue({
  el: '#test',
  data: {
    msg: ''hello world
  },
  methods: {
    test1: function() {
        console.log('方法test1')
    }
  }
})
</script>

v-model：双向绑定

<input v-mode="msg"/>
<script>
new Vue({
  el: '#test',
  data: {
    msg: 'hello vue'
  }
})
</script>

v-bind：元素绑定

<input v-bind:value="msg"/>

v-on：事件绑定

<button @click="changeVar"></button>
<button v-on:click="changeVar"></button>
<script>
new Vue({
  el: '#test',
  methods: {
    changeVar: function(){
      console.log('绑定了事件')
    }
  }
})
</script>

v-once：元素只绑定一次，再修改元素，内容将不会被改变

<input v-once="msg"/>

v-html：输出html内容

<div>{{html}}</div>
<div v-html="html"></div>
<script>
new Vue({
  el: '#test',
  data: {
    html: "<span style='color:red'>测试html输出</span>"
  }
})
</script>

输出html

v-if、 v-else、v-show

v-if 会重新渲染UI、v-show会修改元素的display属性
频繁切换显示与隐藏使用v-show

  <div id="app">
        <input v-model="seen" type="checkbox"/>
        <div v-if="seen" :class="box"></div>
        <div v-else>
            隐藏了div
        </div>
        <span>v-show</span>
        <div v-show="seen" :class="box"></div>
    </div>
</body>
<script src="../vue-01-core/node_modules/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            box: 'box',
            seen: true
        }
    })
</script>