做网站就上房山华网天下,安徽索凯特建设工程有限公司网站,郑州市汉狮做网站,先域名 还是先做网站目录
一、 框架
● vue.js 框架
● 特点
● Vue 安装
二、 第一个vue程序
● 创建项目
编辑
● 导入 vue.js
● 创建vue对象#xff0c;设置属性#xff0c;使用模版渲染到页面
介绍 — Vue.js (vuejs.org)
三、 vue指令
● v-text
● v-html
● v-…目录
一、 框架
● vue.js 框架
● 特点
● Vue 安装
二、 第一个vue程序
● 创建项目
编辑
● 导入 vue.js
● 创建vue对象设置属性使用模版渲染到页面
介绍 — Vue.js (vuejs.org)
三、 vue指令
● v-text
● v-html
● v-on
● v-model
● v-show
● v-if
● v-bind
● v-for
四、 Vue 实例生命周期 Vue 生命周期图示取自Vue2官方文档 五、 vue-cli 搭建项目
● 主要的功能
● 需要的环境
测试
● 使用 HbuilderX 快速搭建一个 vue-cli 项目
编辑
● 如果下载网上的cli 文件没有node_modules
● 启动项目
● 打包项目
六、 组件路由 ● 创建vue文件网页本体编辑
● 安装router ● 搭建在router目录中的index.js文件中导入vue文件和其他 • 创建 router 目录 • 在 router 目录 中创建 index.js 文件,在其中配置路由 • 使用路由 • 在 main.js 中配置路由代码最终运行 • 路由导航守卫 • 路由嵌套 • 路由传参
七、 ElementUI ● 安装 ElementUI
npm i element-ui -S
● 练习
登录界面
管理界面
专业
学生
index.js文件 一、 框架 什么是框架如同盖高楼大厦一样高楼的框架先一步搭建好实现将许多基本功能实现封装后续只需要填充内容即可。
框架就是在基础语言之上对各种基础功能进行封装方便开发者提高开发效率 ● vue.js 框架
Vue 是前端的主流框架之一用于构建用户界面的渐进式框架。Vue的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。是对js进行的封装而非代替js ● 特点
1.体积小 压缩后 33K
2.更高的运行效率 用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候浏览器要不停的渲染新的 DOM 树导致页面看起来非常卡顿。基于虚拟 dom一种可以预先通过 JavaScript 进行各种计算把最终的 DOM 操作计算出来并优化的技术最后在计算完毕才真正将 DOM 操作提交。
3.双向数据绑定,简化 Dom 操作 通过 MVVM 思想实现数据的双向绑定让开发者不用再操作 dom 对象把更多的精力投入到业务逻辑上。 其中 MVVM 是 Model-View-ViewModel即M-V-VM 的简写。MVVM 就是将其中的 View 的状态和行为抽象化让我们将视图 UI 和业务逻辑分开。 4 生态丰富、学习成本低 市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件来即用实现快速开发对初学者友好、入门容易、学习资料多 ● Vue 安装
安装 — Vue.js (vuejs.org) 下载
方式 1:直接用 script 引入
下载 Vue.js 并导入 js 文件
script srcjs/vue.js/script 方式 2:命令行工具 (CLI)
安装教程给出了更多安装 Vue 的方式。不推荐新手直接使用 vue-cli尤其是在你还不熟悉基于 Node.js 的构建工具时。 二、 第一个vue程序 ● 创建项目
在新建项目中选择vue项目普通模式 然后将 v3.2.8 版本删掉我们先学习2.0版本 ● 导入 vue.js
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title!-- 导入 vue.js --script srcjs/v2.6.10/vue.min.js/script!-- vue.js 和 vue.min.js 的区别就是一个没压缩一个压缩了 --/headbody/body
/html
● 创建vue对象设置属性使用模版渲染到页面
介绍 — Vue.js (vuejs.org)
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title!-- 导入 vue.js --script srcjs/v2.6.10/vue.min.js/script!-- vue.js 和 vue.min.js 的区别就是一个没压缩一个压缩了 --/headbody!-- 创建了一个标签 --div idapp{{ message }} {{name}} !-- {{ }} 插值表达式可以获取data中定义的数据 --input v-modelname //divscript// 创建一个 vue对象var app new Vue({el: #app, //将vue对象和 div对象监听绑定 绑定挂载点// Vue 会管理 el 选项命中的元素及其内部的后代元素 可以使用其他的闭合标签但不能使用 HTML 和 body// #id - id选择器// .class - class选择器data: { //定义数据 可以定义多个message: Hello Vue!, //属性与属性之间用 ,分隔name: jim}})/script/body
/html
代码解析: {{ 变量 }} ,插值表达式获取 data 数据 new Vue(); 创建 Vue 对象(VM 对象) el:数据挂载的 dom 对象 data:{ message:’hello world’} model 数据 Vue 会管理 el 选项命中的元素及其内部的后代元素
可以使用其他的选择器像 .class 是class选择器但是建议使用 ID 选择器
可以使用其他的闭合标签但不能使用 HTML 和 BODY
data 中 定义着 Vue 要用到的数据
data 中可以写复杂类型的数据,如对象,数组 三、 vue指令 指令带有前缀 v- 开头以表示它们是 Vue 提供的特殊属性。
● v-text
作用是设置标签的文本内容
默认写法会替换全部内容使用差值表达式可以替换指定内容
内部支持写表达式
p v-textmessage非凡英才/p
p{{message}}非凡英才/p
● v-html
作用是设置标签的文本内容
默认写法会替换全部内容使用差值表达式可以替换指定内容
内部支持写表达式
p v-textmessage非凡英才/p
p{{message}}非凡英才/p
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.min.js/script/headbody!-- v-text作用是设置标签的文本内容默认写法会替换全部内容使用差值表达式可以替换指定内容内部支持写表达式p v-textmessage非凡英才/pp{{message}}非凡英才/p--!--v-html作用是设置标签的文本内容默认写法会替换全部内容使用差值表达式可以替换指定内容内部支持写表达式p v-textmessage非凡英才/pp{{message}}非凡英才/p--div idappp{{message}} aaaa/p !-- 插值表达式仅仅插入一个值不影响标签中的其他内容 --p v-textmessageaaaa/p !-- 会覆盖标签中的内容 --p v-htmlmessageaaaa/pp v-texthtml/p !-- 直接显示内容不能解析标签 --p v-htmlhtml/p !-- 会保留内部的网页类型 --/divscriptvar app new Vue({el: #app,data: {message: Hello Wrold!,html: bHello World/b}})/script/body
/html ● v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为
绑定的方法定义在 methods 属性中,可以传入自定义参数 input typebutton value按钮 v-on:clicktest(1,2) / input typebutton value按钮 clicktest / methods:{ test(a,b){ alert(a); } } !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.min.js/script/headbody!-- v-on作用是为元素绑定事件事件名不需要写 on 指令可以简写为绑定的方法定义在 methods 属性中,可以传入自定义参数--div idapp!-- input typebutton value按钮 onclicktest1() 报错 --input typebutton value按钮1 v-on:clicktest1() !-- 法一 --input typebutton value按钮2 clicktest2(2) !-- 法二 --input typebutton value按钮3 clicktest3()input typebutton value按钮4 clicktest4()p{{message}}/p/divscriptvar app new Vue({el: #app,data: {message: Hello World},methods: { //函数定义在 vue对象内test1() {alert(this.message :1); //直接用自身对象},test2(a) { //同样可以传参alert(this.message : a);},test3() { //修改内容this.message aaaaaaaaa;},test4() { //内容逆序this.message this.message.split().reverse().join();}}})// function test() {// alert(app.message);// }/script/body
/html
● v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据----表单元素的值 双向数据绑定 input typetext v-modelmessage/ p{{message}}/p data:{ message: } !DOCTYPE html
htmlheadmeta charsetutf-8 /title/titlescript srcjs/v2.6.10/vue.min.js/script/headbody!-- v-model作用是便捷的设置和获取表单元素的值绑定的数据会和表单元素值相关联绑定的数据 --- --- 表单元素的值 双向数据绑定--div idappinput typebutton value按钮1 clicktest1()input v-modelname / !-- value值与 name值绑定 --p{{message}}/pp{{name}}/p/divscriptvar app new Vue({el: #app,data: {message: Hello World,name: },methods: {test1() {}}})/script/body
/html
● v-show
作用是根据真假切换元素的显示状态 原理是修改元素的 display实现显示隐藏指令后面的内容最终都会解析为布尔值值为 true 元素显示值为 false 元素隐藏 。数据改变之后对应元素的显示状态会同步更新 img v-showisShow srcimg/3.jpg / img v-showage18 srcimg/3.jpg / data:{ isShow:true, age:20 } ● v-if 作用是根据表达式的真假切换元素的显示状态把标签直接从网页上删去本质是通过操纵 dom 元素来切换
显示状态表达式的值为 true元素存在于 dom 中为 false从 dom 中移除
其后后可跟 v-else 的标签 频繁的切换 v-show反之使用 v-if前者的切换消耗小 !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.min.js/scriptstyleimg {width: 100px;height: 100px;}/style/headbody!-- v-show:作用是根据真假切换元素的显示状态通过修改display值实现显示隐藏指令后面的内容最终都会解析为布尔值值为 true 元素显示值为 false 元素隐藏数据改变之后对应元素的显示状态会同步更新img v-showisShow srcimg/3.jpg /img v-showage18 srcimg/3.jpg /data:{isShow:true,age:20}v-if作用是根据表达式的真假切换元素的显示状态把标签直接从网页上删去本质是通过操纵 dom 元素来切换显示状态表达式的值为 true元素存在于 dom 中为 false从 dom 中移除其后后可跟 v-else 的标签--div idapp!-- 改变属性 display --img srcimg/1.jpg alt v-showisShow /img srcimg/2.jpg alt v-showage18 classimg /br /!-- 直接在网页上删除 --img srcimg/3.jpg alt v-ifisShow /img srcimg/4.jpg alt v-ifage18 classimg /img srcimg/5.jpg alt v-elseage18 classimg /br /button clickTFxianshi()改变/button/divscriptvar app new Vue({el: #app,data: {isShow: true,age: 18},methods: {TFxianshi() {this.isShow !this.isShow;this.age 0;}}})/script/body
/html
● v-bind
作用是为元素绑定属性用于改变标签的属性的值 完整写法是 v-bind属性名 简写的话可以直接省略 v-bind只保留属性名 img v-bind:srcimgSrc / img :srcimgSrc / img :titleimgTitle :srcimgSrc / data:{ imgSrc:img/3.jpg imgTitle:这是一张图片 } 我们可以传给 v-bind:class 一个对象以动态地切换 class div v-bind:class{ active: isActive }/div data:{ isActive :true } !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.min.js/scriptstyleimg {width: 100px;height: 100px;}.active {color: rad;background-color: aqua;}/style/headbody!-- 作用是为元素绑定属性完整写法是 v-bind属性名简写的话可以直接省略 v-bind只保留属性名我们可以传给 v-bind:class 一个对象以动态地切换 class--div idappimg v-bind:srcimgurl[index] :titlearray[index] /!-- 动态的对样式进行改变 --div v-bind:class{active:isActive}wwww/divbutton clickoper()改变/button/divscriptvar app new Vue({el: #app,data: {imgurl: [img/1.jpg, img/2.jpg, img/3.jpg],array: [手机, 空调, 微波炉],index: 0,isActive: true},methods: {oper() {this.index this.index 1;this.isActive !this.isActive;}}})/script/body
/html ● v-for 作用是根据数据生成列表结构经常用于和 数组 结合相当于for循环 使用语法是itemindexin 数据 item 和 index 可以结合其他指令一起使用
数组长度的更新会同步到页面上是响应式的
为循环绑定一个 key 值 :key”值” 尽可能唯一 li v-foritem in array {{item}}省 /li li v-for(item,index) in array {{index1}}{{item}}省 /li li v-for(item,index) in objects {{index1}} {{item.name}} {{item.age}} /li data:{ array:[陕西,山西,河南], objects:[ {name:admin,age:23}, {name:jim,age:22} ] } !DOCTYPE html
htmlheadmeta charsetutf-8title/titlescript srcjs/v2.6.10/vue.min.js/scriptstyleimg {width: 100px;height: 100px;}/style/headbodydiv idappulli v-fori in users姓名:{{i.name}}年龄:{{i.age}}性别:{{i.gender}}/libr /button v-forj in buttons{{j.name}}/buttoninput typebutton v-fori in buttons v-bind:valuei.namebr /img v-fori in jpgs v-bind:srci alt //ul/divscriptvar app new Vue({el: #app,data: {//数组模拟从后端返回的数据users: [{name: jim,age: 20,gender: 女},{name: lina,age: 19,gender: 男},{name: tom,age: 19,gender: 男}],buttons: [{name: 开始},{name: 停止}],jpgs: [img/1.jpg, img/2.jpg, img/3.jpg]}})/script/body
/html 四、 Vue 实例生命周期 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数这给了用户在不同阶段添加自己的代码的机会。 beforeCreate: function () { console.log(beforeCreatea ’); }, created: function () { console.log(createda ); }, beforeMount: function(){ console.log(beforeMounta’); }, mounted: function(){ console.log(mounteda’); } Vue 生命周期图示取自Vue2官方文档 五、 vue-cli 搭建项目 vue-cli 官方提供的一个脚手架用于快速生成一个 vue 的项目模板预先定义好的目录结构及基础代码就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目这个骨架项目就是脚手架我们的开发更加的快速
● 主要的功能 ● 统一的目录结构只创建一个 html文件为这唯一的一个html文件配置 ● 本地调试 ● 热部署 ● 单元测试 ● 集成打包上线
● 需要的环境 Node.js 简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。 下载https://nodejs.org/en/download安装一路Next自行修改安装位置 npm npm 是 Node.js 的包管理工具用来安装各种 Node.js 的扩展。npm 是 JavaScript 的包管理工具也是世界上最大的软件注册表。有超过 60 万个 JavaScript 代码包可供下载。npm 让 JavaScript 开发人员可以轻松地使用其他开发人员共享的代码。 测试 这样就成功了。 ● 使用 HbuilderX 快速搭建一个 vue-cli 项目 等待下载 ● 如果下载网上的cli 文件没有node_modules npm install ● 启动项目 npm run serve 运行代码 如果报错提示 npm 关闭HBuilderX使用管理员运行
Ctrl c 停止服务
● 打包项目 npm run build 打包代码 然后就可以导出这个文件夹 删 成 六、 组件路由 ● 创建vue文件网页本体 ● 安装router 删除这个文件然后再命令工具中运行下面的代码这样以后再运行时就不会再生成该文件。 npm config set package-lock false vue-router 是一个插件包所以我们还是需要用 npm 来进行安装的。打开命令行工具进入你的项目目录输入下面命令。 npm i vue-router3.5.3 ● 搭建在router目录中的index.js文件中导入vue文件和其他 • 创建 router 目录 • 在 router 目录 中创建 index.js 文件,在其中配置路由 import Vue from vue; /* 导入 vue */
import router from vue-router; /* 导入路由 */// 导入注册组件import Login from ../Login.vue; /* 导入其他组件 */
import Main from ../Main.vue; /* 导入其他组件 */Vue.use(router)/* 定义组件路由 */
var rout new router({routes: [{ //为每一个组件创建地址path: /, //默认开启网页的网址component: Login},{path: /Login, //登录页面代表的网址name: Login,component: Login},{path: /Main,name: Main,component: Main}]
});//导出路由对象
export default rout; • 使用路由
在vue文件中可以试用index.js文件中配置的路由名来调用相应网页
templatediv !-- 只能有一个根标签 --router-link to/Login登录/router-linkrouter-link to/Main注册/router-link{{name}} {{age}}/div
/templatescriptexport default {name: ,data() {return {}},methods: {}}
/scriptstyle scoped
/style • 在 main.js 中配置路由代码最终运行
import Vue from vue
import App from ./App.vueVue.config.productionTip false// 导入组件路由
import router from ./router/index.js // . 表示同级 .. 表示上一级
Vue.use(router);new Vue({el: #app,router,render: h h(App)
}).$mount(#app) • 路由导航守卫 • 路由嵌套 • 路由传参 七、 ElementUI Element一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库. ● 安装 ElementUI npm i element-ui -S 在 main.js 中写入以下内容 import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI); new Vue({ render: h h(App), }).$mount(#app); ● 练习
登录界面
其中的logo.png 和 bg.jpg 自行放在assets中
!-- 一个.vue文件是一个组件,可以理解为一个页面,但是和页面不同 内容都写在一个template标签中,template标签必须有一个根标签
--
templatediv classlogin_container!-- 登录盒子--div classlogin_box!-- 头像盒子--div classimg_boximg src./assets/logo.png //div!-- 登录表单 --div stylemargin-top: 100px;el-form refform label-width80px stylemargin-right: 35px;el-form-item label账号el-input v-modelaccount/el-input/el-form-itemel-form-item label密码el-input v-modelpassword show-password/el-input/el-form-itemel-form-itemel-button typeprimary clicklogin()登录/el-buttonel-button取消/el-button/el-form-item/el-form/div/div/div
/templatescript/* 导出组件,并为组件定义数据,函数,生命周期函数 */export default {data() {return {account: , //账号password: //密码}},methods: {login() {// 前端验证账号密码不能为空if (this.account.length 0) {this.$message({message: 账号不能为空,type: warning});return;}if (this.password.length 0) {this.$message({message: 密码不能为空,type: warning});return;}//跳转到登录成功界面this.$router.push(/main);}}}
/scriptstyle.login_container {height: 100vh;margin: 0px;padding: 0px;background-image: url(assets/bg.jpg);/* 背景不重复 */background-repeat: no-repeat;/* 充满整个网页 */background-size: cover;}.login_box {width: 450px;height: 350px;background-color: #fff;border-radius: 10px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);opacity: 0.95;}.img_box {width: 130px;height: 130px;position: absolute;left: 50%;transform: translate(-50%, -50%);background-color: #fff;border-radius: 50%;padding: 5px;border: 1px solid #eee;}.img_box img {width: 100%;height: 100%;border-radius: 50%;background-color: #eee;}
/style 管理界面
templatedivel-containerel-header styletext-align: right; font-size: 12pxdiv classheader-title后台管理系统/divel-dropdowni classel-icon-setting stylemargin-right: 15px/iel-dropdown-menu slotdropdownel-dropdown-item修改密码/el-dropdown-item!-- 不能直接为某些标签添加触发事件 --el-dropdown-itemspan clicklogout()安全登出/span/el-dropdown-item/el-dropdown-menu/el-dropdownspan三木几/span/el-headerel-containerel-aside width200pxel-menu :default-openeds[1, 3] routerel-submenu index1template slottitlei classel-icon-message/i操作菜单/templateel-menu-item-groupel-menu-item index/majorlist专业管理/el-menu-itemel-menu-item index/studentlist学生管理/el-menu-item/el-menu-item-group/el-submenu/el-menu/el-asideel-mainrouter-view/router-view/el-main/el-container/el-container/div
/templatescriptexport default {name: ,data() {return {}},methods: {logout() {this.$confirm(是否确认登出?, 提示, {confirmButtonText: 确定,cancelButtonText: 取消,type: warning}).then(() { //匿名内部类this.$router.push(/login);})}}}
/scriptstyle.el-header {background-color: #00a7fa;color: #333;line-height: 60px;}.header-title {width: 300px;float: left;text-align: left;font-size: 20px;color: white;}.el-main {background-color: aliceblue;height: 100vh;}
/style 专业
templatediv专业管理/div
/templatescriptexport default {name: ,data() {return {}},methods: {}}
/scriptstyle scoped
/style
学生
templatediv学生管理/div
/templatescriptexport default {name: ,data() {return {}},methods: {}}
/scriptstyle scoped
/style
index.js文件
import Vue from vue; /* 导入 vue */
import router from vue-router; /* 导入路由 */// 导入注册组件
import Login from ../Login.vue; /* 导入其他组件 */
import Main from ../Main.vue; /* 导入其他组件 */
import StudentList from ../views/student/StudentList.vue;
import MajorList from ../views/major/MajorList.vue;Vue.use(router)/* 定义组件路由 */
var rout new router({routes: [{ //为每一个组件创建地址path: /, //默认开启网页的网址component: Login},{path: /login, //登录页面代表的网址name: Login,component: Login},{path: /main,name: Main,component: Main,children: [{path: /studentlist,name: StudentList,component: StudentList},{path: /majorlist,name: MajorList,component: MajorList}]}]
});//导出路由对象
export default rout;
