目录
一、前端目前形式
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介绍和使用
2.1 渐进式JavaScript
javascript的框架(jq),写简单的可以使用vue,写复杂的项目也可以使用,通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目
2.2 Vue介绍
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
2.3 Vue特点
易用
通过 HTML、CSS、JavaScript构建应用
灵活
不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。
高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
2.4 三大主流框架
三大主流框架之一:Angular React Vue
先进的前端设计模式:MVVM 可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发
MVVM:Model-View-ViewModel
-model:数据(后端给的,js接收到)
-ViewModel:中转 (双向数据绑定:js中变量变了,html中数据也跟着变)
-view:视图(html+css)
其他的前端设计模式:页面化开发
前端开发:webstorm,sublinetext,vscode(python,java,go,前端,免费),pycharm(咱们讲课)
补充:解释型语言,需要解释器,js解释器集成到浏览器中了,console就等同于你在cmd小敲python3进的交互式命令行是一样的
nodejs:把chorm的v8引擎(解释器),安装到操作系统之上
2.5 快速使用
版本:1.x 2.x(用的最多) 3.x(beta版本)
下载:(可以使用cdn)
开发版本:vue.js :https://vuejs.org/js/vue.js
生产版本:vue.min.js :https://vuejs.org/js/vue.min.js
使用
<!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',
data:{
name:'lqz'
}
})
</script>
</html>
三、模板语法
3.1 插值
3.1.1 概述
插值语法 {{ js变量或js语法}}
注意:直接把Vue对象赋值给变量,修改变量值,可以直接修改页面内容
-vm.$data.name='ll'或vm._data.name='ll'
-vm.name
3.1.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.2 指令
3.2.1 文本相关指令
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把标签删除和加入
注意:v-show和v-if的区别
案例
<!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.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.2.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>
3.2.4 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>