1. Vue基本语法
2019-10-30 本文已影响0人
月影追猎者
<head>
<!-- 导入vue -->
<script src="vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 创建vue实例
// 导入vue包后，浏览器内存中增加vue构造函数
var vm = new Vue({
el: '#app', // el表示当前Vue实例控制的页面区域
data: {
msg: 数据
}
})
</script>
</body>
插值表达式
<div id="app">{{msg}}</div>
文本渲染
<!-- 指令保持在元素上直到关联实例结束编译，可以解决插值表达式闪烁的问题 -->
<div v-cloak>{{msg}}</div>
<!-- 更新元素innerText -->
<div v-text="msg"></div>
<!-- 更新元素innerHtml -->
<div v-html="msg"></div>
属性绑定
<!-- v-bind，Vue的属性绑定机制，可简写为 : ，允许写js表达式 -->
<div v-bind:title="attr"></div>
<div :title="attr"></div>
var vm = new Vue({
el: '#app', // el表示当前Vue实例控制的页面区域
data: {
key: value
}
})
事件绑定
<!-- v-on, Vue的事件绑定机制，可简写为 @ -->
<input type="button" v-on:click="method">
var vm = new Vue({
el: '#app', // el表示当前Vue实例控制的页面区域
data: {
},
methods: { // 定义当前Vue实例可用方法
method: function() {
}
}
})
练习：文字走马灯效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
<div>
<input type="button" value="运行" @click="run">
<input type="button" value="停止" @click="stop">
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: "文字走马灯效果",
timer: null // 声明变量，保存定时器id
},
methods: {
run() {
// 当定时器id为空时，执行定时器
if (this.timer == null) {
this.timer = setInterval( () => {
let start = this.msg.substring(0, 1)
let end = this.msg.substring(1)
this.msg = end + start
}, 500)
}
},
stop() {
clearInterval(this.timer)
this.timer = null // 清空定时器id
}
}
})
</script>
</body>
</html>
流程：
- 在按钮上绑定一个点击事件
- 事件处理函数中，获取msg字符串，截取后重新拼接
注意：在VM实例中，获取data的属性或methods的方法，必须通过this.属性或this.方法进行访问。只需要关心数据，不需要考虑重新渲染DOM。 - 定义一个定时器
