VUE-03-指令
vue指令
指令的概念
指令(Directives)是vue为开发者提供的 模板语法，用于 辅助开发者渲染页面的基本结构。
vue 中的指令按照不同的用途可以分为如下6大类:
- 内容渲染指令
- 属性绑定指令
- 事件绑定指令
- 双向绑定指令
- 条件渲染指令
- 列表渲染指令
注意：指令是vue开发中最基础、最常用、最简单的知识点
1.内容渲染指令
1.1 内容渲染指令
内容渲染指令用来辅助开发者渲染DOM元素的文本内容。常用的内容渲染指令有如下3个:
- v-text
- {
- v-html
1.1.1. v-text
用法示例：
<!--把username对应的值，渲染到第一个p标签中-->
<p v-text="username"/p>
<!---把 gender对应的值，渲染到第二个p标签中-->
<!--注意:第二个p 标签中，默认的文本“性别”会被gender的值覆盖掉-->
<p v-text="gender">性别</p>
v-text基本不用
1.1.2. {{}} : 插值表达式
vue提供的{{}}语法，专门用来解决v-text 会覆盖默认文本内容的问题。这种 {{}} 语法的专业名称是插值表达式（英文名为:Mustache)。
<!--使用{{}插值表达式，将对应的值渲染到元素的内容节点中，-->
<!--同时保留元素自身的默认值-->
<p>姓名: {(username)}</p>
<p>性别:{{gender}</p>
{{}} : 插值表达式 用的最多，只是内容的占位符，不会覆盖原有的内容
注意：插值表达式不能用在元素的属性节点上，只能用在元素的内容节点上
1.1.3. v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素,则需要用到v-html这个指令:
<!--假设 data中定义了名为 discription的数据，数据的值为包含 HTML 标签的字符串:-->
<!-- '<h5 style="color: red;">我在黑马程序员学习vue.js课程。</h5>' -->
<p v-html="discription"></ p>
1.1.4. el属性使用的注意点
如果有多个标签，el只会选择第一个标签,最好给一个大元素
例 内容渲染指令：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UACompatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue02</title>
</head>
<body>
<!-- 希望vue能够控制下面的这个div，帮我们在把数据填充到div内部 -->
<div id="app">
<p v-text="userName"></p>
<!-- v-text会覆盖元素内部原有的内容-->
<p v-text="gender">性别</p>
<hr/>
<p >姓名: {{userName}}</p>
<p >性别: {{gender}}</p>
<hr/>
<div v-html="info"></div>
</div>
<!-- 1.导入vue的库文件 在window全局就有了vue这个构造函数-->
<script src="../js/vue-2.7.10.js"></script>
<!-- 2.创建vue的实例对象 -->
<script>
const vm = new Vue({
//el(element(元素)):固定写法，表示当前vm要控制页面上的哪个区域，接收的值是一个选择器
el: "#app",
//data: 要渲染到页面上的数据
data: {
userName: 'lisi',
gender: "女",
info: '<h4 style="color:red;font-weight:bold;">vuevue</h4>',
}
})
</script>
</body>
</html>
2.属性绑定指令
如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下:
<div id="app">
<input type="text" v-bind:placeholder="tips"/>
<hr/>
<img v-bind:src="photo" style="width:150px;height:auto"/>
</div>
<script>
const vm = new Vue({
//el(element(元素)):固定写法，表示当前vm要控制页面上的哪个区域，接收的值是一个选择器
el: "#app",
//data: 要渲染到页面上的数据
data: {
tips: "请输入用户名",
photo: "https://sfc.vuejs.org/logo.svg",
}
})
</script>
vue-bind: 简写： :
<img :src="photo" style="width:150px;height:auto"/>
注意：在使用v-bind 属性绑定期间，如果绑定内容需要动态拼接，则字符串外面应该包裹单引号
box:字符串
index:变量
<div id="app">
<div :title="'box' + index">这是一个div</div>
</div>
<script>
const vm = new Vue({
el: "#app",
data: {
index: 2,
}
})
</script>
3.使用JavaScript表达式
在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript表达式的运算，例如:
{{number + 1}}
{{ ok ? 'YES' : 'NO'}}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + 'id'"></div>
4.事件绑定指令
vue 提供了 v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听。语法格式如下:
<h3>count的值是：{{count}}</h3>
<!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
<button v-on:click="addCount">+1</button>
