More broken for a long time, recently there is time to start learning the front vue, vue this VM intermediates, combined es6, now the code for rapid development.
The main pre-done a few cases, vue main components used: v-bind :( abbreviated wording is abbreviated as colon) v-bind attribute is mainly used for binding, v-on abbreviated @ v-on with the most in the binding events.
v-text plain text for the operation, instead of the value displayed on the corresponding data object, prone coverage. v-cloak will not overwrite happen, but there are flashes.
<! - solve interpolation expression flicker with v-cloak ->
<p v-cloak>{{ msg }}</p>
<! - default V-text is not flashing problem but it will cover ->
<h4 v-text = "msg"></h4>
Solve interpolation expression flicker with v-cloak flicker specifically: js file is loaded when the value of the variable can not get in Suman time, resulting in the first display content}} {{similar to this, after displaying the value of specific variables.
Default V-text is not flashing problem but will cover
<-! V-bind can write a legal expression can be abbreviated example: 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>