看bilibili的vue视频中各博主基本都会有vue天气这样一个案例,接下来我们来学习一下
咋先看看js是如何实现的,比对学习一下,更好的理解vue的思想,把js编写思想扭转过来.
<body>
<h1>今天天气针不错,好<p id="c">凉爽</p>
</h1><br />
<button id="btn">点击切换天气</button>
<script>
//获取元素 dom获取元素
var btn = document.getElementById('btn');
var c = document.getElementById("c");
btn.onclick = function () {
if (c.innerHTML == "凉爽") {
c.innerHTML = "炎热";
} else {
c.innerHTML = "凉爽";
}
}
</script>
</body>
js命令式编程,首先都要获取dom对象,在对dom对象进行值的修改等
<body>
<div id="root">
<!--为简化插值语法中的计算,用到计算属性-->
<!--<h3>今天天气很{{isHot ?'炎热' :'寒冷' }}</h3> -->
<!--<h3>今天天气很{{info}}</h3>--> <!--把isHot?:'炎热'?'寒冷'交给info维护计算-->
<button @click="changeWeather()">改变天气</button>
</div>
<script>
new Vue({
el:'#root',
data:{
isHot:true,
},
computed: { //计算属性
info(){
return this.isHot ? '炎热' :'寒冷' //3元运算符
}
},
methods: { //点击事件交个methods处理
changeWeather(){
this.isHot=!this.isHot //点击一下就取反
}
},
})
</script>
</body>
咋再来看看vue是如何实现的 Vue是首先把值和js对象进行绑定,再修改js对象的值,vue框架就会自动把dom的值进行修改