01-插值语句的基本使用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<h2>
1 Mustache语法(也就是双大括号)
格式1:{{变量名}} 变量名语法
格式2:{{变量名+变量名2}} 表达式语法
</h2>
<h2>{{msg}}-----{{d}}</h2>
<h2>a*b={{a*b}}</h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:"#app",
data:{
msg:"世界和平",
a:123,
b:456,
d:"你好",
变量名:'我是一个变量',
变量名2:'我是中文变量2'
}
})
</script>
</body>
</html>
02-v-once指令的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<h1>v-once 指令 功能 设置不渲染修改后的数据</h1>
<h2>格式一:可以渲染的数据</h2>
<h2>{{msg}}</h2>
<h2>格式2:设置只渲染一次的数据</h2>
<h2 v-once>{{a*b}}</h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:"#app",
data:{
a:123,
b:456,
msg:"你好"
}
})</script>
</body>
</html>
03-v-html指令的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<div id="app">
<h1>一、普通显示html语言的内容</h1>
<h1>{{url}}</h1>
<h2>二、v-html</h2>
<h2 v-html="url"></h2>
<h2 v-html="alink"></h2>
</div>
<script type="text/javascript">
const app=new Vue({
el:"#app",
data:{
msg:"我是标题一",
alink:'<a href="https://www.bilibili.com/">B站</a>',
url:'<a href="https://music.163.com/">网易云</a>'
}
})
</script>
</head>
<body>
</body>
</html>
04-v-text指令的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<h2>1 普通获取方式:{{msg}}</h2>
<h2>2 v-text的获取方式</h2>
<h2 v-text="b"></h2>
<h3 v-text="msg"></h3>
<h2>3 v-text的覆盖方式</h2>
<h3 v-text="msg">我被覆盖掉,这个指令不常用</h3>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
msg:'jsklajd',
b:'hhhhhhhhh'
}
})</script>
</body>
</html>
05-v-pre指令的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<h2>普通获取数据的方式一:</h2>
<h2>{{msg}}</h2>
<h2>获取数据本身的方式二:数据按原样输出</h2>
<h2 v-pre>{{msg}}</h2>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
msg:'jsklajd',
b:'hhhhhhhhh'
}
})
</script>
</body>
</html>
06-v-cloak指令的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
<style type="text/css">
[v-cloak]{display: none;}
</style>
</head>
<body>
<div id="app" v-cloak >
<h2>普通绑定渲染数据的方法:{{msg}}</h2>
<h2>带斗篷的渲染方式:{{msg}}</h2>
<h2>1 在vue解析前,app元素有一个c-cloak属性,设置对象的内容不显示
2 在vue解析后,app元素取消v-cloak属性
</h2>
</div>
<div id="ccc" style="display: none;">
<h2>指令的使用</h2>
</div>
<script type="text/javascript">
setTimeout(function(){
const app = new Vue({
el:"#app",
data:{
msg:"世界和平",
a:123456
}
})
},3000)
</script>
</body>
</html>