前端发展
1.前端三剑客-HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13):编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
-ES--->ECMA标准:规定语法
-JavaScript=ECMA+bom+dom:语法+如何操作浏览器对象+如何操作文档对象
2.Ajax的出现 -> 后台发送异步请求,Render+Ajax混合
-单用Ajax(加载数据,DOM渲染页面):前后端分离的雏形
3.Angular框架的出现(1个JS框架):出现了“前端工程化”的概念(前端也是1个工程、1个项目)
4.React、Vue框架:当下热门前端框架(Vue:国内比较常用,React:国外比较常用)
5.移动开发(Android+IOS)+Wed(Wed+微信小程序+支付宝小程序)+桌面开发(Windows桌面),都称为大前端
6.一套代码在各平台运行(大前端):谷歌Flutter(Dart语言:和Java很像),可以运行在IOS、Android、PC端
7.在Vue框架的基础性上开发的uni-app:一套编码,编到10个平台
'''
-Vue:2.x、3.x
-如果用3.x,可以不用js
ts:typescript
less
-主流:vue,react,uni-app
-ts:typescript
'''
Vue简介
1.Vue是一套用于构建用户界面的渐进式框架
'渐进式:可以只有一部分使用,也可以这个工程都使用它'
2.下载使用
2.1在浏览器中打开,在复制下来,保存到js文件中
-https://cdn.jsdelivr.net/npm/vue/dist/vue.js
-使用
<script src="js/vue.js"></script>
3.开发Vue需要一款编辑器
-vscode:微软开发,轻量级编辑器,免费使用
-vim:要装插件,但要装的插件很多很麻烦,也可以开发代码
-Jetbrains开发的编辑器:IDEA(java)、Pycharm、Goland、phpStrom、webstorm,都是收费的编辑器,而且非常吃内存(都是java开发)
-AndroidStadio:免费使用,是谷歌买了授权
4.M-V-VM思想
MTV:django
MVC后端框架一般基于这种架构
MVVM:基于前端开发的架构模式,是一种事件驱动编程方式
MVP:移动端
5.组件化开发、单页面开发
1.组件化开发:有自己独立的html、css、js,每一个组件的内容都可以被替换和复用
2.单页面开发(SPA):只有一个html页面,结合组件化开发来替换页面中的内容,页面的切换只是组件的替换,页面依旧只有一个
Vue使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>vue使用</h1>
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
</div>
</body>
<script>
// 引入vue后,会有vue的构造函数
var vm = new Vue({
// 页面中id为app的div被vue托管了,在div中可以写vue的语法、指令
el: '#app',
data: {
name: 'barry',
age: 18,
},
})
</script>
</html>
插值语法
1.被vue托管的标签中可以写 {{}},中括号中可以写:变量、js简单的表达式、函数
2.三目运算符相当于三元表达式
-var a = 10 > 9 ? '大于' : '小于'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>vue插值渲染变量</h1>
<p>名字:{{name}}</p>
<p>年龄:{{age}}</p>
<p>爱好:{{hobby}}</p>
<p>第1个爱好:{{hobby[1]}}</p>
<p>wife:{{wife}}</p>
<p>wife的名字:{{wife['name']}}</p>
<p>wife的年龄:{{wife.age}}</p>
<p>标签:{{a}}</p>
<p>{{10 > 9 ? '大于' : '小于'}}</p>
<p>{{age+1}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'barry',
age: 18,
hobby: ['刺客信条', '假面骑士','哈利波特'],
wife: {name:'冲田总司', age: 26},
a: '<a href="https://www.baibu.com">点我</a>'
},
})
</script>
</html>
文本指令
1.写在标签上,以 v-xx 开头的都是vue的指令
2.文本指令
2.1v-text:把变量渲染到标签中,如果之前有数据,覆盖掉
2.2v-html:如果是标签字符串,会把标签渲染到标签内
2.3v-show:控制标签的显示与隐藏,但是它是通过style的display控制的:style="display: none;"
2.4v-if:控制标签的显示与隐藏,但是它是通过dom的增加和删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>文本指令 v-text</h1>
<p v-text="name">kevin</p>
<h1>文本指令 v-html</h1>
<span v-html="a"></span>
<h1>文本指令 v-show</h1>
<img v-show="b" src="https://img0.baidu.com/it/u=4230177129,3008333640&fm=253&fmt=auto&app=138&f=JPEG?w=794&h=500"
alt="">
<h1>文本指令 v-if</h1>
<div v-if="b1">
<a href="https://www.baibu.com">点我</a>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'barry',
a: '<a href="https://www.baibu.com">点我</a>',
b: true,
b1: true,
},
})
</script>
</html>
事件指令
1.放在别的标签上的-->v-on:事件名='函数'--简写-->@事件名='函数'
-事件名可以写:click、dbclick、input标签:blur、input、change
2.es6对象写法
var name = 'barry'
var age = 18
var obj = {name, age}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件指令</h1>
<button v-on:click="handleShow">显示消失</button>
<div v-if="show">
<img src="https://img2.baidu.com/it/u=3350501151,3749696733&fm=253&fmt=auto&app=138&f=JPEG?w=856&h=500" alt="">
</div>
<h1>事件指令函数带参数</h1>
<button @click="handleShow0">函数需要参数,但是没传</button>
<button @click="handleShow1('barry')">函数需要参数,传了参数</button>
<button @click="handleShow2('barry')">函数需要2参数,但是只传了1个</button>
<button @click="handleShow3($event, 'barry')">函数需要2参数,一个是事件,一个是字符串</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
show: true,
},
methods: {
handleShow() {
// this就是vm对象,!是取反的意思
this.show = !this.show
},
// 函数需要参数,但是没传,默认把event事件传入
handleShow0(a) {
console.log(a)
},
// 函数需要参数,传了参数,但只能传数字、字符串、布尔值、变量
handleShow1(a) {
console.log(a)
},
// 函数需要2参数,但是只传了1个,不会报错,没有传值的参数是undefined
handleShow2(a, b) {
console.log(a)
console.log(b)
},
// 函数需要2参数,一个是事件,一个是字符串
handleShow3(a, b) {
console.log(a)
console.log(b)
},
},
})
</script>
</html>
属性指令
1.写在标签上的name、class、href、src...属性
v-bind:属性名='变量'
-简写
:属性名='变量'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>属性指令</h1>
<button @click="handleClick">看好看的</button>
<br>
<img v-bind:src="url" alt="">
<hr>
<button @click="handleChange">点我可以换</button>
<br>
<img :src="url1" alt="">
<br>
<img :src="url2" alt="">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// 设置默认图片
url: 'https://img2.baidu.com/it/u=3350501151,3749696733&fm=253&fmt=auto&app=138&f=JPEG?w=856&h=500',
url1: 'https://img2.baidu.com/it/u=3793230529,1388751277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=790',
url2: 'https://img1.baidu.com/it/u=1366960436,3872329760&fm=253&fmt=auto&app=138&f=JPG?w=333&h=500',
// 用于切换的图片
imgList: ['https://img2.baidu.com/it/u=2807426562,2729556782&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=500',
'https://img2.baidu.com/it/u=3392649738,919099101&fm=253&fmt=auto&app=138&f=JPEG?w=293&h=500',
'https://img2.baidu.com/it/u=4086746759,3805558511&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=500',
'https://img2.baidu.com/it/u=3711808891,422502660&fm=253&fmt=auto&app=138&f=JPG?w=708&h=500',
'https://img2.baidu.com/it/u=1540773619,19016539&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
]
},
methods: {
// 点击修改图片
handleClick() {
this.url = 'https://img0.baidu.com/it/u=3600534983,4092696431&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=707'
},
handleChange() {
// floor:只取整数部分
// Math.random()可以生成0-1之间的数字
// 这个小数乘以数组的长度在取整
var i = Math.floor(Math.random() * this.imgList.length)
//
this.url1 = this.imgList[i]
},
},
mounted(){
// 页面加载完后开启定时器,每隔一秒执行函数,函数内部变量在变
setInterval(()=>{
var i = Math.floor(Math.random() * this.imgList.length)
this.url2 = this.imgList[i]
},1000)
}
})
</script>
</html>