vue的属性赋值和事件绑定符号“：”和 “@”- 前端开发

我用vue开发有一段时间了，对vue逐渐有了一点认识。

vue里面的主角是组件。调用组件的时候，就像使用普通的HTML控件一样，需要赋一些属性或事件。比如

<div><Comp3 name="孙悟空" :type="type" v-bind:office="office" /></div>
<button @click="cloud" title="听着！">一声吼！</button>
<button v-on:click="ohNo" title="饶命">杀猪嚎！</button>
1
2
3

这里面有些符号，比如“:”、“@”显得有些神秘莫测。在这里，“:”是“v-bind”的同义词，同样，“@”等同于“v-on”。就属性而言，如果不加冒号或v-bind，那么赋的就是值；如果加了冒号或v-bind，赋的就是变量。示例如下：

组件Comp3.vue

<template>
<div>
    <div>
      <span>姓名：</span><span>{{name}}</span>
    </div>
    <div>
      <span>出身：</span><span>{{type}}</span>
    </div>
    <div>
      <span>官职：</span><span>{{office}}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name:'',
    type:'',
    office:''
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

调用组件Comp3的页面

<template>
  <div>
    <div><Comp3 name="孙悟空" :type="type" v-bind:office="office" /></div>
    <div>
      <button @click="cloud" title="听着！">一声吼！</button>
      <button v-on:click="ohNo" title="饶命">杀猪嚎！</button>
    </div>
  </div>  
</template>

<script>
import Comp3 from './Comp3.vue'

export default{
  components:{
    Comp3
  },
  data(){
    return {
      type:'石猴',
      office:'弼马温'
    }
  },
  methods:{
    cloud(){
      alert("妖怪哪里逃吃俺老孙一棒！")
    },
    ohNo(){
      alert("师傅莫念了。。。")
    }
  }
}
</script>
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

可见属性、事件赋值的多种形式。

在这里插入图片描述
上面说的变量和事件，都是指组件提供的变量和方法。其实，vue是一个前端开发框架，属于前端开发的技术栈。正因为有了像VUE、React这样的框架，前后端分离才可以落地。其原理，在于用vue等写出来的代码，需要经过编译、发布，才能变成浏览器可以运行的js+css+html三剑客。这个过程，其实跟传统的所谓C#、java开发没有什么两样。c#和java写的代码，最终要编译成二进制代码，机器才能识别并运行。所以在开发过程中，vue有一些特定的符号，关键字，像上面说的“:”、“@”，代表将被特殊处理，编译时可被替换。用过模板引擎的人都很好理解。

不过，前端的东西，毕竟受限于环境（浏览器），来来去去，不管怎么折腾，就是那么一点点。说到底，HTML，CSS，包括JS，都不算太复杂，根本支撑不起一个领域。也许是为了充门面，于是它们开始作妖。比如这个VUE，官网里的技术文档，写得支离破碎，只介绍了一个个孤立的技术点，但没有交代如何调用，究竟用在什么地方。整个官网，找不到一个完整的例子，客观上增加了不少学习的难度。出现这种状况，要么是写技术文档的人，并不是开发人员，她们很难从程序员的角度出发，只是机械地写成了手册。手册约等于垃圾，永远严谨正确，但其实并没有什么卵用。其次就是装神弄鬼，故弄玄虚。比如所谓钩子函数。什么叫钩子函数？你直接说是组件的系统事件不就完了。我记得以前学VC的时候，最难理解的莫过于句柄（handle）了。句柄？句病？有病！你说是抓手或把柄不是更好理解吗，非要创造一个名词叫什么句柄。真有病。

参考文章：
vue中“:”、“.”、“@”意义