流媒体网站开发pdf,哈尔滨快速建站模板,雄安网站建设,网站主题制作VUE vue是一套前端框架#xff0c;免除原生的js的DOM操作#xff0c;简化书写 基于MVVM#xff08;model-view-viewmodel#xff09;思想#xff0c;实现数据的双向绑定#xff0c;将编程的关注放在数据上。 什么是框架#xff1a; 框架相当于一个半成品#xff0c;是一…VUE vue是一套前端框架免除原生的js的DOM操作简化书写 基于MVVMmodel-view-viewmodel思想实现数据的双向绑定将编程的关注放在数据上。 什么是框架 框架相当于一个半成品是一套高效的代码模板基于框架开发更加的高效 VUE数据绑定模型 model层中存在着对数据的处理view说白了就是html界面两者通过桥梁viewmodel进行双向绑定数据发生变化页面也会随之发生变化相同页面发生变化数据同样会发生变化 数据绑定
htmlscript src ../js/vue.js/script
/html
bodydiv idappinput typetext v-modelmessage{{message}}/divscriptnew Vue({el:#app,data:{message:hello }})/script
/bodydate中标定的是数据模型而el相当于id选择器div中id与#后的id相等表名此处有vue接管v-model后message相当于数据绑定{{}}是差值表达式是将数据可视化到html界面中
差值表达式 形式{{表达式}} 表达式内容可以是变量三元运算符函数调用算数运算
vue常用指令 v-bind 绑定href
bodydiv idappa v-bind:hrefURL连接 /av-bind可以简化为herf/divscriptnew Vue({el:#app,data:{URL:http://www.baidu.com}})/scriptv-model用于表单元素的数据双向绑定 注意 通过v-bind与v-model绑定的变量必须在数据模型中声明
v-on v-on click可以简写为click div idappinput typebutton value按钮 v-on:clickhandle() /divscriptnew Vue({el:#app,data:{URL:http://www.baidu.com}methods:{handle:function(){alert(点击以下); }},})/scriptv-if 条件渲染根据条件判断语句进行页面条件渲染
年龄{{age}},经判定为
span v-ifage35年轻人/span
span v-else-ifage35age60中年人/span
span v-else老年人/spanv-show 同样通过判断进行条件渲染
年龄{{age}}经判定为
span v-showage35年轻人/spanv-if与v-show的区别 v-if通过条件进行渲染如果条件为false则不进行渲染而v-show是都进行渲染如果条件为false时属性中的display属性将会不显示该渲染内容
v-for 列表渲染遍历容器中的元素或者对象的属性
div v-foraddr in addrs{{addr}}/div
div v-for(addr,index) in addrs{{index1}}:{{addr}}/div数据模型为
data{
addrs:[北京,上海,广州,深圳]
}vue生命周期 生命周期指一个对象从创建到销毁的整个过程 生命周期的八个阶段每触发一个生命周期事件会自动执行一个生命周期方法 生命周期图
mounted 挂载完成 常用来向服务端请求数据
script
new vue(){
el: #app,
data:{},
mounted(){
console.log(挂载完成请求数据 )
}
}
/scriptajax 异步的js和xml 作用 数据交换通过ajax可以给服务器发送请求并获取服务器响应的数据 异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术
同步与异步的区别 同步需要等待服务端进行响应在响应期间前端处于等待状态 异步操作在服务器端进行处理的时候前端还能够执行其他操作 原生的ajax请求
Function loadDoc()function loadDoc() {
//创建对象var xhttp new XMLHttpRequest();//获取服务器响应数据xhttp.onreadystatechange function() {if (this.readyState 4 this.status 200) {document.getElementById(demo).innerHTML this.responseText;}};发送异步请求xhttp.open(GET, ajax_info.txt, true);xhttp.send();
} 创建一个XMLHttpRequest对象用来交互数据当对象中的状态发生变化的时候调用函数进行判断如果符合条件将以字符串的形式返回到html当中
axios 对原生的ajax进行了封装简化书写快速开发 axios官方文档: https://www.axios-http.cn/ 当使用axios时需要引入axios文件
script srcjs/axios-0.18.0.js/script使用axios发送请求并获取响应数据
axios({
method:get,
url:...
}).then((result){
console.log(result.data);
});为了方便还可以通过别名来进行操作
axios.get(...url...).then((result){
console.log(result.data);
});基于vue的ajax动态加载展示 数据的准备http://yapi.smart-xwork.cn/mock/169327/emp/list 在页面加载后自动发送异步请求加载数据渲染展示界面
bodydiv idapptable border1 cellspacing0 width60%trth编号/thth姓名/thth图像/thth性别/thth职位/thth入职日期/thth最后的操作/th/trtr aligncenter v-for(emp,index) in empstd{{index}}/tdtd{{emp.name}}/tdtdimg v-bind:srcemp.image width70px height50px/tdtdspan v-ifemp.gender1男/spanspan v-ifemp.gender2女/span/tdtd{{emp.job}}/tdtd{{emp.entrydate}}/tdtd{{emp.updatetime}}/td/tr/table/divscriptnew Vue({el:#app,data:{emps:[]},mounted() { //发送异步请求加载数据axios.get(http://yapi.smart-xwork.cn/mock/169327/emp/list).then(result{this.empsresult.data.data;})},});/script
/body前后端分离开发 前后端由两个团队进行分别开发前端向后端发送请求后端响应前端数据为了便于统一需要制定统一的开发规范开发贵伐统一写在文档之中 文档称为接口文档这里的接口指的是业务功能 前端开发人员与后端开发人员共同查阅接口文档前端开发人员通过接口文档将参数传递给后端后端开发人员将接收参数并将数据传回给前端开发人员 接口文档的维护 接口文档分为线上维护和线下维护在线方式通过一些在线的接口文档管理平台进行维护离线的方式是线下通过办公软件进行维护 接口文档通过项目经理通过需求分析以及页面文档进行提供 一段功能的开发流程 首先通过需求分析然后定义接口API接口文档然后通过前后端并行开发通过前后端测试最后通过前后端的联调测试
Yapi 高效易用的api管理平台旨在为开发产品测试人员提供更优雅的接口管理服务 地址https://yapi.pro/login 功能API接口管理mock服务模拟测试数据用于前端功能测试 如何使用这个平台 第一步添加项目
第二步添加接口分类 添加分类有助于不同的功能模块的管理
第三步添加接口 在添加的分类上创建接口
前端工程化 指在企业级的前端项目开发中把前端开发所需的工具技术流程经验等进行规范化标准化 而在使用vue进行开发的过程中如何完成前端工程化采用vue脚手架vue-cli
vue-cli 是官方提供的一个脚手架用于快速生成一个vue项目模板 cli脚手架功能
统一的目录结构本地调试热部署应用程序变动不需要再次运行就能加载程序单元测试集成打包上线 依赖环境Modejs 脚手架的使用首先需要先下载Node.js再下载脚手架
通过脚手架创建vue项目 两种方式 命令行vue create vue-project01; 图形化界面 vue ui 输入图形化界面进行创建点击创建项目 输入项目名包管理器作者使用的是npm 进行手动设置选择手动 勾选Router是项目路由
选择版本作者这里使用的是vue2vue3版本将会在后续作品中推出 检测方式选择默认第一项进行创建 通过VSCode来打开项目
vue项目-目录结构 通过脚手架创建的项目有标准的目录结构 node.models用来存放整个项目的依赖包 public:存放项目的静态文件 src存放项目的源代码 package.json:存放项目的基本信息以及所需要的资源以及资源的版本信息 vue.config.js保存vue的配置的文件如代理端口的配置
在src目录下 vue项目启动方式 第一种直接在VSCode中进行操作 第二种在当前项目目录下终端中输入npm run serve 进行启动 vue配置端口号 在vue.config.js文件当中添加devserver对象
devserver:{
port:7000,
}完成配置
如何停掉当前正在执行的处理按键ctrlc进行停掉处理
Vue项目的开发流程
如果没有进行开发初始启动项目看到的页面时默认页面index.html,在index文件当中默认引入了入口文件main.js 在main入口文件当中存在关键字import意思为引入模块 举例
import App from ./App.vue意思是将根组件App.vue导入到main文件中并起名为App相似的还有export将本文件导出为模块化便于其他组件导入 在main.js文件中vue创建确定一个路由此处(在es6中属性名与属性值相同可以忽略不写)确定一个函数remder将根组件App中的视图赋予给一个DOM对象并挂在到#app上
Vue的组件以.vue结尾每个组件由三个部分组成template,script,style template模板部分用来生成html代码 scriptjs代码部分 style css代码部分
Vue组件库Element 组件库是饿了么团队研发的为开发者准备的基于Vue 2.0 的桌面端组件库 组件组成网页的各个部分例如超链接按钮图片表格表单分页条等 地址https://element.eleme.cn/#/zh-CNListener
入门 安装ElementUI组件库在当前工程的目录下在命令行执行指令
npm install element-ui2.15.3下载之后会存放在node_ modules文件当中 在vue项目中引入ElementUI组件库 在main.js入口文件中输入
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css
Vue.use(ElementUI);在views包下创建一个新的.vue文件在Element官网上进行代码复制 vue项目启动后界面显示的是默认的根组件文件 如果要显示其他需要在根组件的div中引入
element-viewelement-view
系统自动会在下方引入
import ElementView from ./views/element/ElementView.vue
在default中输入components:{ElementView},引入文件Element常见组件 表格组件 分页组件当表格数据量过大时配合分页组件使用 对话框组件 案例 根据页面原型完成员工管理的开发并通过axios完成数据异步加载 服务端数据获取地址: 数据地址 步骤 创建页面完成页面的整体布局规划 布局中各个部分的组件实现 列表数据的异步加载并渲染展示
在Vue项目中使用Axios 在项目中安装axiosnpm install axios; 需要使用axios时导入axiosimport axios from ‘axios’;
在向表格中展示数据的时候因为数据与实际展现数据不相符使用插槽
Vue路由 URL中的hash#号与组件之间的对应关系 Vue Router是Vue的官方路由 组成
VueRouter 路由器类根据路由请求在路由视图中动态渲染选中的组件 router-link请求链接组件浏览器会解析成a(对路由中的路由表进行访问) router-view动态视图组件用来渲染展示与路由路径对应的组件 安装路由
npm install vue-router3.5.1定义路由 在router目录结构下的index.js文件中定义路由 const routes [{path: /emp,name: emp,component:() import(../views/tits/EmpView.vue)},{path: /element,name: element,component: () import(../views/ElementView.vue)}
]
在其中配置路由信息将路由与对应的导航栏的组件绑定 el-menu-item index1-1router-link to/emp员工管理/router-link/el-menu-itemel-menu-item index1-2router-link to/element部门管理/router-link/el-menu-itemVue打包部署
将前端打包部署到前端服务器上 首先进行打包 点击VSCode左下角npm脚本的第二个build进行项目打包会打包成一个dist文件 打包生成的dist文件 打包之后再将文件部署到Nginx文件当中 Nginx是一款轻量级的web服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的应用 官网Nginx官网 下好的压缩包需要解压在一个没有中文以及空格的目录下 conf表示配置文件目录 html表示静态资源文件目录 logs表示日志文件目录 temp表示临时文件目录 部署将打包好的dist目录下的文件复制到nginx安装目录的html目录下 然后双击启动nginx默认占用80端口号 如果出现错误可能80端口号被占用 查询占用信息 查询到占用80端口的进程id为4176可以在资源管理器中进行id进程的查询 可以更改nginx使用的端口 在conf文件中进入nginx.conf更改端口
