Vue 基础
指令:
插值表达式:
语法:{{要插入的值}},此时相当于占位符,到时候{{关键字}}会被替换成
Model中的数据
bug点:
当网速较慢时,Vue初始化未完成时,插值表达式不能被解析,会直接显示
出来,加载完毕之后又会被替换成真实结果,造成闪烁(Vue的加载代码写在
HTML元素之后时会出现该bug)
1.v-cloak指令:
语法:把它当作HTML元素的一个属性使用
示例:
{{msg1}}
特点:
当Vue加载完毕后,v-cloak属性会自动消失
使用:
添加如下CSS样式:让所有带v-cloak属性的元素隐藏,Vue加载完成后显示
实现,解决插值表达式闪烁的问题
[v-cloak]{
display: none;
}
2.v-text:
语法:
作用:和插值表达式一样,用于给HTML元素添加文本
区别:
1.v-text不会存在闪烁问题
2.v-text会将Model中的数据完全替换到HTML元素中(覆盖)
3.插值表达式只会将Model中的数据替换到插值表达式中(占位符内容的替换)
相同点:
1.插值表达式和v-text都可以给HTML元素显示文本
2.插值表达式和v-text都不会解析要添加文本中的HTML标签(原样显示)
3.v-html:
和v-text的唯一区别:给HTML添加内容时会解析内容中的HTML
代码测试:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础表达式</title>
</head>
<body>
<h1>v-cloak、v-text、v-html指令以及插值表达式的学习</h1>
<div id="aaa">
<p v-cloak>{{msg1}}</p>
<p>{{msg1}}</p>
<p v-text="msg1"></p>
<p v-text="msg2"></p>
<p>{{msg2}}</p>
<p v-html="msg2"></p>
</div>
<script src="../lib/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#aaa",
data:{
msg1:"hello",
msg2:"<p style='color:red'>我是一个p标签</p>"
}
})
</script>
</body>
</html>
运行结果:
4. v-bind:
语法:在HTML元素的属性目前加上绑定标识,此时HTML的该属性的值就会根据属性值的名字从Model中获取数据
示例:
var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超强”
}
});
注意:
1.【v-bind:】用于绑定HTML元素属性的值
2.【v-bind:】可以简写为:
3.Vue框架会把使用了v-bind:标识的HTML的属性的值当作一个Javascript表达式来使用
只要表达式合法,就能执行(当然,数据必须时字面量或来自于Model中)
如:
:value=“msg+‘你好’”
:value=“msg+name”
5. v-on:
语法:在HTML的事件属性(不带on)前加上绑定标识,此时HTML触发此事件时,会执行事件中绑定的代码
示例:
点击下显示你好
<button @click=“sayHello(name)”>点击下显示你好
var vm = new Vue({
el:"#app",
data:{
msg:“吾名”,
name:“超强”
},
methods:{
sayHello:function (name) {
alert(“你好!”+name);
}
}
});
注意:
1.常见的web网页的事件都支持绑定
2.事件名字不带on
3.事件触发的方法必须在methods中定义
4.v-on标识的属性会被Vue解析为特定JavaScript,只要内容符合JavaScript规范
都能正确执行(比如传入参数)
4.【v-on:】等价于【@】
代码测试:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-bind,v-on指令的学习</title>
<script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<h1> </h1>
<div id="app">
<h2><label>用户名:<input type="text" name="username" v-bind:value="msg" /></label></h2><br>
<h2> 用户名: <input type="text" name="aa0" :value="msg+name" ></h2><br>
<button v-on:click=" sayHello(name)"> 点击显示你好</button><br>
<button @click="sayHello(name)"> 点我</button><br>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
msg:"吾名",
name:"超强"
},
methods:{
sayHello:function (name) {
alert("你好!"+name);
}
}
});
</script>
</body>
</html>
运行结果:
接下来我们做一个小练习
用Vue做一个跑马灯效果
直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跑马灯</title>
<script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<button @click="light()">开始</button>
<button @click="stop()">停止</button>
<h3 v-html="info" style="color: aqua" ></h3>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
info:" 嘿,姑娘,我想我是真的想你了,你是否也会想起我。",
lightIntervalID:null
},
methods: {
light() {
if (this.lightIntervalID !== null) {
return;
}
var _this = this;
this.lightIntervalID = setInterval(function () {
_this.info = _this.info.substring(1).concat(_this.info.charAt(0));
}, 200
)},
stop() {
clearInterval(this.lightIntervalID);
this.lightIntervalID = null;
}}
});
</script>
</body>
</html>
来看下运行效果:(这里只展示静态效果)