Vue 文档速查

Vue 文档速查

sicker   in 移动智地
预计阅读时间：5.77 min
共计：1730 字
最后修改时间：7 months ago

# html

vue 参数为html

<div v-html="someData"></div>
1

# 属性

v-bind:id

<div v-bind:id="someData"></div>
1

# 表达式

<div>{{number + 1}}</div>
1

# 指令

v-if

<div v-if="a === 0">看不看得到我？</div>
<div v-else-if="a === 1">你能看到第二行拉</div>
<div v-else>你看不到它</div>
1
2
3

# 参数

v-bind:href

缩写 :href

# 可变参数

<a v-on:[eventName]="doSomething"> ... </a>
1

如果 eventName 为 href ，则等价于 v-bind:href

如果 eventName 为 focus，则等价于 v-on:focus

避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写

# 事件

# v-on:click

缩写:@click

后面可以接 表达式 或者 方法

<div @click="a+1">点我</div>
<div @click="hello('hello',$event)">点我</div>
<script>
	export default {
        methods: {
            hello(a,b){
                alert(a)
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11

第二个参数 $event 可以获取到节点信息

# 事件修饰符

<div @click="a">
    点我
    <div @click="b.stop">
        点我
    </div>
</div>
1
2
3
4
5
6

阻止冒泡

其他修饰符

  • .stop

  • .prevent

  • .capture

  • .self

  • .once

  • .passive

  • .enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

更多查看事件文档 https://cn.vuejs.org/v2/guide/events.html

# 自定义指令

some.js

import Vue from 'vue'

Vue.directive('n',{
 bind: (el,binding)=>{
    el.textContent=Math.pow(binding.value,2)
 },
 update: (el,binding)=>{
    el.textContent=Math.pow(binding.value,2)
 }
})
1
2
3
4
5
6
7
8
9
10

some.vue

<template>
	<div v-n="32"></div>
</template>

<script>
    import  './components/n'
</script>
1
2
3
4
5
6
7

# 计算属性

<template>
    <div>
        {{c}}
    </div>
</template>
<script>
  export default {
    data(){
        return {
            a:1,
            b:2
        }
    },
    computed:{
        c: function() {
            return this.b - this.a
        }
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 样式 动态class

# 数组传输

<template>
	<div :class="[a,b]"
</template>
<script>
	export default {
        data() {
            return {
                a:'min',
                b:'max'
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# 对象方式

<template>
	<div :class="c"
</template>
<script>
	export default {
        data() {
            return {
                c:{'max':true,'min':false},
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12

# v-for

<div v-for="(item,index) in list" :key="item.id">
	{{index}}. {{item}}
</div>
<div v-for="(val, key) in object" :key="key"></div>
<div v-for="(val, name, index) in object" :key="name"></div>
<span v-for="n in 10">{{ n }} </span> <!--直接输出从1开始的n个整数-->
1
2
3
4
5
6

也可以用 of 来等代替 in

# 分组

<ul>
  <template v-for="(item,index) in object">
    <li :key="item">{{ item }}</li>
    <li :key="index" class="divider" role="presentation">line 2</li>
  </template>
</ul>
1
2
3
4
5
6

两行需要绑定不同的 key

# 触发监听

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

# 组件

# slot 插槽 与 传参 props

some.vue

<navigation-link url="/profile">
      <template #slot1>这里会渲染slot1插槽</template>
      <div>-----父组件分割线---</div>
      <template #slot2>这里会渲染slot2插槽</template>
</navigation-link>
<script>
	import navigationLink from ./navigationLink
</script>
1
2
3
4
5
6
7
8

navigationLink.vue

<a
  v-bind:href="url"
  class="nav-link"
>
    <slot name="slot1">默认插槽会显示我</slot>
    <slot></slot>
    <div>-----子组件分割线---</div>
    <slot name="slot2">默认插槽会显示我 2</slot>
</a>
<script>
	export default{
        props:{
            url: String,
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

渲染成

<a href="/profile" class="nav-link">
	这里会渲染slot1插槽
    <div>-----父组件分割线---</div>
    <div>-----子组件分割线---</div>
    这里会渲染slot2插槽
</a>
1
2
3
4
5
6

props类型

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

多个可能的类型 prop: [String, Number]

示例

export default{
    props:{
        type: String,
        default: function () {
        	return 'success'
        },
		validator: function (value) {
            // 这个值必须匹配下列字符串中的一个
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

非 Prop 的 Attribute 将会被添加到这个组件的根元素上

如果子组件存在class、style，则会自动合并父组件外部提供给组件的值

如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。

示例：

父组件提供 class

 <s class="big" a=2222 />
1

子组件自带 class

<template>
	<div class="colorful">
    </div>
</template>
<script>
    export default {
      name: "HelloWorld",
      inheritAttrs: false,
    }
</script>
1
2
3
4
5
6
7
8
9
10

渲染后

<div class="colorful big"></div>
1

注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。

v-slot:header 可以被重写为 #header：

更多见 https://cn.vuejs.org/v2/guide/components-slots.html

# 访问父子孙组件属性与方法

以下示例均以 vue-cli 创建的默认实例为模板

# 根实例

在 main.js 实例化vue对象时，引入 data 与 methods

new Vue({
  data: {who:"我是main.js"},
  methods: { hello(){console.log("hello from main.js")} }
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5

那么所有的节点均可以以 this.$root.xxx 获取到属性与方法

# 父级组件

app.vue

data() {
    return {
      who: "我是App.vue",
    };
},
methods: { hello(){console.log("hello from parent component")} }
1
2
3
4
5
6

那么，其子组件 如 helloworld.vue 则可以通过 this.$parents.xxx 来获取其属性与方法

# 子组件

<HelloWorld ref="helloworld" msg="Welcome to Your Vue.js App" />
1

通过 this.$refs.helloworld.XXX 获取子组件的属性与方法

# 依赖注入

在最上级的组件中注入属性与方法

export default {
  name: "App",
  data() {},
  provide: function () {
    return {
      provide: this.provide,
    };
  },
}
1
2
3
4
5
6
7
8
9

子孙组件通过

export default {
  name: "App",
  data() {},
  inject: ['provide'],
  mounted(){
    console.log("从祖节点获取到的provide：",this.provide)
  }
}
1
2
3
4
5
6
7
8

可直接使用该属性方法

# 综合示例

main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  data: {who:"我是main.js"},
  methods: {hello(){console.log("hello from main.js")}},
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld ref="helloworld" msg="Welcome to Your Vue.js App" />
    <button @click="b = !b">button</button>
    <transition
      name="slide-fade"
      :duration="{ enter: 500, leave: 800 }"
      mode="out-in"
    >
      <div v-if="b">111</div>
    </transition>
    <transition
      name="custom-classes-transition"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <p v-if="b">需要配 animated.css 库</p>
    </transition>
  </div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  data() {
    return {
      who: "我是App.vue",
      provide: "我是App.vue的提供者",
      b: true,
    };
  },
  methods: {
    hello() {
      console.log("hello from parent component");
    },
  },
  computed: {},
  mounted() {
    console.log(this.$refs.helloworld.who);
  },
  provide: function () {
    return {
      provide: this.provide,
      hello: this.hello
    };
  },
  components: {
    HelloWorld,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <HelloChild />
  </div>
</template>
<script>
import HelloChild from './HelloChild.vue'
export default {
  name: 'HelloWorld',
  data() {
    return {
    who: "我是helloWorld.vue"
    }
  },
  components: {
    HelloChild
  },
  inject: ['provide'],
  props: {
    msg: String
  },
  mounted(){
      console.log("父节点",this.$parent.who)
      console.log("根节点",this.$root.who)
      this.$root.hello()
      this.$parent.hello()
      console.log("从父节点获取到的provide：",this.provide)
  }
}
</script>
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
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
37
38
39
40
41
42
43
44
45
46
47

components/HelloChild.vue

<template>
  <div class="hello">
      我是 hello  的子组件
  </div>
</template>
<script>
export default {
  name: 'helloChild',
  data() {
    return {
    who: "我是helloChild.vue"
    }
  },
  inject: ['provide','hello'],
  mounted(){
    console.log("父节点",this.$parent.who)
    console.log("从祖节点获取到的provide：",this.provide)
    console.log(this.hello)
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

输出结果

HelloChild.vue
---
父节点 我是helloWorld.vue
从祖节点获取到的provide： 我是App.vue的提供者
ƒ hello() {
    console.log("hello from parent component");
  }
---

HelloWorld.vue
---
父节点 我是App.vue
根节点 我是main.js
从父节点获取到的provide： 我是App.vue的提供者
---

main.js
---
hello from main.js
---

App.vue
---
hello from parent component
我是helloWorld.vue
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

# vuex

...

# 组件复用与自动销毁

mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 过渡

template

<button @click="b = !b">button</button>
<transition
    name="slide-fade"
    :duration="{ enter: 500, leave: 800 }"
    mode="out-in"
>
    <div v-if="b">111</div>
</transition>
<transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
>
    <p v-if="b">需要配 animated.css 库</p>
</transition>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

js

data() {
    return {
      b: true,
    };
},
1
2
3
4
5

css

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
}
1
2
3
4
5
6
7
8
9
10

# 扩展阅读

vue 常用代码片段

- 全文完 -
留下一条留言?
html
属性
表达式
指令
参数
可变参数
事件
自定义指令
计算属性
样式 动态class
v-for
组件
访问父子孙组件属性与方法
依赖注入
组件复用与自动销毁
过渡
扩展阅读
隐
主
默认颜色

主题颜色

标准颜色

更多颜色...

隐 静