初识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>

 

 

 

 

 

 

posted on 2017-12-19 15:03 cencenyue 阅读(...) 评论(...) 编辑 收藏

统计