1.v-cloak
作用：解决插值表达式闪烁的问题
当网速过慢时，或者加载数据时间过长时，网页会出现 {{msg}} 的现象
使用方法：
<!--缺陷需要写style样式-->
<style>
[v-cloak] {
display: none;
}
</style>
<h1 v-cloak>{{meg}}===============</h1>2.v-text
作用：解决插值表达式闪烁的问题
使用方法：
<!--缺陷：会覆盖元素内部的内容-->
<h1 v-text="meg">==============</h1>3.v-html
作用：解析html代码
使用方法：
<!--缺陷：会覆盖元素内部的内容-->
<h1 v-text="meg">==============</h1>4.v-bind
作用：绑定属性，将html的属性转化为vue.js的属性
使用方法
<input type="button" value="按钮" v-bind:title="mytitle+'123456'" />
<!--简写方式-->
<input type="button" value="按钮" :title="mytitle+'123456'" />5.v-on
作用：绑定事件，将html的事件转化为vue.js的事件
使用方法
<input type="button" value="按钮" v-on:click="show" />
<!--缩写形式-->
<input type="button" value="按钮" @click="show" />以上指令用到的数据
<script>
var vm = new Vue({ //vm就是 mvvm中的调度者vm
el: '#app',
data: {
meg: '123',
meg2: '<h1>我是一个大大的h1</h1>',
mytitle: '这是一个自定义的title'
},
methods: { //methods中定义了当前Vue的所有可用方法
show: function() {
alert('hello');
}
}
})
</script>6.根据以上指令完成一个走马灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="浪起来" @click="lang" />
<input type="button" value="低调" @click="stop"/>
<h4>{{msg}}</h4>
</div>
<script>
//在vm实例中 会监听自己data中的数据，只要数据发生改变，就会把最新的数据渲染到页面上去
var vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育别浪~~~~~~~',
intervalId:null
},
methods: {
lang() {
//在vm内部中想要获取 data的数据，或者methods中的方法 要使用this 代表这个vm对象
//console.log(this.msg);
//var _this = this;
//function() {} 的建造函数 ()=> 作用内部的this相当于外部的this
this.stop()
this.intervalId = setInterval(() => {
var start = this.msg.substring(0, 1)
var emd = this.msg.substring(1)
this.msg = emd + start
}, 400)
},
stop(){
clearInterval(this.intervalId)
}
},
})
</script>
</body>
</html>