vue学习笔记-指令篇
vue指令
- v-text
- v-html
- v-pre
- v-once
- v-model
- v-on
- v-if
- v-else
- v-else-if
- v-show
- v-for
- v-cloak
- 2.6.0+新增v-slot
v-text
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题- 相当于元素中的
innerText属性
不会解析html标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-text -->
<span v-text="test"></span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
test:'v-text'
}
})
</script>
</body>
</html>
页面显示结果如下:
注意:v-text不会解析html标签
例如：修改vue实例中的data中的test属性为
test:'v-text
'
页面显示结果如下:
v-html
- 用法和v-text差不多，但是可以解析html标签，类似于元素中的
innerHtml - 注意:只在可信内容上使用
v-html，永不用在用户提交的内容上。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-html -->
<span v-html="vHtml"></span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
vHtml:'v-html
'
}
})
</script>
</body>
</html>
页面显示结果如下:
v-pre
- 显示原始数据，跳过编译阶段
- 跳过这个元素和它的子元素的编译过程。
- 在静态页面中数据不需要发生变化时使用，可以加快页面渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-pre -->
<span v-pre>{{vPre}}</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
vPre: 'v-pre',
}
})
</script>
</body>
</html>
页面显示结果如下:
v-once
- 执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-once -->
<span v-once>{{vOnce}}</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
vOnce:'v-once'
}
})
</script>
</body>
</html>
页面显示结果如下:
尝试修改v-once属性，页面显示结果如下:
发现页面并没有变化，所以一般用于页面加载一次之后数据不用再次更新时使用
v-model
- 双向数据绑定
- 当数据发生变化的时候，视图也就发生变化
- 当视图发生变化的时候，数据也会跟着同步变化
- 注意:限制在
input、select、textarea、components中使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-model -->
<span>{{vModel}}</span>
<input type="text" v-model="vModel"/>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
vModel:'v-model'
}
})
</script>
</body>
</html>
页面显示结果如下:
在改变输入框内容时，会发现数据会随着输入框内容变化而变化
页面显示结果如下:
在改变vue实例中的v-model属性时，会发现输入框内容会随着数据变化而变化
页面显示结果如下:
v-on
- 用来绑定事件
- 形式如：
v-on:click，也可以缩写为@click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-on -->
<span v-on:click="handleClick">点我</span>
<!-- 缩写形式-->
<span @click="handleClick">点我缩写</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
},
//将事件处理函数写在methods属性中（methods是一个对象）
//需要和事件处理函数名称一致，可以是带参也可以不带参
methods: {
//对应事件函数名称
handleClick:function(){
alert('我是span')
}
},
})
</script>
</body>
</html>
点击span,页面显示结果如下:
点击span缩写,依然可以触发，页面显示结果如下:
v-bind
- 用来响应地更新 HTML 属性
- 形式如：
v-bind:href，也可以缩写为:href
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-on -->
<span v-on:click="handleClick">点我</span>
<!-- 缩写形式-->
<span @click="handleClick">点我缩写</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
},
//将事件处理函数写在methods属性中（methods是一个对象）
//需要和事件处理函数名称一致，可以是带参也可以不带参
methods: {
//对应事件函数名称
handleClick:function(){
alert('我是span')
}
},
})
</script>
</body>
</html>
页面显示结果如下:
点击百度，页面显示结果如下:
点击百度缩写，依然可以跳转，页面显示结果如下:
v-if
- 根据表达式的值的真假条件渲染元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-if -->
<!-- 判断是否加载，如果为真，就加载，否则不加载-->
<span v-if="scope>85">分数:{{scope}},优秀</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
scope:90
},
//将事件处理函数写在methods属性中（methods是一个对象）
//需要和事件处理函数名称一致，可以是带参也可以不带参
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
v-else
v-else必须紧跟在v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-if-else-->
<!-- 判断是否加载，如果为真，就加载，否则不加载-->
<span v-if="scope>85">分数:{{scope}},优秀</span>
<span v-else>分数:{{scope}},不够优秀</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
scope:70
},
//将事件处理函数写在methods属性中（methods是一个对象）
//需要和事件处理函数名称一致，可以是带参也可以不带参
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
v-else-If
- 根据表达式的值的真假条件渲染元素
v-else-if必须紧跟在v-if或v-else-if后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-else-if -->
<!-- 判断是否加载，如果为真，就加载，否则不加载-->
<span v-if="scope>85">分数:{{scope}},优秀</span>
<span v-else-if="scope>70">分数:{{scope}},良好</span>
<span v-else>分数:{{scope}},不及格</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
scope:50
},
//将事件处理函数写在methods属性中（methods是一个对象）
//需要和事件处理函数名称一致，可以是带参也可以不带参
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
v-show
- 根据表达式之真假值，切换元素的
display CSS 属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
<style>
div {
width: 100px;
height: 100px;
background: red
}
</style>
</head>
<body>
<div id="app">
<!-- v-show -->
<!-- 判断是否加载，如果为真，就加载，否则不加载-->
<div v-show="isShow"></div>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
isShow:true
},
//将事件处理函数写在methods属性中（methods是一个对象）
//需要和事件处理函数名称一致，可以是带参也可以不带参
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
v-for
- 用于循环的数组里面的值可以是
对象，也可以是普通元素
遍历数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-for -->
<div>
<ul>
<!--item 是自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组-->
<li v-for="item in items">
{{ item.text }}
</li>
</ul>
</div>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
items: [
{
id: 1,
text: '西瓜'
},
{
id: 2,
text: '草莓'
},
{
id: 3,
text: '葡萄'
}
]
},
//将事件处理函数写在methods属性中（methods是一个对象）
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<body>
<div id="app">
<!-- v-for -->
<div>
<ul>
<!-- 循环结构-遍历对象
v 代表对象的value
k 代表对象的键
i 代表索引
--->
<li v-for="(v,k,i) in obj" :key="v.id">
{{v + '---' + k + '---' + i}}
</li>
</ul>
</div>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
obj:{
id:1,
name:'张三'
}
},
//将事件处理函数写在methods属性中（methods是一个对象）
methods: {
},
})
</script>
</body>
</html>
页面显示结果如下:
- 不推荐同时使用
v-if和v-for - 当
v-if与v-for一起使用时，v-for具有比v-if更高的优先级。 - 使用
v-for时一般需要带上key
key的作用
key用来给每个节点做一个唯一标识- 主要是为了高效的更新虚拟DOM
v-cloak
- 防止页面加载时出现闪烁问题
- 有时候可能会发现页面加载时先出现插值表达式再显示该数据，这种体验不好，所以用该指令可以解决此问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue指令</title>
</head>
<style>
[v-cloak] {
/* 元素隐藏 */
display: none;
}
</style>
<body>
<div id="app">
<!-- 渲染dom -->
<!-- 使用插值表达式渲染数据-->
<!-- 在 数据渲染完成之后，v-cloak 属性会被自动去除， v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签也就是对应的标签会变为可见 -->
<span v-cloak>{{content}}</span>
<!--引入vue.js文件 -->
<script src="./vue.js"></script>
<script>
//创建一个vue实例
var app = new new Vue({
el: '#app',//填入需要vue管理的元素选择器，也可以使类选择器
//将需要的数据填入data属性中(data是一个对象)
data: {
content: 'hello world'//添加了一个名为content的属性
}
})
</script>
</body>
</html>
v-slot
2.6.0新增指令，它取代了slot和slot-scope- 提供具名插槽或需要接收
prop的插槽 - 只能在
template组件(对于一个单独的带prop的默认插槽)中使用 - 缩写形式:
#
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 组件名称-->
<my-component>
<!-- 缩写形式v-slot 具名插槽使用-->
<template #header>
<h1>页面头部</h1>
</template>
<template #body>
<h1>页面内容</h1>
</template>
<template #footer>
<h1>页面底部</h1>
</template>
<!--独占默认插槽 作用域插槽使用-->
<!-- <template v-slot:default="slotProps">
姓名: {{slotProps.user.firstName+slotProps.user.firstName.lastName}}
</template> -->
<!--不带参数的 v-slot 被假定对应默认插槽： -->
<!--独占默认插槽缩写形式+对象解构更简单 -->
<template v-slot="{user}">
姓名: {{user.firstName+''+user.lastName}}
</template>
</my-component>
</div>
</body>
<!-- 引入vue.js -->
<script src="./vue.js"></script>
<script>
//全局注册组件
//第一个参数自定义标签名
Vue.component('my-component', {
data: function () {
return {
user: {
lastName: '肖战',
firstName: '李'
}
}
},
template: `
{{ user }}
`
})
//创建vue实例
var vm = new Vue({
el: '#app',
methods: {
}
})
</script>
</html>