这里参考
官方教程
复制之前的模板,新建一个
02_VUE3_Study_响应式.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE3_Study_响应式</title>
<meta charset="utf-8">
<meta author="Daniel_shi">
</head>
<body>
<div id="counter">
{{ counter }}
</div>
</body>
</html>
<script src="vue.global.min.js"></script>
<script type="text/javascript">
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter')
</script>
不出意外是这样的。
拿到这个代码一开始基本可以分2块,一个就是基本的HTML本身
<div id="counter">
{{ counter }}
</div>
花括号里的counter是一个变量,一会是要被编译的。id的counter是一个字符串,一会要用做选择器。
什么是选择器?你要知道HTML的DOM结构,就是一颗树
画的不好,讲究看下。选择器说白了就是选HTML里的元素。选择器又分好多种方式,可以搜索检索关键词“CSS 选择器”,总之就是把网页里的元素选到。一般最简单的 "#+id"这种方式。
然后就是
<script type="text/javascript"></script>
里面的内容就是JS的代码。
JS里打印一般用console.log(要打印的内容)
如果要知道类型console.log(typeof 要打印的内容)
修改一下代码
<script type="text/javascript">
const Counter = {
data() {
return {
counter: 0
}
}
}
console.log(Counter);
console.log(typeof Counter);
Vue.createApp(Counter).mount('#counter')
</script>
我们知道基本形式就是
Vue.createApp(对象).mount(选择器);
Counter对象里配置里数据data项,里面有个整型数据,名字叫counter。
这里换个代码,理解一下counter,counter。都叫counter好乱。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VUE3_Study_响应式</title>
<meta charset="utf-8">
<meta author="Daniel_shi">
</head>
<body>
<div id="counter">
{{ aaaaa }}
</div>
</body>
</html>
<script src="vue.global.min.js"></script>
<script type="text/javascript">
const Counter = {
data() {
return {
aaaaa: 15
}
}
}
console.log(Counter);
console.log(typeof Counter);
Vue.createApp(Counter).mount('#counter')
</script>
这样清楚一点了,数据项data里配置了整型数据,名字叫aaaaa。
响应式
下面为了让数据活起来(产生变化),介绍一个函数,和VUE没关系,是
HTML DOM setInterval() 方法
setInterval(code,millisec[,“lang”])
参数 | 描述 |
---|---|
code | 必需。要调用的函数或要执行的代码串。 |
millisec | 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。 |
参考用法:资料
具体来说就是每隔多少时间,执行一次code设定的代码。
这里又要说一下lambda表达式
()=>{}
类似这种形式,主要和常规的函数比,function(){}这种,少了一个function name。
调用
eg:
(()=>{console.log(‘lambda’);})();
修改代码
<script type="text/javascript">
const Counter = {
data() {
return {
aaaaa: 15
}
},
mounted(){
console.log("我准备好了");
}
}
console.log(Counter);
console.log(typeof Counter);
Vue.createApp(Counter).mount('#counter')
</script>
这里,我新增了mounted,这里我们在它后面的括号里写逻辑。
然后结合之前的内容,继续修改。
mounted(){
console.log("我准备好了");
var code = ()=>{this.aaaaa += 1;};
var tick = 1000;
setInterval(code,tick);
}
这样每隔一段时间,数据就会增加。
数据绑定到DOM元素
<span title="鼠标放到我上面就会有提示">我是一个span便签</span>
这是一个DOM的span标签,title里指鼠标悬停到span上面的提示文字。
现在把内容抽象出来。即"鼠标放到我上面就会有提示"这句话。
<span v-bind:title="tip">我是一个span便签</span>
对应的在JS里添加,加到哪里呢,记得之前有个data配置项吗?对,数据。
data() {
return {
aaaaa: 15,
tip:"我是新的提示"
}
},
这样悬停在上面的提示就更新了。