3.前端开发工作
| 应用 | |
|---|---|
| 官网 | BS(bootstrap)+JQ(jquey)修改+ |
| App | ui+iOS+android+H5(修改频率比较大) |
| 小程序+微信公众号 | 活动页(清明节,五一.六一.七夕)活动主题+主题色+流行语 |
| 后台项目 | (OA,商城后台,财务系统,尽调系统等等) 不对外公开,没有注册,只有登录 给公司内部人员使用 对页面没有具体的要求 表单+表格+数据统计 给公司管理层看(后台首页) |
4.问题及解决方案
1.遇到问题,找到问题原因,进行解决
2.及时的整理,(有道云笔记)
5.作业
1.当天当天清,
2.预习第二的知识/.
二.vue简介
官网:https://cn.vuejs.org/
目的:简单.快速开发
1.vue优缺点
-
优点
- 易用
已经会了 HTML、CSS、JavaScript？- 灵活
1.拥有不断繁荣的生态系统(vue route, vuex,vue服务端渲染) 2.可以使用一个库或者一个框架进行开发- 高效
1.运行大小20kB,超快虚拟 DOM 浏览器解析页面步骤: 1.解析HTML,生成HTML树, 2.解析css,生成样式树, 3.HTML和css结合, 4.生成坐标点 5.开始渲染页面 举个栗子: 如果有一个元素需要修改,浏览器执行一次以上5个步骤,如果有10个元素需要修改,此时浏览器需要执行以上10次5个步骤. 虚拟dom(virtual dom) 虚拟dom存在于内存当中,可以把它理解为一个Object(对象) 如果有需要修改的元素,把它放在虚拟DOM中进行修改,修改完成之后,虚拟DOM会自动的跟真实的DOM进行对比,将产生差异的部分,进行页面的渲染. 如果渲染页面时,采用了vue, 如果需要修改10个元素,统一放在虚拟DOM中进行执行修改,修改完成之后,将虚拟DOM和真实DOM进行对比,产生差异的部分,统一再次进行页面的渲染.这样的执行只需执行以上1次五个步骤. 优势: 1.高效. 2.浏览器只需执行一次修改. 3.js解析js比浏览器解析js快的多.最省心的优化 1.transform:对元素进行2D或者3D转换,在写样式时,需要在前边增加各种前缀:-webkit -moz -o -ms,如果使用了vue,既不需要在前边那些前缀了/.vue中做了集成的优化. 2.之前在js中操作元素: 先获取 加事件 在操作 如果你是用vue,直接操作数据即可.- 渐进式javascript框架
渐进式javascript框架(主张少)
自底向上逐层应用
装修
新房 直接装修(即可注入)==============主张少
二手房 如果你想直接入住,只能按照原二手房的情况进行(强主张)
如果你想按照自己的设计风格进行装修,再入住,需要拆掉,重新装修/.
-
- SPA(single page application)单页面应用
普通页面之间跳转: 就是真实的页面之间进行跳转(N.html)
单页面之间跳转: 始终只有一个页面(index.html)
优点:
1.用户体验好.
2.适合前后端分离
缺点:
1.不利于SEO优化.
2.首屏加载速度慢.加载时,将所有的css,js文件进行加载.
- 缺点
1.不利于SEO优化.
2.首屏加载速度慢.加载时,将所有的css,js文件进行加载.
3.不支持IE678
- 核心
数据驱动
组件化应用
2.下载及安装
- 方式一
直接下载开发版本
- 方式二
直接通过cdn引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 方式三
npm i vue --save或者 npm i vue -S
如果安装失败,表示没有进行初始化操作:
初始化:npm init ,目的产生:package.json
安装: npm i vue --save
案例一:体验vue
<!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>
<!-- 方式一 -->
<!-- <script src="./node_modules/vue/dist/vue.js"></script> -->
<!-- 方式二 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
单价:
<input type="text" v-model="price">
</div>
<div>
数量:
<input type="text" v-model="num">
</div>
<div>
总价:{{price*num}}
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
price:20,
num:2
}
})
</script>
</body>
</html>
3.基本语法
* 1.产生一个vue实例,需要new Vue()
* 2.需要传递一个jSON,{}有很多个选项: el,data,methods
* 3.不能将vue挂载到html或者body标签上
* 4.vue实例和元素节点是一一对应的关系.所以尽量使用id选择器做挂载点.
* 5.所有的css样式选择器都可做vue实例的挂载点.
* 6.vue实例只能有一个根节点
* 7.data中一般用来存放数据
<!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.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 作用域 -->
<div class="app">
<div>name的值为:{{name}}</div>
<div>num的值为:{{num}}</div>
<div>bool的值为:{{bool}}</div>
<!-- <div>str的值为:{{str}}</div>
<div>str1的值为:{{str1}}</div> -->
<div>{{fruit}}</div>
<div>{{company}}</div>
<div>{{fn()}}</div>
<div>{{fn1()}}</div>
</div>
<hr>
<!-- <div class="app">
<div>name的值为:{{name}}</div>
</div> -->
<script>
// 2.实例vue
/**
* 1.产生一个vue实例,需要new Vue()
* 2.需要传递一个jSON,{}有很多个选项: el,data,methods
* 3.不能将vue挂载到html或者body标签上
* 4.vue实例和元素节点是一一对应的关系.所以尽量使用id选择器做挂载点.
* 5.所有的css样式选择器都可做vue实例的挂载点.
* 6.vue实例只能有一个根节点
* 7.data中一般用来存放数据
*/
new Vue({
el:'.app',//element元素,将vue实例挂载到哪个元素上
data:{//数据属性:属性值
name:'vue',
num:20,
bool:true,
// str:null,
// str1:undefined,
fruit:['樱桃','桃子','西瓜','哈密瓜'],
company:{
name:'中公教育',
people:50000,
logo:'https://statics.offcn.com/offcn/pc/images/logo.png'
}
},
methods:{//方法
// 方式一:
fn:function(){
alert('弹我一下')
},
fn1(){
alert('弹弹弹')
}
}
})
</script>
</body>
</html>
三.基本指令
1.非表单元素(div p span)
| 优点 | 缺点 | 作用 | |
|---|---|---|---|
| {{}} | 书写方便,简单,快捷 | 不能解析data数据中的标签,会出现闪屏问题 | 做插值表达式 |
| v-html | 可以解析data数据中的标签 | – | 做富文本渲染 |
| v-text | 不会出现闪屏问题 | 不能解析data数据中的标签 | 做标签内容展示 |
解决闪屏问题: v-cloak
通过v-cloak指令将制定元素设置样式display:none,当vue文件加载成功之后,再将带有v-cloak元素的样式设置为:display:block,
<style>
[v-cloak]{
display:none;
}
</style>
<!-- 2.作用域 -->
<div id="app" v-cloak>
<h2>name的值为:{{name}}</h2>
<div>{{'拥有一辆:'+car}}</div>
<div>价格在:{{price.toFixed(2)}}万</div>
<div>{{score>=60 ? score: 60}}</div>
<p>{{1+1}}</p>
<div>{{str}}</div>
</div>
- {{}}
<!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.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<!-- 2.作用域 -->
<div id="app" v-cloak>
<h2>name的值为:{{name}}</h2>
<div>{{'拥有一辆:'+car}}</div>
<div>价格在:{{price.toFixed(2)}}万</div>
<div>{{score>=60 ? score: 60}}</div>
<p>{{1+1}}</p>
<div>{{str}}</div>
</div>
<script>
// 3.产生vue实例
/**
* 1.data中的数据要渲染在页面中,通过{{}}进行渲染.
* 2.{{}}可做解析变量使用.也可以写一些简单的表达式运算
*/
new Vue({
el:'#app',//挂载点
data:{
name:'赵丽颖',
car:'宝马X6',
price:60.00,
score:65,
str:'<mark>坐在宝马车里烫火锅</mark>'
}
})
</script>
</body>
</html>
- v-html
<!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.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<h2 v-html="name">哈哈</h2>
<div v-html="str"></div>
</div>
<script>
// 3.产生vue实例
/**
* 1.v-html指令:做数据解析,标签中的文本内容不会被浏览器解析,只解析v-html中的数据
* 2.v-html:一般放在标签的属性中,值为data中的属性名.
*/
new Vue({
el:'#app',//挂载点
data:{
name:'赵丽颖',
car:'宝马X6',
price:60.00,
score:65,
str:'<mark>坐在宝马车里烫火锅</mark>'
}
})
</script>
</body>
</html>
- v-text
<!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.js -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<h2 v-text="name">哈哈</h2>
<div v-text="str"></div>
</div>
<script>
// 3.产生vue实例
/**
* 1.v-html指令:做数据解析,标签中的文本内容不会被浏览器解析,只解析v-html中的数据
* 2.v-html:一般放在标签的属性中,值为data中的属性名.
*/
new Vue({
el:'#app',//挂载点
data:{
name:'赵丽颖',
car:'宝马X6',
price:60.00,
score:65,
str:'<mark>坐在宝马车里烫火锅</mark>'
}
})
</script>
</body>
</html>
2.表单元素(input textarea)
- v-model
通过v-model指令做数据的双向绑定
<!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.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<input type="text" v-model="name">
<div>{{name}}</div>
</div>
<script>
/**
* MVVM(设计模式)
* M:model 模型 V:view 视图 VM:ViewModel (视图模型)
* 模型通过viewModel控制着视图,视图也可以通过viewModel修改模型,viewModel在这里起到中间件的作用.
*/
new Vue({
el:'#app',
data:{
name:'王一博'
}
})
</script>
</body>
</html>
3.媒体元素(img)
- v-bind
v-bind:属性名="data数据中的属性名"
简写形式:
:属性名="data数据中的属性名"
<!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.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!--
1.使用v-bind:属性名="data数据中的属性名"
-->
<img v-bind:src="logo" alt="">
<hr>
<a v-bind:href="company.url" a="10" b="20">
<img v-bind:src="company.logo" v-bind:alt="company.name">
</a>
<hr>
<!-- 简写 -->
<a :href="company.url" a="10" b="20">
<img :src="company.logo" :alt="company.name">
</a>
</div>
<script>
//2.产生vue实例
new Vue({
el:'#app',
data:{
logo:'https://statics.offcn.com/offcn/pc/images/logo.png',
company:{
name:'中公教育',
logo:'https://statics.offcn.com/offcn/pc/images/logo.png',
url:'https://www.offcn.com/',
}
}
})
</script>
</body>
</html>
4.条件渲染
- v-if
v-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.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.box{
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 2.作用域 -->
<!--
v-if:条件为真,则显示元素,条件为假,不显示元素
-->
<div id="app">
<div v-if="true">春花秋月何时了</div>
<div v-if="false">往事知多少</div>
<p v-if="1">2021,扭转乾坤</p>
<p v-if="0">2021,牛气冲天</p>
<div v-if="1!==1">2021,经济形势回暖</div>
<hr>
<button @click="show()">显示</button>
<button @click="hide()">隐藏</button>
<div class="box" v-if="isShow"></div>
<hr>
<div v-if="score<=60">{{score}}</div>
<div v-else-if="score<=80">{{score}}</div>
<div v-else="score>80">{{score}}</div>
</div>
<script>
//2.产生vue实例
new Vue({
el:'#app',
data:{
isShow:false,
score:90,
},
methods:{
// 显示元素
show(){
// console.log(this.isShow);
this.isShow = true;
},
// 隐藏元素
hide(){
this.isShow = false;
}
}
})
</script>
</body>
</html>
- v-show
v-show:条件为真:显示元素,条件为假:通过样式中display为none,来隐藏元素
<!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.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!--
v-show:条件为真:显示元素,条件为假:通过样式中display为none,来隐藏元素
-->
<div v-show="true">南来北往,我们不辜负生活的期望,2021我们在路上</div>
<div v-show="false">没有理所当然的成功,也没有毫无理由的平庸,2021,你们的爆发时代将要到来</div>
</div>
<script>
//2.产生vue实例
new Vue({
el:'#app',
data:{
}
})
</script>
</body>
</html>
v-if和v-show的区别
相同点:都是控制元素的显示和隐藏.
条件为真,都是显示元素
不同之处:
条件为假: v-if:直接隐藏元素,(惰性模式)
v-show:通过样式display:none
应用:
1.如果页面一旦加载完成之后,数据几乎不会发生改变(建议使用v-if)
2.数据频繁切换时(建议使用v-show,[选项卡])
5.列表渲染
v-for="(i,index) in arr"
v-for="(i,index) of arr"
- 遍历数组
- 遍历数值
- 遍历字符串
- 遍历对象
<!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.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<!-- 没有索引的遍历 -->
<ul>
<li v-for="i in brand">{{i}}</li>
</ul>
<hr>
<!-- 带有索引的遍历 -->
<ul>
<li v-for="(i,index) in brand">{{i}}====={{index}}</li>
</ul>
<hr>
<ul>
<li v-for="(i,index) of brand">{{i}}====={{index}}</li>
</ul>
<hr>
<h3>遍历数值</h3>
<div>
<p v-for="i in 10">{{i}}</p>
</div>
<hr>
<h3>字符串</h3>
<div>
<p v-for="i in 'hello'">{{i}}</p>
</div>
</div>
<script>
//2.产生vue实例
new Vue({
el:'#app',
data:{//数据
brand:['奥迪','宝马','奔驰','玛莎拉蒂']
}
})
</script>
</body>
</html>
<!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.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.作用域 -->
<div id="app">
<ul>
<li v-for="(item,key,index) in people">{{item}}===={{key}}===={{index}}</li>
</ul>
</div>
<script>
//2.产生vue实例
new Vue({
el:'#app',
data:{//数据
people:{
name:'王运舵',
age:20,
sex:'女',
money:10,
}
}
})
</script>
</body>
</html>
四.面试题
为什么要选vue？与其它框架对比的优势和劣势？
mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？
dom节点多,动画多:jQuery
数据多:MVVM
vue等单页面应用及其优缺点
说出至少4种vue当中的指令和它的用法？
v-if 和 v-show 区别
五.作业
1.home作业
2.案例敲2遍
3255
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
