百度竞价排名是以什么形式来计费的广告?,宁波seo排名费用,做网站原型图用什么软件,大学it网页制作教程VUE 和 VUE-Cli VUE 是一种流行的渐进式JavaScript框架#xff0c;用于构建Web用户界面它具有易学、轻量级、灵活性强、高效率等特点#xff0c;并且可以与其他库和项目集成是目前最流行的前端框架之一VUE-Cli 称为“VUE脚手架”,它是由VUE官方提供的客户端#xff0c;专门为…VUE 和 VUE-Cli VUE 是一种流行的渐进式JavaScript框架用于构建Web用户界面它具有易学、轻量级、灵活性强、高效率等特点并且可以与其他库和项目集成是目前最流行的前端框架之一VUE-Cli 称为“VUE脚手架”,它是由VUE官方提供的客户端专门为单页面应用快速搭建的脚手架使用它可以轻松的创建新的应用程序而且可以自动生成vue和webpack工程模板
前端工程分类
前端工程分为单页面架构和多页面架构
多页面架构传统方案 指工程中存在多个*.html 文件每一个页面对应一个 html 文件单页面架构VUE 脚手架工程 指工程中只有一个 html 页面文件通过一个 html 页面中的内容改变实现多页面的效果 每个页面至少对应一个*.vue 文件 用户的URL只对应一个页面我们可以随时替换这个页面的内容方便更新 每个页面可以由多个部分组成每个部分都可以按需替换 局部替换的做法也反向实现了页面某些部分的复用 注意
html 文件是页面全部内容vue 文件可能是页面的一个部分也能是页面的所有内容两种方式对用户体验没有影响不论哪种方式在用户端是一样的 2. IDEA工具VUE工程初始化
确保IDEA中有vue插件 通过 IDEA 的 Terminal 工具在工程的根目录下执行 vue create 工程名 来创建工程通过 cd 工程名 指令 进入到创建的 vue 工程目录下启动工程 npm run serve停止工程CtrlC 输入 Y 回车修改端口号在 package.json 文件的第 6 行修改
serve: vue-cli-service serve --port 9090,VUE项目工程结构解析 项目中需要大家关注的主要内容 public 文件夹里面存放静态资源文件如图片/视频等 src/router/index.js路由配置文件在里面配置请求地址和 VUE 组件的映射关系 src/views在里面创建对应每个页面的*.vue 文件 App.vue此组件工程启动后自动挂载到 index.html 页面的组件可以理解为工程的入口 main.js当需要引入其他框架或对进行配置时使用此文件 package.json修改端口号 新view.vue 的创建方式 在 v1/src/App.vue中添加新view文件的router-link链接 在v1/src/views文件夹下创建一个新的VueComponent(也就是.vue文件) 3. 编写新创建好的.vue文件
template标签中放的是HTMLstyle标签中放的是CSSscript标签中放的是JS 注意:vue3的script开始标签中必须要有setup,否则代码不生效 还需要在v1/src/router/index.js文件中配置路由跳转的路径path就是App.vue中router-link标签中to属性的值箭头函数加载的就是对应的.vue文件的路径 写完可以启动项目访问http://localhost:9090/ 进行测试如果看到了下图所示的内容则表明配置成功了 5. MVC 与 MVVM MVC 设计模式就是将实现前端业务的所有代码划分为三部分
M: Model 模型 对应数据相关代码V: View 视图 对应的是页面标签相关C: Controller 控制器 对应的是将数据显示到页面中的过程代码 MVC 设计模式的弊端 Controller 需要频繁的进行 DOM 相关操作遍历查找元素比较浪费资源 MVVM 设计模式就很好的解决了这个问题 MVVM 设计模式也是将实现前端业务的所有代码划分为三部分M: Model 模型 对应数据相关代码(数据)V: View 视图 对应的是页面标签相关(页面)VM:ViewModel 视图模型直接将页面元素与变量进行绑定 视图模型负责将页面中可能发生改变的元素和某个变量在内存中进行绑定对变量进行监听当变量发生改变时会从内存中找到和变量所对应的元素 让元素进行改动 这样就不用像 MVC 设计模式中通过遍历查找的方式查找元素了大大提高了执行的效率 6. VUE指令练习 6.1 文本相关指令练习 AView.vue
const info ref(“文本相关的内容”); 定义响应式变量,注意需要导入{{变量}} 插值让此处的文本内容与变量进行绑定
v-text“响应式变量名”将文本内容与变量进行绑定v-html“响应式变量名”将标签内容与变量进行绑定
关于写法:响应式变量的导入语句: import {ref} from “vue”;在JS代码中使用响应式变量: console.log(info.value);箭头函数: const f (参数列表){方法体}
template
h1我是第一个页面/h1
!-- 插值指令:将页面显示的文本与响应式变量的值进行绑定
如果修改变量的值页面显示的文本也会随之改变--
span{{info}}/span
p{{info}}/p
h1{{info}}/h1
!-- 响应式变量的值还可以拼接 --
{{info大家好呀}}
hr
p v-textinfo/p !-- v-text渲染文本内容--
p v-htmlinfo/p !-- v-html若有html元素会按照元素效果进行渲染--
button clickf点我/button !-- 点击事件click --
/templatescript setup
import {ref} from vue;
//1.定义响应式变量,注意:必须导入
const info ref(我是info666);
//2.箭头函数
const f (){
info.value 我是markinfo2/mark;//在JS中使用响应式变量的值必须.value!!!
}/scriptstyle scoped/style6.2 属性绑定练习 BView.vue
v-bind:属性名“变量名”让HTML元素的 xxx 属性的值与变量值进行绑定可以简写成 :属性名“变量名”
templateh1属性绑定练习/h1input typetext valuekk !--输入框默认值设置为kk--input typetext valueinfo !--输入框默认值设置为info--input typetext v-bind:valueinfo !--输入框value属性与响应式变量info绑定--input typetext :valueinfo !--属性绑定可以简写 去掉前面的v-bind--hra hrefurl超链接1/aa :hrefurl超链接2/a
/template
script setup
import {ref} from vue;const info ref(属性绑定999)const url ref(https://www.jd.com)
url.value https://www.baidu.com;
/scriptstyle scoped/style6.3 双向绑定练习 CView.vue
双向绑定页面中的内容发生改变变量的值也会随之改变v-model“变量名” 除了这个其他都是单向绑定当需要获取用户输入的内容时使用输入框/单选/多选/下拉选框等
之前 DOM 操作需要先获取 html 元素再获取 html 元素的值效率较低现在使用 MVVM 的方式当页面的值发生改变变量保存的值也会立即随之改变可以直接使用双向绑定的数据会实时更新但注意用户输入也会影响绑定的数据
templateh1双向绑定指令/h1{{info}}input typetext :valueinfohr!-- 双向绑定:将页面与下方变量info进行绑定1)info变量的值会显示在绑定的html元素上2)页面html元素发生改变,绑定的info变量的值也会随之改变--input typetext v-modelinfoh3登录页面/h3input typetext placeholder请输入用户名 v-modeluser.usernameinput typepassword placeholder请输入密码 v-modeluser.passwordbr性别:input typeradio namegender value1 v-modeluser.gender男input typeradio namegender value0 v-modeluser.gender女button clickf()登录/button
/templatescript setup
import {ref} from vue;
const info ref(测试数据);
const user ref({username:tom,password:123,gender:0})
const f (){console.log(user.value);console.log(user.value.username);console.log(user.value.password);console.log(user.value.gender);
}
/scriptstyle scoped/style6.4 事件绑定练习 DView.vue
click“f()” 与 v-on:click“f()” 都是绑定点击事件keydown.enter“ent()” 表示绑定敲回车事件
templateh1事件绑定指令/h1!-- 下面两种写法是等价的,我们一般用第2种 --button v-on:clickf()按钮/buttonbutton clickf()按钮2/buttonh3敲回车事件/h3input typetext placeholder请搜索你喜欢的影片keydown.enterent() v-modelsearch
/templatescript setup
import {ref} from vue;
const search ref();
const ent (){alert(您想搜索的内容是:search.value);
}const f (){alert(点击了!);
}
/scriptstyle scoped/style
6.5 循环指令练习 EView.vue
- v-for元素 in 数组 遍历数组 遍历时会生成当前遍历到的元素
- v-for元素 in 数字n 遍历数组 从1到数字n步长为1数字n可以自定义
- v-for(元素,下标) in 数组 第2个参数是当前遍历到的元素下标从0开始
templateh1循环指令/h1ul!-- 循环遍历arr数组,uname就是本轮循环遍历到的元素 --li v-foruname in arr{{uname}}/li/ulol!-- 从1开始遍历,一直到数字5,固定每次,结束数字5可以自定义 --li v-foritem in 5{{item}}/li/oltable border1pxcaption商品列表/captiontrth序号/thth商品名称/thth商品价格/thth商品库存/thth操作/th/trtr v-for(item,index) in productArrtd{{index1}}/tdtd{{item.title}}/tdtd{{item.price}}/tdtd{{item.num}}/tdtdbutton clickdel(index)删除/button/td/tr/table
/templatescript setup
import {ref} from vue;const arr ref([张三,李四,王五,赵六,钱七]);const productArr ref([{title:小米手机,price:5000,num:800},{title:华为手机,price:6000,num:900},{title:苹果手机,price:7000,num:100},{title:OPPO手机,price:8000,num:200},
]);const del (index){if(confirm(您确认要删除此条数据吗?)){//删除数组中的元素,从当前index开始,删1个元素productArr.value.splice(index,1);}
}
/scriptstyle scoped/style6.6 隐藏显示指令练习 FView.vue v-if“变量”控制元素是否显示
true 显示false 不显示直接在DOM中跳过该元素渲染,HTML代码中没有该元素元素首次渲染需要复杂计算或初始化,v-if初次加载的速度快,推荐使用 v-else 和最近的未关闭的 v-if 状态取反 v-show“变量”控制元素是否显示true 显示false 不显示隐藏元素通过设置CSS display:none;让元素消失当元素需要频繁修改显示状态时推荐使用,不用多次新建删除元素,开销较小
templateh1隐藏显示指令/h1!-- v-if布尔值 true元素显示 false元素消失false表示该元素不会被渲染到DOM中,会直接跳过这部分内容的渲染 --p v-iftrue张三/pp v-iffalse李四/pp王五/phrp v-ifisShow月亮/pp v-ifisShow星星/p!-- v-else是v-if取反 它会找离自己最近的v-if进行取反 --p v-else太阳/phr!-- v-if是直接在DOM中跳过该元素渲染,HTML代码中没有该元素 --p v-iffalse小绿/p!-- v-show是修改元素的CSS属性display:none;在频繁切换是否显示时才推荐,性能更好 --p v-showfalse小红/p
/templatescript setup
import {ref} from vue;const isShow ref(false);
/scriptstyle scoped/style
6.7 计算器练习 GView.vuetemplateh1计算器练习/h1input typetext placeholder请输入数字1 v-modela/input typetext placeholder请输入数字2 v-modelb/hrbutton clickcalc()加/buttonbutton clickcalc(-)减/buttonbutton clickcalc(*)乘/buttonbutton clickcalc(/)除/buttonh4运算结果:{{result}}/h4
/templatescript setup
import {ref} from vue;
//定义响应式变量
const a ref();
const b ref();
const result ref();
//定义箭头函数
const calc (o){//响应式变量在JS中使用必须.value!//eval(5*2) 结果为10 将字符串形式的算式转为JS进行运算result.value eval(a.valueob.value);
}
/scriptstyle scoped/style6.8 猜数字练习 HView.vue
templateh1猜数字练习/h1input typetext placeholder请输入1~100之间的整数 v-modelnumbutton clickguess()猜一猜/buttonh3{{result}}/h3
/templatescript setup
import { ref } from vue;
const num ref();
const result ref();
//生成一个随机数
let x parseInt(Math.random()*100)1;
console.log(x);
const guess (){if(num.valuex){result.value猜大了;}else if(num.valuex){result.value猜小了;}else{result.value猜对了;}
}
/scriptstyle scoped/style
6.9 员工列表练习 IView.vue
html
templateh1员工列表练习/h1input typetext placeholder请输入员工姓名 v-modele.nameinput typetext placeholder请输入员工工资 v-modele.salaryinput typetext placeholder请输入员工岗位 v-modele.jobbutton clickadd()点我添加/buttonhrtable border1pxtrth员工编号/thth员工姓名/thth员工工资/thth员工岗位/th/trtr v-for(emp,i) in arrtd{{i1}}/tdtd{{emp.name}}/tdtd{{emp.salary}}/tdtd{{emp.job}}/td/tr/table
/templatescript setup
import {ref} from vue;const e ref({name:,salary:,job:});
const arr ref([]);
const add (){//如果输入框有空值,不允许新增!if(e.value.name.trim() || e.value.salary.trim() || e.value.job.trim()){alert(请输入完整信息);return;}//每准备好一个员工数据就存入arr数组中arr.value.push(e.value);//新增成功后清空所有输入框e.value {name:,salary:,job:};//e.value {};
}/scriptstyle scoped/style
6.10 个人简历练习
templateh1个人简历练习/h1table border1pxtrtd照片:/tdtdimg :srcperson.imgUrl width100/td/trtrtd姓名:/tdtd{{person.name}}/td/trtrtd年龄:/tdtd{{person.age}}/td/trtrtd好友:/tdtdulli v-forfName in person.friends{{fName}}/li/ul/td/tr/tablebutton clickloadData()点击加载数据/button
/templatescript setup
import {ref} from vue;//准备一个空对象用来保存数据
const person ref({name:,age:,imgUrl:,friends:[]});
const loadData (){person.value {name:传奇哥,age:18,imgUrl:fcq.jpg,friends:[李四,王五,赵六]}
}
/scriptstyle scoped/styleVUE指令总结{{变量}}插值让此处的文本内容和变量进行绑定v-text“变量”让元素的文本内容和变量进行绑定v-html“变量”让元素的 html 标签内容和变量进行绑定v-bind:属性名“变量”让 xxx 属性的值和变量进行绑定简写是把 v-bind 去掉v-model“变量”让控件的值和变量进行双向绑定 应用场景当需要获取用户输入内容时使用 当变量的值改变时控件的值会随之改变当控件中用户输入的值改变时变量的值也会随之改变v-on:事件名“方法”事件绑定简写事件名v-for“(变量,下标) in 数组”循环遍历指令遍历的过程中生成遍历到的当前元素v-if“变量”控制元素是否显示true 显示false 不显示直接不渲染该元素v-else 和 v-if 的状态取反v-show“变量”控制元素是否显示true 显示false 不显示隐藏元素
