今日内容：
0、前端目前形式
-1、html5，css3，js（es5，es6）：写一个一个的页面---》给后端（php，python，go，Java）---》后端嵌入模板语法---》后端渲染完---》返回给前端---》在浏览器中看
-2、ajax出现---》后台发异步请求，render+Ajax混合（bbs项目）
-3、但用Ajax（加载数据，dom渲染页面）：前后端分离的雏形
-4、agular：js框架，前端工程化，前端也是一个工程，一个项目
-5、react，vue：当下最火的两个前端框架（vue是国人写的，国人用的多，react外国用的多）
-6、移动开发（安卓，ios）+web（web，微信小程序，支付宝小程序）+桌面应用开发（Windows桌面）：前端---》大前端，这些都叫前端
-7、一套代码在各个平台运行（前端）：谷歌flutter（Dart：跟Java很像）：iOS，安卓，桌面
-8、在vue框架的基础上nui-app：https://uniapp.dcloud.io/一套代码编到10个平台，这不是梦想。
-9、在不久的将来，一统天下
-10、内卷化
1、vue介绍和使用
-1、渐进式JavaScript：JavaScript的框架（jq），用于构建用户界面的渐进式框架。写简单的可以使用vue，写复杂的项目也可以使用。
通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目
vue特点：
-易用：通过HTML，css，JavaScript构建应用
-灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩
-高效：20kb min+gzip运行大小，超快虚拟DOM，最省心的优化
三大主流框架
三大主流框架之一：Angular React Vue
先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发。
-2、MVVM：model-View-ViewModel
-model：数据（后端给的，js接收到）
-ViewModel：中转（双向数据绑定：js中变量变了，html中数据也跟着变）
-View：视图（html+css）
-3、组件化开发，单页面开发
-4、版本：1.x 2.x（用的多）3.x（beta版本）
-5、下载：（可以使用cdn）
-开发版本：vue.js :https://vuejs.org/js/vue.js
-生产本本：vue.min.js :https://vuejs.org/js/vue.min.js
-6、前端开发：webstorm，sublinetext，vscode（python，Java，go，前端，免费），pycharm
-7、快速使用
见如下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
{{name}}
</div>
</body>
<script>
new Vue({
el:'#box', //固定语法，与div做绑定
data:{
name:'lqz'
}
})
</script>
</html>
2、模板语法
-1、插值语法：{{ js比那辆或js语法 }}
-2、代码演示
<!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', //在box这个div中可以写vue的语法
data: {
name: 'hello world',
age: 19,
ll: [1, 2, 3],
obj: {name: 'lqz', age: 19},
s: '<a href="http://www.baidu.com">点我看美女</a>',
},
})
</script>
</html>
3、指令
3.1 v-html，v-text，v-show，v-if
-1、标签属性为v-xx的形式，是vue的指令
-2、常用指令
v-html：让html渲染成页面
v-text：标签内容显示js变量对应的值
v-show：放一个布尔值，为真，标签就显示，为假标签就不显示，为假时是加了display：none的样式，把标签隐藏起来了。
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', //在box这个div中可以写vue的语法
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指的是当前vue对象
this.isShow = !this.isShow
},
}
})
</script>
</html>
3.2事件指令
-1、点击事件：给标签（控件）绑定函数，点击执行函数
-2、v-on：click ：缩写成@click
-3、$event:是个显示详细坐标的事件
<!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', //在box这个div中可以写vue的语法
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>
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，点击按钮，div变色-->
<div id="box">
<!-- <img v-bind:src="url" alt="">-->
<!-- <img :src="url" alt="" width="60" height="60">-->
<!-- <div :class="red_class">我的个divdiv快乐的div</div>-->
<button @click="handleClick">点我变色</button>
<!-- <div :class="change">-->
<div :class="isActive?'red':'green'">
我是一个div
</div>
</div>
</body>
<script>
new Vue({
el: '#box', //在box这个div中可以写vue的语法
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',
// red_class: 'red',
change:'red',
isActive:true,
},
methods: {
handleClick() {
// this.change='green'
this.isActive=!this.isActive
}
}
})
</script>
</html>
4、style和class
-1、通v-bind控制style和class的显示
class 添加多个属性的话就是忘列表里家属性，但是js里称为数组
// class_obj: 'red', //放一个是字符串
// class_obj: ['red'], //放多个是数组
数组.push() 从尾部加一个元素
数组.pop() 从尾部弹出一个元素
style 添加多个样式是往字典里加，js里称为对象，
//对象写法
style_obj:{
background:'yellow',
fontSize:'30px'
}
修改或者增加style的样式：
this.style_obj['fontSize']='30px'
代码：
<!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">
<!-- <div :class="class_obj" >-->
<!-- 我是div控件-->
<!-- </div>-->
<button @click="handleClick">点击，字体变大</button>
<div :style="style_obj">
我是div控件
</div>
</div>
</body>
<script>
var vm=new Vue({
el: '#box', //在box这个div中可以写vue的语法
data: {
// class_obj: 'red', //放一个是字符串
// class_obj: ['red'], //放多个是数组
//数组.push() 从尾部加一个元素
//数组.pop() 从尾部弹出一个元素
//数组的其它操作自行搜索
//对象写法
style_obj:{
background:'yellow',
fontSize:'30px'
}
},
methods:{
handleClick(){
console.log('asdfasd')
this.style_obj['fontSize']='30px'
},
}
})
</script>
</html>
