VUE（三、文本与指令）

一、数据绑定（双大括号）

1.文本显示

<template>
  <div>
    {{  msg  }}
    <br />
    {{ details() }}
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    details () {
      return this.msg + '!!!'
    }
  }
}
</script>

2.表达式

<template>
  <div>
{{1+2}}<br>
{{ok?"true":"false"}}<br>
{{msg.split(',').reverse().join(',')}}
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      ok: true,
      msg: '1,2,3,4,5,6,7,8,9'
    }
  }
}
</script>

 3.过滤器

管道符进行过滤，支持多层过滤

<template>
<div>
  {{message | capitalize}}
</div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: 'school'
    }
  },
  filters: {
    capitalize (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
}
</script>

 

二、指令

1.v-html

<template>
  <div v-html="msg"></div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: '<h1>Welcome to Your Vue.js App</h1>'
    }
  }
}
</script>

 2.v-model

v-model对表单等元素的定义，可以实现双向绑定。

<template>
  <div>
    <input v-model="msg" type="text" /><br/>
    {{msg}}
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    details () {
      return this.msg + '!!!'
    }
  }
}
</script>

3.v-bind

单向变动，可支持类型：html中的属性、css的样式、对象、数组、number 类型、bool类型。可将v-bind:class简写为:class

<template>
  <div>
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"/>
    <br/>
    <div :class="{'class1': use}">测试改变颜色</div>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      use: false
    }
  }
}
</script>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>

 4.v-if v-else-if v-else

根据表达式的值（true或false）来决定是否插入元素

<template>
<div>
  <div v-if="type == 'A'">A</div>
  <div v-else-if="type == 'B'">B</div>
  <div v-else>C</div>
</div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      type: 'C'
    }
  }
}
</script>

 5.v-show

用法同v-if,区别是v-if是false,则根本不会渲染元素，而v-show只是将元素display:none

6.v-on

用于监听DOM事件，v-on:click可简写为@click

事件修饰符

stop

防止事件冒泡，若不加stop，则事件会从内至外依次执行。

<template>
<div>
  <div class="outeer" @click.stop="outer">outer
    <div class="middle" @click.stop="middle">middle
      <button @click.stop="inner">inner</button>
    </div>
  </div>
  <p>{{ message }}</p>
</div>
</div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: '测试冒泡事件'
    }
  },
  methods: {
    inner: function () {
      this.message = 'inner： 这是最里面的Button'
    },
    middle: function () {
      this.message = 'middle: 这是中间的Div'
    },
    outer: function () {
      this.message = 'outer: 这是外面的Div'
    }
  },
  mounted () {
  }
}
</script>

 prevent

用于取消默认事件，如<a href="#">

capture

捕获事件，点击子节点，会触发从最外层到子节点的所有事件

<template>
<div>
  <div class="outeer" @click.capture="outer">outer
    <div class="middle" @click.capture="middle">middle
      <button @click.capture="inner">inner</button>
    </div>
  </div>
  <p>{{ message }}</p>
</div>
</div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      message: '测试冒泡事件'
    }
  },
  methods: {
    inner: function () {
      this.message = 'inner： 这是最里面的Button'
      alert('inner')
    },
    middle: function () {
      this.message = 'middle: 这是中间的Div'
      alert('middle')
    },
    outer: function () {
      this.message = 'outer: 这是外面的Div'
      alert('outer')
    }
  },
  mounted () {
  }
}
</script>

self

只触发自己范围内的事件，不包含子节点

once

只执行一次

键盘修饰符

enter：回车键

tab：制表键

delete：含delete和backspace键

esc：返回键

space: 空格键

up：向上键

down：向下键

left：向左键

right：向右键

鼠标修饰符

left：鼠标左键

middle：鼠标中间滚轮

right：鼠标右键

7.v-for

循环

<template>
<div>
  <ol>
    <li v-for="list in lists" :key="list.name">
      {{list.name}}
    </li>
  </ol>
</div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      lists: [
        {'name': 'a'},
        {'name': 'b'},
        {'name': 'c'}
      ]
    }
  }
}
</script>