今日内容
0 前端形式
1 html5,css3,js(es5,es6):写一个一个的页面->后端嵌入模版语法->后端渲染完->返回给前端
2 ajax出现->后台发异步请求,render+ajax混合(bbs项目)
3 单用ajax(加载数据,dom渲染页面):前后端分离的雏形
4 agular:js框架,前端工程化,前端也是一个项目/工程,有些笨重,已弃用
5 react,vue:当下最火的两个前端框架(vue国人用,react外国人用)
6 移动开发(安卓,ios)+web(微信/支付宝小程序)+桌面开发(windows桌面):前端->大前端
7 一套代码在各个平台运行(前端):谷歌flutter(Dart,和java很像,
8 在vue框架的基础上,uni-app,一套代码编到10个平台
9 在不久的将来,一统天下
10 内卷化
1 vue介绍和使用
1 渐进式JavaScript:js的框架(jq),写简单的可以使用vue,写复杂的项目也可以用vue
2 MVVM:Model-View-ViewModel
-model:数据(后端给的,js接收到)
-ViewModel:中转(双向数据绑定:js中变量变了,html中数据也跟着变)
-view:视图(html+css)
3 组件化开发,单页面开发
4 版本: 1.x 2.x(用的最多) 3.x(beta版本)
5 下载
开发版本:vue.js :https://vuejs.org/js/vue.js
生产版本:
vue.min.js:https://vuejs.org/js/vue.min.js
6 前端开发:wbstorm,sublientext,vscode(python,java,go),pycharm(和webstorm一样)
7 快速使用
8 补充:解释型语言,需要解释器,js解释器集成到浏览器中了,console就等同于你在cmd敲python3交互命令行是一样的
9 nodejs:把chrome的v8引擎(解释器),安装到操作系统上
2 模版语法
1 插值语法 {{js变量或js语法}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<p>{{name}}</p>
<p>{{age}}</p>
<p>{{ll}}</p>
<p>{{obj}}</p>
{{10+20+90}}
{{10<20?'是':'否'}}
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
name: 'hello world',
age: 19,
ll: [1, 2, 3],
obj: {name: 'lqz', age: 19},
s: '<a href="http://www.baidu.com">点我看xx</a>',
},
})
</script>
</html>
3 指令
3.1 v-xx指令
1 标签属性为 v-xx的形式,是vue的指令
2 常用指令
v-html:让html渲染成页面
v-text:标签内容显示js变量对应的值
v-show:放一个布尔值,为真,标签就显示,为假标签就不显示
v-if:放一个布尔值,为真,标签就显示,为假标签就不显示
3 v-show 和v-if 区别:v-show标签还在,不显示了,v-if之间操作的dom把标签删除和加入
4 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<p v-html="s"></p>
<h1>v-text</h1>
<span v-text="name">我是span标签</span>
<span>{{name}}</span>
<hr>
<h1>v-show</h1>
<div v-show="isShow">我是div</div>
<h1>小案例,控件通过按钮控制显示和消失</h1>
<button @click="handleClick()">点我</button>
<div v-show="isShow">我是div</div>
<h1>v-if</h1>
<div v-if="isShow">我是divdivdiv</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
name: 'hello world',
age: 19,
ll: [1, 2, 3],
obj: {name: 'lqz', age: 19},
s: '<a href="http://www.baidu.com">点我看美女</a>',
isShow: true
},
methods: {
handleClick() {
this.isShow = !this.isShow
},
}
})
</script>
</html>
3.2 事件指令
1 点击事件 给标签(控件)绑定函数,点击执行函数
2 v-on:click 缩写成 @click
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<button v-on:click="handleClick">v-on:点我</button>
<button @click="handleClick2">@click点我2</button>
<button @click="handleClick2()">点我3带括号</button>
<button @click="handleClick3(100)">点我4带参数</button>
<button @click="handleClick5($event)">点我5带事件参数</button>
</div>
</body>
<script>
new Vue({
el: '#box',
data: {
},
methods: {
handleClick(){
console.log('1111')
},
handleClick2(){
console.log('22222')
},
handleClick3(a,b){
console.log(a)
console.log(b)
},
handleClick5(ev){
console.log(ev)
}
}
})
</script>
</html>
点击事件可以传出$event参数,是当前点击点击产生的一些参数.例如:
MouseEvent {isTrusted: true, screenX: 432, screenY: 225, clientX: 214, clientY: 47, …}
3.3 属性指令
1 给标签属性的value值绑定成js的变量
2 v-bind:class='js变量' 缩写成 :class='js中变量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<button @click="handleClick">点我变色</button>
<div :class="isActive?'red':'green'">
我是一个div
</div>
</div>
</body>
<script>
new Vue({
el: '#box',
data: {
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607928733686&di=7c30817eab8f708731b778398be273e3&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190403%2F6c4dcd970b4b4131bd0929f9e025b1ba.jpeg',
change:'red',
isActive:true,
},
methods: {
handleClick() {
this.isActive=!this.isActive
}
}
})
</script>
</html>
4 style和class
1 同v-bind控制sytle和class的显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<style>
.red {
background: red;
}
.green {
background: green;
}
.font {
font-size: 30px;
}
</style>
<title>Title</title>
</head>
<body>
<div id="box">
<button @click="handleClick">点击,字体变大</button>
<div :style="style_obj">
我是div控件
</div>
</div>
</body>
<script>
var vm=new Vue({
el: '#box',
data: {
style_obj:{
background:'yellow',
fontSize:'30px'
}
},
methods:{
handleClick(){
console.log('asdfasd')
this.style_obj['fontSize']='30px'
},
}
})
</script>
</html>