这是我参与「第四届青训营 」笔记创作活动的第5天
十五、内置指令
1、已学过的
v-bind 单向绑定js表达式，可简写为 :xxx
v-model 双向数据绑定
v-for 遍历数组/对象/字符串
v-on 绑定事件监听，可简写为@
v-if 条件渲染（动态控制节点是否存存在）
v-else 条件渲染（动态控制节点是否存存在）
v-show 条件渲染（动态控制节点是否展示）
2、v-text
v-text指令：
1、作用：向其所在的节点中渲染文本内容。
2、与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}则不会。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div>你好,{{name}}</div>
<div v-text="name"></div>
<div v-text="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'ljx',
str:'<h3>你好</h3>' // 不能解析，全部读取为普通字符
}
})
</script>
</html>
3、v-html
v-html指令:
1、作用：向指定节点中渲染包含html结构的内容。
2、与插值语法的区别:
（1）v-html会替换掉节点中所有的内容，{{xx}}则不会。
（2）v-html可以识别html结构。
3、严重注意：v-html有安全性问题!!!!
（1）在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div>你好,{{name}}</div>
<div v-html="str"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'ljx',
str:'<h3>你好</h3>' // 可以解析
}
})
</script>
</html>
4、v-cloak
v-cloak指令（没有值）：
1、本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2、使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<div v-cloak>你好,{{name}}</div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'ljx',
}
})
</script>
</html>
5、v-once
v-once指令：
1、v-once所在节点在初次动态渲染后，就视为静态内容了。
2、以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2 v-once>初始化的n值是：{{n}}</h2>
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点击n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
n:3,
}
})
</script>
</html>
6、v-pre
v-pre指令：
1、跳过其所在节点的编译过程。
2、可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2 v-pre>Vue其实很简单</h2>
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点击n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
n:3,
}
})
</script>
</html>
十六、组件
1、基本使用
Vue中使用组件的三大步骤:
1、定义组件（创建组件）
2、注册组件
3、使用组件（写组件标签）
一、如何定义一个组件？
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别
区别如下：
1、el不要写，为什么？
最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
2、data必须写成函数，为什么？
避免组件被复用时，数据存在引用关系
备注：使用template可以配置组件结构。
二、如何注册组件
1、局部注册：靠new Vue的时候传入components选项
2、全局注册：靠Vue.component('组件名',组件)
三、编写组件标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<!-- 第三步：编写组件标签 -->
<school></school>
<hr>
<!-- 第三步：编写组件标签 -->
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 第一步：创建school组件
const school = Vue.extend({
// el:'#root', // 组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
schoolName:'中石大',
address:'克拉玛依',
}
}
})
// 第一步：创建student组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
studentName:'刘敬轩',
age:18,
}
}
})
// 第一步：创建hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data(){
return {
name:'刘敬轩',
}
}
})
// 第二步：全局注册组件
Vue.component('hello',hello)
// 创建vm
new Vue({
el:'#root',
// 第二步：注册组件（局部注册）
components:{
school:school,
student:student
}
})
new Vue({
el:'#root2'
})
</script>
</html>
2、组件的几个注意点
几个注意点：
1、关于组件名：
一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case命名）：my-school
第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）
备注：
（1）组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。
（2）可以使用name配置项指定组件在开发者工具中呈现的名字。
2、关于组件标签：
第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。
3、一个简写方式：const school = Vue.extend(options)可简写为 const school = options
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h2>{{msg}}</h2>
<school></school>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 定义组件
const school = Vue.extend({
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
</div>
`,
data(){
return {
schoolName:'中石大',
address:'克拉玛依',
}
}
})
new Vue({
el:'#root',
data:{
msg:'Vue真简单'
},
components:{
school:school,
}
})
</script>
</html>
3、组件的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false
// 定义student组件
const student = Vue.extend({
template:`
<div>
<h2>学生姓名：{{studentName}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
`,
data(){
return {
studentName:'刘敬轩',
age:18,
}
}
})
// 定义school组件
const school = Vue.extend({
template:`
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<student></student>
</div>
`,
data(){
return {
schoolName:'中石大',
address:'克拉玛依',
}
},
components:{
student:student
}
})
// 定义hello组件
const hello = Vue.extend({
template:`
<div>
<h2>你好啊！{{name}}</h2>
</div>
`,
data(){
return {
name:'刘敬轩',
}
}
})
// 定义app组件 一人之下（vm），万人之上
const app = Vue.extend({
template:`
<div>
<hello></hello>
<school></school>
</div>
`,
components:{
school:school,
hello:hello
}
})
new Vue({
template:`<app></app>`,
el:'#root',
components:{app}
})
</script>
</html>
本篇总结：
这篇笔记的主要内容是介绍Vue内，内置指令和组件这两部分知识点的概括和实践。
- 内置指令包括之前学到的v-bind、v-model、v-for、v-on、v-if、v-else、v-show，他们的用途和v-if与v-show的区别要区分清楚
- 进而补充v-text、v-html、v-cloak、v-once、v-per这五个内置指令，虽然使用频率不高，但也应清楚各自的作用
- 对于组件首先要明白组件是什么？再掌握其基本使用方法，注意一些小的注意点，再理解组件的嵌套方法
今天也是有收获的一天~
