1.1 前端的发展史
# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
-javascript=ECMAScript(5,6,13) + Dom + Bom
# 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
-异步JavaScript和XML
-咱们学的是jq的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个平台
# 9 在不久的将来 ，前端框架可能会一统天下
2 Vue介绍 和 基本使用
4 插值语法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"</script></head>
<body>
<div id="app">
<p>字符串：{{name}}</p>
<p>数字：{{age}}</p>
<p>数组：{{hobby}}--->{{hobby[1]}}</p>
<p>对象：{{wife}}--->{{wife['name']}}---->{{wife.age}}</p>
<p>标签形式字符串：{{a}}--->说明不存在xss攻击</p>
<p>-----插值语法，还可以放，简单表达式和函数(后面了)-----</p>
<p>简单表达是：{{1 + 1}}</p>
<p>三目运算符【条件?符合条件执行这个:不符合条件】：{{10>2?'正确':'不正确'}}</p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz', age: 19,
hobby: ['篮球', '足球', 'spa'], // js 就叫数组
wife: {name: '刘亦菲', age: 38}, // js 中叫对象
a: '<a href="http://www.baidu.com">点我看美女</a>' // 标签形式字符串
}
})
</script>
</html>
4 文本指令
# pycharm需要安装插件，才能有提示
# 指令系统： 写在标签上，v-开头的 标签，称之为指令，每个指令都有特殊用途
v-指令名='写原来插值能写的东西'
v-指令名='name' # 变量
# v-text:把变量渲染在标签内部
# v-html：把标签类型的字符串直接渲染成标签
# v-if: 控制标签显示与否，直接删除或加入标签
# v-show:控制标签显示与否，通过样式的display: none;控制显示与否
<div id="app">
文本指令之 v-text，把变量渲染在标签内部：<span v-text="a"></span>
<br> 插值语法：<span>{{a}}</span>
<br>文本指令之v-html,把标签类型的字符串直接渲染成标签：<span v-html="a"></span>
<h2>v-if的使用,只能写条件，或布尔类型的变量</h2>
<div v-if="is_show">我是个div---v-if的使用</div>
<br>
<h2>v-show的使用</h2>
<div v-show="is_show"> 我是个div---v-show的使用</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
a: '<a href="http://www.baidu.com">点我看美女</a>', // 标签形式字符串
is_show: false,
} })
</script>
5 事件指令
# 用的最多的就是点击事件，给某个标签绑定一个点击事件，当点击一下，就执行某个函数
# 使用方式
v-on:事件名='函数名' 重点：可以简写成：@事件='函数名'
0.1 vm对象：
// 1 写在data或method中的属性或方法，从vm中直接可以 . 出来：vm.name
// 2 methods的函数中，如果想使用data或methods中的属性，直接this.名字 就可以了
0.2 函数传参:触发函数，可以传参数
<h1>函数，可以多传参数，也可也少传参数，都不会报错</h1>
<button @click="handleClick('lqz')">点我</button>
<h1>事件对象,调用函数，不传参数，会把当前事件对象，传入,可以不接受，也可以接受</h1>
<button @click="handleClick2">点我2</button><br>
<button @click="handleClick3('lqz',$event)">点我3</button>
handleClick(name, age) {console.log(name, age)},
handleClick2(event) {console.log(event)},
handleClick3(name, event) {
console.log(name)
console.log(event)
}
6属性指令使用：v-bind:src="url"， :class= :style=
案例
<div id="app">
<button @click="handleStart">点我开始选</button> <hr> <img :src="url" alt="" @click="handleStop">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
url: 'https://img2.woyaogexing.com/2023/06/01/11de6aa55c3ccc0fc35ba1ab6e4ae2b5.jpg',
img_list: [ 'http://pic.imeitou.com/uploads/allimg/230530/10-2305301A538.jpg','http://pic.imeitou.com/uploads/allimg/230530/10-2305301A539.jpg','http://pic.imeitou.com/uploads/allimg/230530/10-2305301A540.jpg',],
t: null
},
methods: {
handleStart() {
//定时器---》每隔 某个事件 做一件事
var _this = this
this.t = setInterval(function () {
// url 随机从列表中取值，赋值给url
// Math.random() 生成0--1之间的小数，Math.floor 向下取整
var res = Math.floor((Math.random() * _this.img_list.length))
_this.url = _this.img_list[res]
console.log(_this.url)
}, 1000)
},
handleStop() {
// 停止定时器
clearInterval(this.t)
this.t = null
} } })
</script>
style和class
<style>
.size { font-size: 60px; }
.red { background-color: red; }
.yellow { background-color: yellow; }
</style>
<div id="app">
<h1>class 的使用：字符串，数组，对象</h1>
<button @click="handleClick">点我变样式</button><br>
<div :class="class_obj">我是div </div>
<h1>style 的使用：字符串，数组，对象</h1><br>
<div :style="style_obj">我是div</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
// class 推荐使用 数组方式
// class 绑定的变量，类型可以是 字符串，数组，对象
// class_str: 'size', // vm.class_str='size red'
// class_arr: ['red'], // vm.class_arr.push('size')，给该变量，追加值，class变化，页面会发生变化
// class_obj: {size: true, red: false} // 对象的用法，必须先提前设置，后期通过修改true或false控制类
class_obj: {size: true},// 但是不能往对象中放之前不存在的值，放不存在的值，没有响应式
// style 推荐使用 对象形式
// style_str:'font-size: 80px;background-color: green', // vm.style_str='background-color: red'
// style_arr: [{'font-size': '60px'}] // vm.style_arr.push({'background-color':'red'})
// style_obj: {'font-size': '60px', 'background-color': 'green'},
style_obj: {fontSize: '60px', backgroundColor: 'green'}, // 省略key值的引号后，要变成驼峰形式
},
methods: {
handleClick() {
// this.class_obj.yellow = true // 直接放，没有响应式
Vue.set(this.class_obj, 'yellow', true) // 这样才有响应式
} } })
</script>
条件渲染v-if v-else-if v-else
<div v-if="score>90&&score<=100">优秀</div>
<div v-else-if="score>80&&score<=90">良好</div>
<div v-else-if="score>=60&&score<=80">及格</div>
<div v-else>不及格</div>
v-for
<table><tbody><tr v-for="good in good_list">
<th scope="row">{{good.id}}</th>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.count}}</td>
</tr></tbody></table>
this.good_list = [
{'id': 1, 'name': '小汽车', 'count': 2, 'price': 100000},
{'id': 2, 'name': '脸盆', 'count': 1, 'price': 23},
//......
]
<h1>循环数字5(不管括号内写的参数是什么，第一个表示值，第二个表示索引)</h1>
<ul><li v-for="(value,index) in number">{{value}}---->{{index}}</li></ul>
<dl><dd v-for="(index,value) in number">{{index}}---->{{value}}</dd></dl>
<h1>循环字符串'lqz is handsome'</h1>
<ul><li v-for="(value,index) in str">{{value}}--->{{index}}</li></ul>
<dl><dd v-for="(index,value) in str">{{index}}--->{{value}}</dd></dl>
<h1>循环数组[3, 4, 2, 66, 55]</h1>
<ul><li v-for="(value,index) in arr">{{value}}---->{{index}}</li></ul>
<dl><dd v-for="(index,value) in arr">{{index}}---->{{value}}</dd></dl>
<h1>循环对象(key和value是反的){name: 'lqz', age: 19, gender: '男'}(不管括号内写的参数是什么，第一个表示值，第二个表示key)</h1>
<ul><li v-for="(value,key) in obj">key是：{{key}}=====value是:{{value}}</li></ul>
<dl><dd v-for="(key,value) in obj">value是:{{value}}=====key是：{{key}}</dd></dl>
<script>
let vm = new Vue({
el: '#app',
data: {
number: 10,
str: 'lqz is handsome',
arr: [3, 4, 2, 66, 55],
obj: {name: 'lqz', age: 19, gender: '男'}
}, methods: {} })
</script>
事件处理
# 事件指令
-click:点击事件
# input标签的事件
-input：只要输入内容，就会触发
-change：只要输入框发生变化，就会触发
-blur：只要失去焦点，就会触发
数据双向绑定
<h1>单向数据绑定，咱们不用</h1>
<!-- <p>用户名<input type="text" :value="username"></p>
<p>密码<input type="password" :value="password"></p>
<button @click="handleSubmit">登录</button>-->
<h1>双向数据绑定</h1>
<p>用户名<input type="text" v-model="username"></p>
<p>密码<input type="password" v-model="password"></p>
<button @click="handleSubmit">登录</button>
let vm = new Vue({
el: '#app',
data: {
username: 'lqz',
password: '123'
},
methods: {
handleSubmit() {console.log(this.username,this.password)} } })
过滤案例
错误1
错误情况如图<ul><li v-for="(value,index) in dataList">{{index,value}}</li></ul>
正确代码<ul><li v-for="(value,index) in dataList">{{index}}:{{value}}</li></ul>
错误2：(value,index)in 括号和in 之间必须空格
image.png
