VUE学习笔记 (1)
初始VUE,VUE是前端最热门的一款框架,让前端码农们爱不释手,它能够让开发者们留下更多的时间去考虑业务的逻辑,减少很多不必要的操作。
- 先贴一段VUE的代码来分析下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识VUE</title>
</head>
<!-- 引入vue.js文件 -->
<script src="../lib/vue.js"></script>
<body>
<div id="app"> <!-- 此处的id对应Vue对象里边的el(element的简写),示Vue控制这块中的代码 -->
<p>{{msg}}</p> <!--前端MVVM中的 V 插值表达式里边的 msg 对应Vue对象中data中的msg的值-->
</div><script>
var vm = new Vue({ //前端MVVM中的 VM
el:"#app", //对应上述id为app的div块
data:{ //data里边的数据是MVVM中的 M
msg:"VUE初体验"
}
})
</script>
</body>
</html>
- VUE中值绑定几种方式的比较
表达式 | 描述 |
---|---|
{{}} | 插值表达式方便,但是有 闪烁问题标注1 ,可追加,不能够渲染HTML标签 |
v-text | 方便但是不能够追加,不能够渲染HTML标签 |
v-html | 能够渲染HTML标签 |
- 属性值的绑定标签:
v-bind: | :
第2点是对显示值的绑定使用,v-bind:
是对HTML标签的属性的值进行绑定,例如:
<input v-bind:type = "typeValue"> | <input :type = "typeValue"> //typeValue对应Vue对象中data中的typeValue(=>submit)
//相当于
<input type = "submit">
<script>
var vm = new Vue({ //前端MVVM中的 VM
el:"#app", //对应上述id为app的div块
data:{ //data里边的数据是MVVM中的 M
msg:"VUE初体验",
typeValue:"submit"
}
})
</script>
- 事件的绑定标签:
v-on: | @
(Vue提供的事件绑定机制)
这个标签是给HTML标签绑定事件,减少了开发者对于DOM的操作,例如:
<input type = "button" v-on:click = "methodName" value="点击"> //使用v-on:click 表示给按钮加了一个点击事件,methodName对应Vue对象中的methosd中的methodName方法
<script>
var vm = new Vue({ //前端MVVM中的 VM
el:"#app", //对应上述id为app的div块
data:{ //data里边的数据是MVVM中的 M
msg:"VUE初体验",
typeValue:"submit"
},
methods:{
methodName:function(){
alert("点击了我~");
}
}
})
</script>
解决问题:
1.解决标注1
:
这个闪烁问题是插值表达式:{{}} 的一个问题,解决这个闪烁我们就需要用到另一个标签
v-cloak
,解决方式如下:
<div id = "app">
{{msg}}
</div>
<script>
var vm = new Vue({ //前端MVVM中的 VM
el:"#app", //对应上述id为app的div块
data:{ //data里边的数据是MVVM中的 M
msg:"VUE初体验",
typeValue:"submit"
},
methods:{
methodName:function(){
alert("点击了我~");
}
}
})
</script>
****上述代码会因为网速等的原因出现闪烁现象,解决方式如下************
//加上这段CSS代码以及在标签中加上`v-cloak`就可以解决闪烁问题了
<style>
[v-cloak]{
display:none;
}
</style>
<div id = "app" v-cloak >
{{msg}}
</div>
<script>
var vm = new Vue({ //前端MVVM中的 VM
el:"#app", //对应上述id为app的div块
data:{ //data里边的数据是MVVM中的 M
msg:"VUE初体验",
typeValue:"submit"
},
methods:{
methodName:function(){
alert("点击了我~");
}
}
})
</script>
一个小栗子(跑马灯的效果,大家可以尝试尝试):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>初识VUE</title>
</head>
<!-- 引入vue.js文件 -->
<script src="../lib/vue.js"></script>
<body>
<div id="app">
<input type="button" value="跑起来" @click="start">
<input type="button" value="驭~" @click= "stop">
<p>{{msg}}</p> <!--前端MVVM中的 V-->
</div>
<script>
//前端MVVM中的 VM
var vm = new Vue({
el:"#app",
data:{ //data里边的数据是MVVM中的 M
msg:"VUE初体验",
Interval:null
},
methods:{
start(){
if(this.Interval != null) return;
this.Interval = setInterval( () => {
var star = this.msg.substring(0,1);
var end = this.msg.substring(1);
this.msg = end + star ;
console.log(this.msg)
},400)
},
stop(){
clearInterval(this.Interval);
this.Interval = null ;
}
}
})
</script>
</body>
</html>