Vue学习笔记-02-指令
文章目录
- 一、指令
-
- 1.1 模板语法概述
- 1.2 v-cloak指令 解决插值表达式闪动的问题
- 1.3 v-text 纯文本填充
- 1.4 v-html 填充HTML片段
- 1.5 v-pre 填充原始信息
- 1.6 数据响应式
- 1.6 v-once 只渲染一次
- 1.7 v-model 数据双向绑定
一、指令
1.1 模板语法概述
1.2 v-cloak指令 解决插值表达式闪动的问题
用法： { {msg}}
插值表达式存在的问题：“闪动”
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值
解题步骤：
1、提供样式
2、在插值表达式所在的标签中添加v-cloak指令
<script src="js/vue.js">script>
<style>
[v-cloak]{
display: none;
}
style>
<body>
<div id="app">
<div v-cloak>{
{msg}}div>
div>
<script>
new Vue({
el:'#app',
data:{
msg:'Hello,world',
}
});
script>
body>
效果：
1.3 v-text 纯文本填充
语法：
v-text 填充纯文本
- 相比插值表达式更加简洁
- 无“闪动”
<div id="app">
<div v-text='msg'></div>
</div>
<script src='vue.js></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello Vue',
msg1:'HTML
'
}
});
</script>
效果：
1.4 v-html 填充HTML片段
语法：
v-html 填充HTML片段
1、存在安全问题
2、本网站内部数据可以使用，来自第三方的数据不可以用
<div id="app">
<!-- 会执行HTMl标记语言 -->
<div v-html='msg'> </div>
</div>
<script src='vue.js></script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'HTML
'
}
});
</script>
效果：
1.5 v-pre 填充原始信息
语法：{ {msg1}}
显示原始信息，跳过编译过程
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习3-2title>
head>
<body>
<div id="app">
<div>{
{msg}}div>
<div v-text='msg'>div>
<div v-html='msg1'>div>
<div v-pre>{
{msg1}}div>
div>
<script src="js/vue.js" type="text/javascript" charset='utf-8'>script>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'hello Vue',
msg1:'HTML
'
}
});
script>
body>
html>
效果：
1.6 数据响应式
什么是数据响应式？
Vue的数据响应式就是比如说你在浏览器的console面板更改变量的值，那么对应的页面里边的内容也会改变。
例如：
<body>
<div id="app">
<div>{
{
msg}}</div>
</div>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'HelloWorld'
}
});
</script>
</body>
效果：
1.6 v-once 只渲染一次
v-once只渲染一次，随后的渲染会当作静态内容跳过，提高性能
<body>
<div id="app">
<div>{
{
msg}}</div>
<div v-once>{
{
info}}</div>
</div>
<script src="vue.js"></script>
<script>
var vm=new Vue({
el:'#app',
data:{
msg:'HelloWorld',
info:'你好'
}
});
</script>
</body>
效果：
1.7 v-model 数据双向绑定
什么是双向数据绑定？请看下图：
实例代码：
<body>
<div id="app">
<div>{
{
msg}}</div>
<input type="text" v-model='msg'>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:'hello,world'
}
});
</script>
</body>