传统网页开发步骤
- 编写HTML
- 确定哪个Dom是需要进行交互的
- 编写CSS
- 编写JavaScript交互
- 获取dom
- 添加事件监听
- 维护数据
在传统的方式中，如果我们需要对某个元素进行操作，那么需要用选择器获取对应的dom元素，然后再对dom元素进行操作。也就是dom操作比较繁琐。另外，js中的数据跟Dom元素中的展示的内容是分开的。需要将js中变量的值设置再dom元素的内容当中，才可以在页面中显示出来。也就是，数据和视图是分开的，是不同步的。 另外，HTML是静态的，如果多个页面有相同的结构，例如导航，底部，按钮等，需要在每个页面赋值代码； css是全局共享的，如果不小心使用了相同的“class”那么后定义的样式会把先定义的给覆盖掉了；JavaScript的全局变量也是共享的。引入多个JavaScript之后，如果使用了同名的变量，那也可能会造成污染。 html和JavaScript是紧密结合的，需要通过id等属性来获取dom实例，耦合性比较高。如果HTML有修改，那么相应的js代码可能也需要进行修改。
这些问题，在VUE中都能够得到解决。
VUE 的好处
VUE是渐进式的，也就是说，可以单独将某个元素或者某个部分，改造成使用vue的方式。
VUE通过模板语法，可以动态的显示数据，减少代码量。
数据可以交由VUE来管理，实现视图与数据的同步。
通过组件化的代码，可以复用HTML代码，组件之间是相互独立的。一个组件的数据发生变化，不会影响另一个组件的数据。避免了数据冲突的问题。
使用VUE单一组件特性，可以让CSS只针对本组件生效，
引用VUE
引入VUE的方式大体上有两种，一种是通过script标签的方式进行引入，可以引入本地的vue.js文件，也可以引用在线cdn的方式引入。
第二种是所以用脚手架，这个后面再讨论。
demo
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="lib/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>播放列表</h1>
<input type="text" placeholder="请输入要查找的歌曲名" class="search" v-model="searchTerm"/>
<ul>
<li v-for="song in filteredPlayList">{{song}}</li>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, "PingFang SC", "Microsoft Yahei", sans-serif;
}
body {
background: #ebfafe;
display: grid;
place-items: center;
height: 100vh;
}
#app {
min-width: 375px;
min-height: 500px;
background: #ffffff;
box-shadow: 0px 0px 48px rgba(0, 0, 0, 0.25);
border-radius: 24px;
padding: 28px;
}
#app h1 {
font-size: 16px;
color: #878b91;
font-weight: 500;
}
.search {
width: 100%;
background: #f8f8f8;
border: none;
border-radius: 8px;
padding: 10px;
margin: 24px 0;
font-size: 14px;
outline: none;
}
.search::placeholder {
color: #d5dbe3;
}
#app ul {
color: #425066;
list-style: none;
}
#app ul li {
margin-bottom: 24px;
}
JavaScript
const PlayList = {
data(){
return {
playlist:["第一首歌", "第二首歌", "第三首歌"],
searchTerm: "",
};
},
computed:{
filteredPlayList(){
if(this.searchTerm){
return this.playlist.filter((song) =>
song.toLowerCase().includes(this.searchTerm.toLowerCase())
);
}else{
return this.playlist;
}
}
}
};
Vue.createApp(PlayList).mount("#app");
