前端发展历史
# 1 html(5),css(3),javascript=(ECMA:5，补充es6语法,最新:13，bom:浏览器对象,dom:文档对象)--》编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法(dtl:django的模版语法 xx.html ) -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
-剪头函数，模块导入，let
-python ：3.11----》3.8 , 3.9
-java ：java19，公司大量的用 java8 1.8
-模版语法：django：模版语法， index.html ---》写了python语法 {% %}---》模版语法
-模版语法写好----》python解释器负责把python语法解析完转成 纯粹的html，css，js
# 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
# 3 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
# 4 Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）：笨重，越来越少的人用了
# 5 React、Vue框架：当下最火的2个前端框架（Vue：国人写的，国人喜欢用，中小厂，全栈工程师，React：外国人喜欢用，大厂喜欢用）
# 6 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
# 7 可不可以一套编码，多端运行 ：一套代码在各个平台运行（大前端）：谷歌Flutter平台（Dart语言：和Java很像）可以运行在IOS、Android、PC端，桌面端支持不好---》部分公司在用，坑比较多
# 8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台----》学习vue的性价比很高
# 9 在不久的将来 ，前端框架可能会一统天下
# ts和es：
typescript：微软出的脚本语言，强类型，微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成
ecma：标准---》js语言，弱类型
typescript是js的超集
写前端可以使用js，也可以使用ts，ts兼容js的
js：历史遗留了很多坑
# 我感觉会
html,css,js--->PC端(网页)，移动端（安卓，ios）,小程序(微信官方:标签是html5内容)
vue介绍
# Vue (读音 /vjuː/，类似于 view)--->1 js框架(jquery)--->2 渐进式框架(单个页面使用vue，整个项目都使用vue)
是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
# 官网：https://cn.vuejs.org/
# Vue 版本问题：两个版本（些许差距，基础都是一样的）
-2.x版本：老版本
-3.x版本：完整支持ts语法,2020年---》
-vue： 正处于转型期，大量公司还在用vue2，少量公司在用vue3
# 特点
-通过 HTML、CSS、JavaScript构建应用--》要有这些东西基础
-不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩
-20kB min+gzip 运行大小 超快虚拟 DOM 最省心的优化
# M-V-VM思想
-django:MTV mvc架构
-MVP：移动端会使用
-Vue：M-V-VM 架构---》js的变量---》写到dom(文档)中
-Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中，js里面有变量
-View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
-ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
-以后不需要咱们操作dom了---》因为有vm这层---》jquery选择器，元生js 完全用不到了---》jq已经完成自己的历史使命了，慢慢退出舞台了
# 组件化开发、单页面开发
-组件化开发：把某些可能会多次使用的 htm，css，js，写成单独的，以后直接引入即可
-单页面开发：如果是vue项目，整个项目其实就一个 index.html 页面
-以后都是只有一个index.html 看到的页面变化，不是多个html页面在变化，而是组件的替换
vue的快速使用
# 补充：工欲善其事必先利其器---》咱们要开发vue，需要有一个比较趁手 集成开发工具(IDE)
-vscode:微软出的，不仅可以写前端，还可以写python,go..... 免费的
-Jetbrains捷克的公司公司出的：全家桶：pycharm，goland，IDEA(java)，phpstorm，webstorm(前端)。。。
-收费，挺贵 全家桶的授权：599刀一年 单版本授权 199刀 一年
-破解：pycharm本身跟webstorm师出同门
-直接使用Pycharm---》vue的插件，就可以写vue了----》讲课用，不需要再多下一个编辑器
-直接下载webstorm--》破解方案跟pycharm完全一样
# 使用Pycharm开发---》下载后有vue代码提示，不下也能开发vue
-新建一个项目（python项目也可以）
-装一个vue的插件：setting中搜plugins---》vue---》安装---》ok---》apply
# Vue 就是一个js框架----》把源代码下载下来(cdn)，引入到页面中去
-先用vue2的讲：基础内容是一样的
-拿到vue2的源码，放在咱们工程中--》js文件夹下vue.js
-渐进式框架---》在一个html中使用vue---》跟之前使用jq是一模一样
第一个vue项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 引入vue,跟之前引入jquery是一样的-->
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<!--以后在这div内部，就可以写vue的语法了,插值语法，把变量放在{{}}内，它就会把变量渲染在这-->
<h1>{{name}}</h1>
</div>
</body>
<script>
// 写js代码,new 得到一个vue对象,传入配置项，传入一个对象，有key，有value
new Vue({
el: '#app', // 根据id 找到div，这个div就被vue托管了，以后div中就可以写vue的语法了
data: {
name: 'lqz' // 定义了一个变量 name
}
})
</script>
</html>
插值语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<h1>渲染变量</h1>
<p>我的名字:{{name}}</p>
<p>我的年龄:{{age}}</p>
<p>数组:{{l}}</p>
<p>数组取值:{{l[1]}}</p>
<p>对象:{{obj}}</p>
<p>对象取值:{{obj['age']}}</p>
<p>对象取值:{{obj.name}}</p>
<p>标签：{{s}}</p>
<h1>渲染函数--后面讲</h1>
<h1>渲染表达式：三目运算符,一定不要写太长</h1>
<p>{{age > 20 ? '男人' : '男孩'}}</p>
<p>{{age == 19}}</p>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
name: 'lqz',
age: 19,
l: [1, 2, 3], // js中叫数组，python中叫列表
obj: {name: '彭于晏', age: 40}, // js中叫对象，python中叫字典 对象取值不加引号表示变量
s: '<input type="text">',
t: 10 > 9 ? '大于' : '小于' // 跟python中的三元表达式是一样的 t= 条件 ? '符合条件':'不符合'
// t:'大于'
}
})
</script>
</html>
文本指令
# v-html:把变量的内容当html渲染到标签中去（字符串是标签，会完整渲染）
# v-text:把变量内容当字符串写到到标签中（字符串是标签，不会渲染成标签），如果原来标签有内容，会去掉
-可以完成跟 {{}} 一样的功能，但是还是不一样的
# v-show：只能跟 true 或 false 或 表达式运算结果是布尔类型，控制标签的显示与否
-
# v-if ：只能跟 true 或 false 或 表达式运算结果是布尔类型，控制标签的显示与否
# vue中面试题：v-if和v-show区别是什么？
-v-if:如果是false，不显示，标签也不存在（删除和添加标签，效率低）
-v-show,如果是false，不显示，但是标签存在，只是通过样式 dispaly=none控制的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<h1>v-html</h1>
<p>{{s}}</p>
<p v-html="s"></p>
<div v-html="s"></div>
<h1>v-test</h1>
<p v-text="s">美女</p>
<h1>v-show和v-if</h1>
<div v-show="b2">美女</div>
<div v-if="b1">帅哥</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
s: '<input type="text">',
b1: true,
b2: false
}
})
</script>
</html>
事件指令
# v-xx 放在标签中就是指令，指令就能完成不同的功能
# v-on:事件名='函数' ： 给这个标签绑定一个事件，当触发这个事件，就会执行函数
-事件：click，blur，dbclick。。。很多
-函数 必须写在methods 对象内，可以使用es6的对象写法
# 重点：
v-on:事件名='函数' 可以简写成 @事件名='函数'（以后都用它）
# 补充
-html：标签
-css：样式（好看） bootstrap是css样式，element-ui
-js：动起来 jquery是js框架，vue是js框架，react
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<!-- <button class="btn btn-danger" v-on:click="handleClick">点我看美女</button>-->
<button class="btn btn-danger" @click="handleClick">点我看美女2</button>
<br>
<!-- 写个按钮，一点击就显示美女图片，再点击一次就不显示了-->
<button @click="handleShow">看我美女显示和消失</button>
<br>
<!-- <img v-show="zs" src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" height="500px" width="500px">-->
<img v-if="zs" src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" height="500px" width="500px">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
zs:true,
}, // 变量写在这里
methods: {
// 方式一：es5的语法
// handleClick: function () {
// alert('美女')
// }
// 方式二：常用的，es6的语法
handleClick() {
alert('美女')
},
handleShow(){
// 修改show的值为 !show
// this代指的是vm对象，Vue对象
this.zs=!this.zs
}
}, // 函数写在这里
})
// es6 语法的对象写法
// var obj = {'name': 'lqz', 'age': 19}
// var obj1 = {name: 'lqz', age: 19}
//
// name = 'lqz'
// age = 19
// var onj2 = {name, age} // 等同于{name: 'lqz', age: 19} es6 对象写法
</script>
</html>
条件渲染
# 指令：实现符合某个条件，就显示某个标签
v-if v-else-if v-else
#
数据双向绑定
# input ：text，password，select...
# text文本类型的双向数据绑定
-使用 :value='变量' 单向数据绑定，页面变化，变量不会跟着变---》一般不用
-使用 v-model='变量' 双向数据绑定，页面变化，变量变化都会相互影响
# 使用
<input type="text" v-model="v">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<title>标题</title>
</head>
<body>
<div id="app">
<h1>v-model 只针对于input</h1>
请输入内容：<input type="text" v-model="v"> ---->{{v}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
v: '美女'
},
})
</script>
</html>
事件处理
# 事件：click，dbclick blur， input， change。。。
单击 双击 失去焦点 输入内容 发生变化
# input框会有blur， input， change 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<h1>失去焦点事件blur</h1>
<!-- 请输入名字：<input type="text" v-model="name" @blur="handleBlur">-->
<h1>change事件：数据发生变化才会触发</h1>
<!-- 请输入名字：<input type="text" v-model="name" @change="handleChange">-->
<h1>input事件：只要输入内容会触发</h1>
请输入名字：<input type="text" v-model="name" @input="handleInput">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '彭于晏'
},
methods: {
handleBlur() {
alert(this.name)
},
handleChange() {
console.log(this.name) // 跟python中print一样
},
handleInput(){
console.log(this.name)
}
}
})
</script>
</html>
过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<input type="text" v-model="search" @input="handleInput">
<ul>
<li v-for="item in newdataList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf', 'csrffe'],
newdataList: ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf', 'csrffe']
},
methods: {
handleInput() {
// this 指向问题
// 这个位置this是vue对象
// var _this = this
// this.dataList = this.dataList.filter(function (item) {
// console.log('----', _this) // this 还是vue对象吗？是浏览器对象
// return item.indexOf(_this.search) > -1
// })
// 使用es6的语法解决
this.newdataList = this.dataList.filter(item => {
// console.log('----', this) // 如果使用剪头函数，this还是vue（剪头函数没有自己的this）
return item.indexOf(this.search) > -1
})
}
}
})
// 补充：数组的内置方法，filter,传匿名函数进去，匿名函数如果返回true这个就保留，如果返回false，就不保留
// var search = 'a'
// var l = ['a', 'at', 'atom', 'atommon', 'be', 'beyond', 'cs', 'csrf', 'csrffe']
// var ll = l.filter(function (item) {
// return item.indexOf(search) > -1
// })
// console.log(ll)
// 补充：字符串有个indexOf，返回索引，如果大于-1，表示字字符串在当前字符串中
// var s='lqz is handsome'
// var res=s.indexOf('zoo') // 如果me在字符串中，就返回me在字符串的索引位置
// console.log(res)
// es6 的箭头函数
// 传统写法
// var a=function (name,age){
// console.log(name)
// }
// a("lxx")
// //es6 箭头函数 匿名函数的另一种写法
// var a= (name,age) =>{
// console.log(name)
// }
</script>
</html>
事件修饰符
# 放在事件后的
@click.once='函数'
.stop 只处理自己的事件，不再冒泡给父标签（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面）
按键修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="./js/vue.js"></script>
<title>标题</title>
</head>
<body>
<div id="app">
<h1>按键修饰符</h1>
<!-- <input type="text" @keyup="handleKeyUp($event)">-->
<input type="text" @keyup.enter="handleKeyUp($event)">
<input type="text" @keyup.esc="handleKeyUp($event)">
<input type="text" @keyup.="handleKeyUp($event)">
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods:{
handleKeyUp(event){
console.log('sdasfd')
if(event.code=='Enter') {
console.log('enter键被抬起了，开始搜索')
}
}
}
})
</script>
</html>
评论