前言：
现时我们对“css站位”大致比较关注，各位老铁们都需要剖析一些“css站位”的相关知识。那么小编在网络上汇集了一些关于“css站位””的相关资讯，希望各位老铁们能喜欢，大家快快来了解一下吧！前端环境的准备
编码工具：VSCode
依赖管理：NPM
项目构建：VueCli
Vue框架介绍
学习Vue前端框架需要有html,css，js的基础。
关于MVVM模式：
Vue快速入门
下面开始设计：
新建一个文件夹 D:\code\demo，打开Visual Studio Code，将demo文件夹拖拽到Visual Studio Code中。
新建一个文件，保存到D:\code\demo文件夹中，文件名为demo.html
输入英文的 ！，然后回车，就可以得到html主要代码
在<body> </body>编写如下代码：
<body> <script src=";></script><div id="app">{{ message }}</div><script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')</script></body>说明：
1.添加如下代码，导入Vue脚本
<script src=";></script>
2.设置视图（View）。<div></div>标签之间的内容归View管理，声明要被vue所控制的DOM区域
<div id="app">{{ message }}</div>3创建ViewModel（创建vue的实例对象）,
<script> const { createApp } = Vue createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app')</script>data里面规定的是数据，现在把数据渲染到上面的主键里面去，使用{{ message }}，里面的message就是data里面的属性值。还要通过.mount('#app')确定渲染的范围，这里就是<div></div>这个标签范围内。
这里安装一个插件，open in browser。
安装插件有就可以在代码中右键，直接在浏览器中看效果。
可以得到如下效果
进入Vue官网： 在快手上手里面有基本用法。
1.基本用法
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <!--2.声明要被 vue 所控制的DOM区域--> <div id="app">{{message}}</div><!--3.创建 vue 的实例对象 --><script>const hello = { //指定数据源，即MVVM中的Model data:function(){ return { message:'Hello Vue' } }}const app = Vue.createApp(hello)app.mount('#app')</script></body></html>2.内容渲染指令<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <div id="app"> <p>姓名：{{username}}</p> <p>性别：{{gender}}</p> <p>{{desc}}}</p> <p v-html="desc"></p> </div> <script> const vm={ data:function(){ return { username:'张三', gender:'男', desc:'<a href=";>百度</a>' } } } const app = Vue.createApp(vm) app.mount('#app') </script></body></html>注意：{{ }}为模板语法；{{desc}} 只会显示原始内容；
使用v-html指令就能将 desc:'<a href=";>百度</a>' 这部分内容以HTML的方式渲染出来，在浏览器中就会变成一个超链接的形式。
3.属性绑定指令
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <div id = "app"> <a :href="link">百度</a> <input type="text" :placeholder = "inputValue"> <img :src="imgSrc" :style="{width:w}" alt=""> </div> <script> const vm={ data:function(){ return{ link:";, //文本框的站位符号 inputValue:'请输入内容', //图片的 src 地址 imgSrc:'./images/test.jpg', w:'500px' } } } const app=Vue.createApp(vm) app.mount('#app') </script></body></html>标签是有属性的，属性的绑定需要叫冒号 “ ：”
还有一个写法就是加 v-bind: 但是一般都会把 v-bind 省略，就保留 ：号。
比如： input输入框 有 type属性，placeholder属性；img图片的src属性，style样式属性等，都要在前面加 ：号。
：号后面的是一个变量或表达式。
4.使用javaScript表达式
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <!--Vue 实例要控制的 DOM 区域--> <div id="app"> <p>{{number + 1}}</p> <p>{{ok ? 'True' : 'False'}}</p> <p>{{message.split('').reverse().join('')}}</p> <p :id="'list-' + id ">xxx</p> <p>{{user.name}}</p> </div> <script> const vm={ data :function(){ return{ number: 9, ok:false, message:'ABC', id:3, user:{ name:'zs', } } } } const app = Vue.createApp(vm) app.mount('#app') </script></body></html>解释：
number + 1 变量加1
ok ? 'True' : 'False' 三元表达式
message.split('').reverse().join('') 字符断点翻转
user.name 调用user的name属性。
5.事件绑定指令
前端绑定事件操作：比如点击后加1；
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><!--Vue 实例要控制的 DOM 区域--> <div id = "app"> <h3>count 的值为：{{count}}</h3> <button v-on:click="addCount">+1</button> <button @click="count+=1">+1</button> </div> <script> const vm={ data:function(){ return{ count:0, } }, methods:{ //点击按钮，让count 自增 +1 addCount(){ this.count +=1 } }, } const app = Vue.createApp(vm) app.mount('#app') </script><body> </body></html>说明：count的值初始定为0。
<button v-on:click="addCount"> 按钮点击会触动"addCount"方法。在下面的addCount()方法中定义了count的值自增1。
v-on: 在这里可以简写成 @
<button @click="count+=1"> 直接在按钮中定义了表达式。
如果逻辑简单可以直接用表达式，逻辑复杂可以定义函数来完成。
按钮中的count数据发生变化，<h3>{{count}}里面的count的值自动变化，页面也自动刷新。
自定义的方法定到methods里面，这里的this就是指vm对象，用 this. 就可以访问上面的初始count = 0 。
6.条件渲染指令
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <div id="app"> <button @click="flag=!flag">Toggle Flag</button> <p v-if="flag">请求成功----被 v-if 控制</p> <p v-show="flag">请求成功----被 v-if 控制</p> </div> <script> const vm = { data:function(){ return{ flag:false, } } } const app = Vue.createApp(vm) app.mount('#app') </script> </body></html>说明：
v-if 传递的是一个布尔值，如果值为 true,标签被渲染，如果为false 标签就不会被渲染。
运行结果，可以看到两个<p>标签在浏览器中都看不到，区别为
v-if 的值为false，该标签不会创建出来；
v-show 的值为false，该标签会被创建出来，但是会隐藏起来，不会在浏览器中显示出来。
如果标签频繁被切换，使用v-show 效率更加高一点。
点击按钮：<button @click="flag=!flag">，里面通过 !flag 将 flag 值取反，这样 flag 的值就由 false 变成了 true ,这样两个<p>标签的内容就显示在浏览器上了。
7.v-else和v-else-if指令
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <div id="app"> <p v-if="num > 0.5">随机数 > 0.5</p> <p v-else>随机数≤0.5</p> <hr/> <p v-if="type === 'A'">优秀</p> <p v-else-if="type === 'B'">良好</p> <p v-else-if="type === 'C'">一般</p> <p v-else>差</p> <div v-show="a"> 测试 </div> <button @click="a=!a">点击</button> </div><script> const vm = { data:function(){ return{ //设置1以内的随机数 num:Math.random(0.99), //设置type的值 type:'B', //给变量 a 赋值 a:false, } } } const app = Vue.createApp(vm) app.mount('#app')</script></body></html>v-else和v-else-if指令就是判断语句的用法
num:Math.random(0.99)
设置1以内的随机数赋值给 num ，两个<p>标签中根据 num 的值显示不同内容
<p v-if="num > 0.5">随机数 > 0.5</p><p v-else>随机数≤0.5</p>
这里直接给 type 赋值了 B ，有兴趣了可以自己写一个方法，随机赋值 A B C D,这样就可以在浏览器中出现相应的成绩。
type:'B'
运行结果：
8.列表渲染指令
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <div id="app"> <ul> <li v-for="(user,i) in userList">索引是{{i}},姓名是：{{user.name}}</li> </ul> </div> <script> const vm = { data:function(){ return{ userList:[ {id:1,name:'zhangsan'}, {id:2,name:'lisi'}, {id:3,name:'wangwu'}, ] , } }, } const app = Vue.createApp(vm) app.mount('#app') </script> </body></html>定义了一个 userList 数组（注意：数组用 [ ] 符号）用于存数据，里面赋值了3个有 id 和 name 属性的对象。这里的数据也可以从后端传过来，后面会讲前后端的联调。
<li v-for="(user,i) in userList">
v-for 后面的可以带一个参数，这时取出来就是对应的元素。这里的两个参数(user,i)，前面的是元素，后面的是索引 。in 后面是需要循环的数据 userList,这时userList 里面有多少个元素，<li> 标签就会被创建几个。所以这里写的是一个<li>标签，浏览器显示出来的是三个<li>标签的内容。
运行结果
9.v-for中的key
<!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> <!--1.导入 vue 的脚本文件--> <script src=";></script></head><body> <div id="app"> <!---添加用户的区域---> <div > <input type="text" v-model="name"> <button @click="addNewUser">添加新用户</button> </div> <!---用户列表区域---> <ul> <li v-for="(user,index) in userList"> <input type="checkbox" /> 姓名：{{user.name}} </li> </ul> </div> <script> const vm = { data:function(){ return{ userList:[ {id:1,name:'zhangsan'}, {id:2,name:'lisi'}, ] , //输入的用户名 name:'', //下一个可用的 id 值 nextId:3 } }, methods:{ //点击添加按钮 addNewUser(){ this.userList.unshift({id:this.nextId,name:this.name}) this.name='' this.nextId++ } } } const app = Vue.createApp(vm) app.mount('#app') </script></body></html>运行结果：
对文本框中输入新用户姓名，比如: george 点击 添加新用户按钮，结果如下：
标签： #css站位
