Vue.js 模板语法、v-html、v-bind、v-model、v-on

学习用，也做分享，有不当之处，欢迎指正！

插值语法

{{xxxx}}用于解析标签体内容
如下，将message中的传递值“你好！”传入模板{{message}}中。页面最终打印：
你好！

<div id="test">
    <h1>{{message}}</div>
</div>

// Vue语句  
<script>
new Vue({
  el: '#test',
  data: {
    message: '你好！'
  }
})
</script>

v-html

在Vue语句中加入HTML语句，需要中加入v-html指令：

//html语句
<div id="test">
    <div v-html="message"></div>
</div>

// Vue语句  
<script>
new Vue({
  el: '#test',
  data: {
    message: '<h1>你好！</h1>'
  }
})
</script>

v-bind

v-bind:或者使用: 指令用于指定HTML 属性中的值，绑定数据和标签（标签属性、标签体内容、绑定事件…）。

单向数据绑定：只能向页面传送数据。

以下实例判断 use 的值，v-bind绑定了class属性，'class1’又取决于use的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<!--样式-->
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>

<!--bady-->
<div id="app">
  <label for="r1">修改颜色</label>
  <input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">显示内容：v-bind:class 指令</div>
  <!--<div :class="{'class1': use}">显示内容：v-bind:class 指令</div>--> 
</div>
<script>
new Vue({
    el: '#app',
  data:{
  	  //use: ''
      use: false
  }
});
</script>

v-model

v-model本质上是一个语法糖。由于默认收集的是标签内的“value”值，在书写过程中本来要 v-model:value ,但是一般可以简写为v-model（通常这样用）。

双向数据绑定 ：可以向页面传输数据，也可以接受页面数据。

vue中经常使用到 input、select、textarea、checkbox、radio 等表单控件（输入型）元素，Vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

v-model不仅可以给这些标签赋值还可以获取标签中的数据，而且数据的获取是实时的

<div id="a1">
  <input v-model="test">
</div>
	<!--下拉框-->
<div id="a2">
  <select v-model="selected">
    <option value="A被选">A</option>
    <option value="B被选">B</option>
    <option value="C被选">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
	<!--单选按钮-->
<div id="a3">
  <input type="radio" id="small" value="small_value" v-model="picked">
  <label for="small">small</label>
  <br>
  <input type="radio" id="big" value="big_value" v-model="picked">
  <label for="big">big</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div> 

<!--复选框-->
<div id="a4">
  <input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
  <label for="one">选项一</label>
  <input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
  <label for="two">选项二</label>
  <input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
  <label for="three">选项三</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script>
new Vue({
    el: '#a1',
    data: {
      test: '你好！'
    }
  });
new Vue({
    el: '#a2',
    data: {
      selected: ''
    }
  });
new Vue({
    el: '#a3',
    data: {
      picked: ''
    }
  })
 new Vue({
    el: '#a4',
    data: {
      checkedNames: []
    }
  })
  </script>

v-on

按钮事件可以使用 v-on 监听事件，并对用户的输入进行响应。

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '你好啊!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>