Vue中的内置指令

Vue入门

​ 步骤：

​ 1、导入Vue.js

<script src="js/vue.js"></script>

​ 2、创建一个容器，用来容纳模板

<div id="app"></div>

​ 3、创建Vue的实例对象

<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: 'helloWorld'
		}
	})
</script>

​ 4、编写模板代码

<div>{{msg}}</div>

模板语法

操作文本

1.通过差值表达式操作

{{ 变量名 }}
例如： {{ msg }}
为了解决闪动问题：结合指令v-cloak使用
或者使用以下指令，这些指令不会产生闪动问题：
v-text v-html v-pre v-once

2.绑定元素的事件

• v-on:事件名="事件处理函数"可以简写为：@事件名="事件处理函数"
• 参数传递
  1. 不加括号
     自动传递 $event 参数，只需要在处理函数中接收即可
  2. 加括号
     调用事件处理函数，需要手动传递 $event 事件对象，事件对象作为最后一个参数传递。
• 事件修饰符
  ​ 对事件的处理方式进行指定。例如阻止事件的传播、阻止默认行为。

1. @事件名称.stop="事件处理函数" 阻止冒泡
2. @事件名称.prevent="事件处理函数" 阻止元素的默认行为
3. 键盘事件修饰符：在键盘事件中，可以在某些键按下时才触发键盘事件
   @keyup.enter="事件处理函数"

• 绑定表单中的值（双向数据绑定）
  ​ v-model="变量名"
  ​ 例：<input v-model="username">
  ​双向数据绑定：（原理）
  v-bind:value="变量"
v-on:input="变量名=$event.target.value"
• 绑定元素的属性：
  ​指令：v-bind:元素的属性="变量名"，可以简写为:元素的属性="变量名"
  ​例：<a v-bind:href="url"></a>

所有的Vue中的指令（总结）

• v-cloak 解决闪动问题
• v-text 不存在闪动问题
  v-html 可以识别HTML代码
  v-pre 跳过编译过程
  v-once 编译一次
• v-on 事件
• v-bind 属性绑定
• v-model 表单中的数据绑定