初识Vue——模板语法

一、插值

1、文本

数据绑定最常见的形式是使用双大括号（{{  }}——“Mustache”语法）的文本插值

<div class="mustache">
     <span>小红:{{ juice }}</span>
      <span v-once>不变的选择：{{ juice1 }}</span>
</div>

juice: '奇异果',
juice1: '百香果' 

2、原始HTML：双大括号会将数据解释为普通文本，而非HTML代码；为了输出真正的HTML，可以使用v-html指令；

　　　　<div>
          <p>mustache普通文本: {{ rawHtml }}</p>
            <p>使用v-html: <span v-html="rawHtml"></span></p>
      </div>

　　　　rawHtml: '<span style="color:lightblue">html输出，这里是蓝色的呦~</sapn>',

3、特性

“Mustache”语法不能用在HTML特性上，遇到这种情况应该使用 v-bind指令；

1）、v-bind使用方法：

（1）动态的绑定一个或多个特性，，或一个组件prop到表达式；

（2）在绑定class或style特性时，支持其他类型的值，如数组或对象；

（3）在绑定prop时，prop必须在子组件中声明。可以用修饰符制定不同的绑定类型；

（4）没有参数时，可以绑定到一个包含键值对的对象；注意：此时，class和style绑定不支持数组和对象；

2）、举例：

 在布尔特性的情况下，他们的存在即暗示为true

<template>
  <div class="hello" >
      <div class="bind">
          <button v-bind:disabled="isButtonDisabled">button</button>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      isButtonDisabled: true
    }
  }
}
</script>

　　　　

4、使用JavaScript表达式

除了绑定简单的属性键值，对于所有的数据绑定，vue还可以使用JavaScript表达式；

注意：只是表达式，语句是不会被解析的；

<template>
  <div class="hello" >
      <div class="javascript_">
          <p class="binary">数量: {{ numbers + 1 }}</p>
          <p class="ternary">甜度: {{ sweet ? 'sugar' : 'no-sugar' }}</p>
          <p class="def">编号: {{ price.split('').reverse().join('') }}</p>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      numbers: 5,
      sweet: true,
      price: '23452',
    } }
}
</script>

<style scoped>
.javascript_ p{
    font-size: 16px;
    color: cadetblue;
}

二、指令

指令是带有 v- 前缀的特殊属性。指令属性的预期值是单个Javascripit表达式。指令的职责是：当表达式的值改变时将其产生的连带影响，响应式的作用于DOM，

1、参数

一些指令能够接受一个参数，在指令名称之后以冒号表示，例如：

<template>
  <div class="hello" >
      <div class="direc">
          <a class="koudai_link" v-bind:href="url_">口袋学生证</a>
          <a class="koudai_link" v-on:click="change_style">点击打印123</a>
      </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      url_: 'http://koudaixueshengzheng.cn'
    }
  },
  methods: {
      change_style: function () {
              console.log(123)
      }
  }
}
</script>

<style scoped>
.koudai_link{
    font-size: 16px;color: white;text-decoration: none;display: block;background: palevioletred;border-radius: 10px;width: 150px;height: 40px;line-height: 40px;
    letter-spacing: 2px;font-weight: bold;margin: 0 auto;margin-bottom: 10px;cursor: pointer;
}
</style> 

　　　　

2、修饰符

修饰符是以半角句号 ‘.’指明的特殊后缀，用于指出一个指令应该以特殊方式绑定；后面详细介绍；

三、缩写

1、v-bind

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

 

2、v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>