快速开始

安装@vue/cli

1
2
3
4
# npm
npm install @vue/cli
# yarn
yarn gloable add @vue/cli

创建第一个项目

1
vue create demo

基础

过滤器

全局过滤器

1
2
3
4
// 全局过滤器定义
Vue.filter("reverse", (val, s) => {
  return val.split("").reverse().join(s)
})

局部过滤器

1
2
3
4
5
6
7
8
9
10
<script>
export default {
  // 局部过滤器定义(只能在当前vue文件内使用)
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>

使用

1
2
3
4
5
6
<template>
  <div>
    <p>使用翻转过滤器: {{ msg | reverse }}</p>
    <p :title="msg | toUp">鼠标长停</p>
  </div>
</template>

计算属性

有缓存功能，多次调用从缓存取值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div>
      <div>
          <span>姓名:</span>
          <input type="text" v-model="full">
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      a: 10,
      b: 20
    }
  },
  // 计算属性:
  computed: {
      full: {
          // 给full赋值触发set方法
          set(val){
              console.log(val)
          },
          // 使用full的值触发get方法
          get(){
              return "无名氏"
          }
      }
  }
}
</script>

<style>

</style>

侦听器

组件基础