重新开始认识前端之vue.js
Posted zjj123456
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重新开始认识前端之vue.js相关的知识，希望对你有一定的参考价值。
断更了很长时间，最近有时间开始前端vue学习，vue这种VM的中间体，结合es6，适合现在代码快速开发。
前期主要做了几个案例，主要用到的vue组件：v-bind缩略写法为：（缩写为冒号）v-bind 主要用于属性绑定， v-on缩写为@ v-on大多数用在绑定事件。
v-text用于操作纯文本，替代显示对应的数据对象上的值，容易发生覆盖。v-cloak不会发生覆盖，但有闪烁。
<!--用v-cloak解决插值表达式闪烁问题-->
<p v-cloak>{{ msg }}</p>
<!--默认V—text是没有闪烁问题的 但是会覆盖-->
<h4 v-text = "msg"></h4>
用v-cloak解决插值表达式闪烁问题 闪烁问题具体是：js文件在网速慢的时候加载时候变量值不能获取，造成先显示{{内容}}类似这种，之后显示具体变量的值。
默认V—text是没有闪烁问题的 但是会覆盖
<!--v-bind可以写合法的表达式，也可以简写例如 :title="mytitle"-->
<input id="btn" type="button" value="button" :title="mytitle+‘123‘" >
vm对象实例的基本格式如下：
var vm =new Vue({
el:‘#app‘,
data :{
msg:‘欢迎需学习vue‘,
mytitle:‘这是标题‘
},
methods :{
show(){
alert(‘hello‘)
}
}
})
基本的格式就是这样子的，但是实际和以前的js大相径庭，逻辑写法稍微简单点。
以下代码是一个跑马灯的实例,可以直接用来调试，但是请认准vs code编程软件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h4>{{ msg }}</h4>
<input type="button" value="低调" @click="stop">
<input type="button" value="浪起来" @click="lang">
<!--
给浪起来设置click事件，
v-on或者@用substring截取字符串，
将截取的第一个字符，放最后。设置一个定时器-->
</div>
<script>
//在vm实例中如果想要获取data里的数据，或者想要调用methods中的方法，
//必须通过this.数据属性名 或者 this.方法名 来访问，这里的this就表示new Vue实例
var vm = new Vue({
el:‘#app‘,
data:{
msg:‘这是一个滚动条‘,
setIntervalid:null
},
methods:{
lang () {
if(this.setIntervalid != null) return;
//this指向性问题得用一个变量代替
this.setIntervalid = setInterval( ()=>{
//获取字符串头第一个字符
var start = this.msg.substring(0,1)
//获取字符串除第一个字符其他的字符
var end = this.msg.substring(1)
//重新拼接得到新的字符串 并赋值给this.msg
this.msg = end+start
},400)
},
stop () {//停止计时器
clearInterval(this.setIntervalid)
//每当清除了定时器，重新把setIntervalid置位null
this.setIntervalid = null
}
}
})
</script>
</body>
</html>
以上是关于重新开始认识前端之vue.js的主要内容，如果未能解决你的问题，请参考以下文章