Vue指令和事件

文本插值和表达式

语法：使用双大括号（ Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来，

文本插值的用法：

• 在｛｛｝｝中，除了简单的绑定属性值外，还可 以使用 JavaScript 表达式进行简单的运算 、 三元运算等
• Vue .js 只支持单个表达式，不支持语句和流控制。
  实例:
  {{ 6+6 *3}}---可以进行简单的运算
{{ 6<3 ? msg :a}}---可以用三元运算符
{{if(6>3){}}-----注意：文本插值的形式，其中不能书写表达式,支持单个表达式
{{var a = 6}}--也是多行表达式----var a ;a = 6;

〈！一这是语句，不是表达式 一〉
{ { var book = ’ Vue . js 实战 ’ ｝｝

〈！一不能使用流控制，要使用三元运算 一〉
{{ if (ok) return msg ))

指令

v-text指令：解析文本，与 {{ }} 作用一样。

<div id="app">
   <span v-text = "apple"></span>
</div>

var app = new Vue({
   el: "#dataapp",
   data: {
      apple:'苹果',
         }

//渲染:
//苹果

v-html 指令：解析 html 标签

<div id="app">
    {{ tag }}                // 使用文本插值，将数据当作文本进行渲染
    <p v-html="tag"></p>     // 使用 v-html，会识别 html 标签
</div>

var app = new Vue({
  el: '#app',
  data: {
    tag: '<h2>你好</h2>'
  }
})

//渲染:
//<h2>你好</h2>
//你好

v-bind指令:动态绑定元素的属性

<style>
    .transRed{
        background-color: red;
        height: 10px;
    }
</style>

<div id="app">
    <div v-bind:class = "className"></div>
</div>

var app = new Vue({
  el: '#app',
  data: {
   className:'transRed'
  }
})

v-on指令：绑定事件监听器

<div id="app">
    <button v-on:click="handle">click me</button>   
 // 1、使用v-on，绑定了handle事件
</div>

var app = new Vue({
  el: '#app',
  data: {
  },
  // 2、事件要写在 methods 中
  methods: {                                      
  // 3、定义 handle 事件
    handle: function () {                         
      console.log('你好')
    }
  }
})

语法糖

• v-on 可以用 @ 符号代替
• v-bind可以用 ： 代替

<div v-bind:class = "className"></div>
<button v-on:click="handle">click me</button>   
完全等价
<div :class = "className"></div>
<button @click="handle">click me</button>