前端目前形式
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 内卷化
vue介绍和使用
1 渐进式JavaScript:javascript的框架（jq），写简单的可以使用vue，写复杂的项目也可以使用
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 快速使用
8 补充：解释型语言，需要解释器，js解释器集成到浏览器中了，console就等同于你在cmd小敲python3进的交互式命令行是一样的
9 nodejs:把chorm的v8引擎（解释器），安装到操作系统之上
模板语法
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.1 v-html，v-text,v-show,v-if
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', //在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
<!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>
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">
<!-- <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>
