公司网站招聘板块怎么做,网站不显示index.html,百度云盘,腾讯公司网页框架#xff1a;
框架结构#xff0c;把很多基础功能已经实现#xff08;封装了#xff09;。
框架#xff1a;在基础语言之上#xff0c;对各种基础功能进行封装#xff0c;方便开发者#xff0c;提高开发效率。
举例#xff1a;操作页面
现在#xff1a;点击按…框架
框架结构把很多基础功能已经实现封装了。
框架在基础语言之上对各种基础功能进行封装方便开发者提高开发效率。
举例操作页面
现在点击按钮触发事件获得要操作的标签对标签进行操作。
框架操作网页时程序员只关注操作的内容即可对标签的内容更新操作都由框架完成。
前端框架
JavaScript是原生的。
vue.js 是一个js框架不是代替js的是对js进行封装。
优点:
体积小
效率高
双向数据绑定
M V VM
生态丰富学习成本低花费时间少点
UI框架将前端常用的一些组件表单按钮消息提示进行封装对html和css进行封装。
后端java框架
mybatis--jdbc
spring···
部分VUE指令
v-showv-if和v-else
v-show布尔值 true-显示false-隐藏 控制标签的display属性显示和隐藏标签效率高 v-if布尔值 true-显示false-隐藏 会在隐藏时删除标签重新显示时创建标签效率低v-else 和 v-if配合
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.js/scriptstyleimg{width: 100px;height: 100px;}/style/headbody!-- v-show布尔值 true-显示false-隐藏 控制标签的display属性显示和隐藏标签效率高v-if布尔值 true-显示false-隐藏 会在隐藏时删除标签重新显示时创建标签效率低v-else 和 v-if配合--div idappimg v-showisShow srcimg/1.jpg/img v-showage18 srcimg/2.jpg/img v-ifisShow srcimg/3.jpg/img v-ifage18 srcimg/4.jpg/img v-else srcimg/5.jpg/input typebutton value切换 clickqh()/divscriptvar app new Vue({el: #app, data: {isShow:true,age:15},methods:{qh(){this.isShow!this.isShow;this.age19;}}})/script/body
/html
v-users
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.js/script/headbodydiv iduidli/li/divscriptvar users[{name:jim,age:20,gender:男},{name:lih,age:21,gender:女},{name:xm,age:22,gender:男}]var uobj document.getElementById(uid);var s;for(var i0;iusers.length;i){sli姓名:users[i].name,年龄:users[i].age,性别:users[i].gender/li}uobj.innerHTMLs;/script/body
/html
v-for
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.js/script/headbodydiv idappli v-forusr in users姓名:{{usr.name}}年龄:{{usr.age}}性别:{{usr.gender}}/li/divscriptvar app new Vue({el: #app, data: {//数组模拟从后端响应回来的数据users:[{name:jim,age:20,gender:男},{name:lih,age:21,gender:女},{name:xm,age:22,gender:男}]},methods:{}})/script/body
/html
VUE-CLI(脚手架)
vue-cli官方提供的脚手架用于快速生成一个 vue 的项目模板预先定义 好的目录结构及基础代码使得开发更加的快速
主要的功能
统一的目录结构本地调试热部署单元测试集成打包上线
需要的环境
Node.js(前段js的一个运行环境)
npm: npm 是 Node.js 的包管理工具用来安装各种 Node.js 的扩展. 使用HbuilderX 搭建vue-cli项目步骤
一、创建一个vue-cli默认项目或者vue3-cli默认项目学习前期建议使用vue-cli默认项目创建后会进行下载需要等待一段时间
二、通过npm i vue-router3.5.3命令在命令窗口安装vue-router插件包
三、创建Router目录并在其中创建index.js文件并在其中配置路由导入路由和其他组件
四、在Vue.use(router)后定义组件路由最后在导出路由。
五、使用路由
六、在main.js中配置路由。
七、运行项目
搭建Node.js环境
一、下载Node.js 通过地址下载 Node.js — Download Node.js® 二、解压后 选好要安装的文件位置 之后一直让其继续就行知道安装好Node.js。 然后我们可以通过winR cmd进入指令窗口输入“node -v”和npm -v 当分别出现v16.20.2和8.19.4说明安装好了可以通过HbuilderX快速创建vue-cli项目了。
