Vue 是现阶段最火爆的前端语言, 作为一名开发人员,有必要熟悉这些语言新贵,方能在技术快速迭代的浪潮中不被时代抛弃。
只要你懂得前端的三驾马车和 jQuery,那么 Vue 将会快速上手。
一、Vue 的语言模板格式
作为一种在客户端处理逻辑运算和渲染的前端语言,Vue 会和HTML 语言绑定在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// 导入 Vue 的框架
<script src="./libs/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
// el用来绑定一个范围
el:'#app',
// data 用来定义在 HTML 中渲染的数据
data:{
msg:'欢迎学习 Vue'
}
})
</script>
</body>
</html>
二、常用的几个指令
v-cloak 用来解决网速比较慢的时候,前端页面出现未渲染的原始代码闪烁问题。
v-text 默认不会出现闪烁问题,会将差值表达式替换为自己的占位符。
v-html 用来将一段字符串按照 HTML 格式渲染。
v-bind 用来动态绑定一个属性,可以简写为:,只是一个单项绑定。
v-on 用来绑定一个点击事件,可以简写为@。
v-model 双向数据绑定(是 Vue 中的唯一一个有此功能的指令)。可以实现表单元素和 model 中数据的双向绑定。请注意:v-model只能运用在表单元素中。
v-for 在2.2.0+的版本中,当在组件中使用v-for时,key 是必须的。循环的时候,key属性只能会用 number类型或者string类型。key 在使用的时候,必须使用v-bind 属性绑定的形式,指定key的值。
v-if 每次都会重新删除或重建元素,有较高的的切换性能消耗。
v-show 每次不会重新进行 DOM 的创建和删除操作,只是切换了元素的dispaly:None样式。有较高的初始渲染消耗。
三、事件修饰符
常用的事件修饰符有如下几种:
.stop 组织冒泡。
.prevent 阻止默认事件。
.capture 添加事件监听器时使用事件捕获模式。
.self 只当事件在该元素本身触发时触发回调。
.once 事件只触发一次。