目录
前端发展史
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
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个平台
9.在不久的将来 ，前端框架可能会一统天下
https://zhuanlan.zhihu.com/p/337276087?utm_source=wechat_session&utm_medium=social&utm_oi=41967790587904vue介绍
网站：
vue是一套用以构建用户界面的渐进式框架， 与其他大型框架不同的是， vue还被设计为可以自底向上逐层应用， vue的核心库只关注视图层， 容易上手，且便于第三方库既有香米整合。
因其是渐进式框架， 我们可以一点一点地使用它，只用一部分，也可以整个工程都使用它。
他只有20kbmin +gzip运行大小， 超快虚拟dom,非常灵活的生态系统， 可以在一个库和一套完整框架之间自如伸缩。
M-V-VM思想
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式
Model：vue对象的data属性里面的数据，这里的数据要显示到页面中View：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
MVVM的特性
- 低耦合：
视图（View）可以独立于Model变化和修改，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候 View也可以不变 - 可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View
重用这端视图的逻辑（以此减少代码冗余） - 独立开发：
开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计 - 可测试：界面元素是比较难以测试的，而现在的测试可以
针对ViewModel来编写
MVVM的逻辑
补充： M-V-VM思想
- MTV :django
- MVC :后端框架一般基于这种架构
- MVVM:前端框架 vue
- MVP：移动端
组件化开发、单页面开发
组件化开发
类似于DTL中的include，每一个组件的内容都可以被替换和复用
单页面开发
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html
组件化开发、单页面开发
-组件化开发：有自己独立的html，css，js
-单页面应用(SPA)
-只有一个html页面
版本问题
1.X：使用得较少
2.X：普遍使用
3.X：刚出没多久，只有Beta版
引入方式
CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
下载后导入
其实就是直接在浏览器中打开
https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去
<script src="js/vue.js"></script>
解释型的语言是需要解释器的
js就是一门解释型语言，只不过js解释器被集成到了浏览器中
所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样
nodejs：一门后端语言
把chrome的v8引擎（解释器），安装到操作系统之上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的简单使用</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
{{name}}
</div>
</body>
<script>
let vm = new Vue({
el: '#box', // 在box这个div中可以写 vue的语法
data: {
name: 'Hello World'
}
})
</script>
</html>双向数据绑定测试
vue快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>--> // cdn引入文件
<script src="./vue/vue.js"></script> // 导入本地文件
</head>
<body>
<div id="app">
<h1>vue快速使用</h1>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>hobby:{{hobby}}</p>
</div>
</body>
<script>
var vm= new Vue({
el:'#app',
data:{
name:'yietong',
age:22,
hobby:['reading','running','swimming']
}
})
</script>
</html>效果
模板语法传值
插值语法
被vue托管的标签中可以写 {{}} 中可以写：变量，js简单的表达式，函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>vue插值语法渲染变量</h1>
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>hobby:{{hobby}}</p>
<p>the 1st hobby:{{hobby[0]}}</p>
<p>boyfriend:{{boyfriend}}</p>
<p>boyfriend's name:{{boyfriend['name']}}</p>
<p>boyfriend's age:{{boyfriend.age}}</p>
<p>label:{{a}}</p>
<h1>vue 插值语法渲染简单表达式</h1>
<p>{{10 > 9 ? 'bigger' : 'smaller'}}</p>
<p>{{10 + 1}}</p> // 只有一个+的运算， 没有++
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'yietong',
age: 22,
hobby: ['reading', 'running', 'swimming'],
boyfriend: {name: 'imagination', age: 27},
a: '<a href="https://www.google.com">click here</a>'
}
})
</script>
</html>效果
指令系统之文本指令
写在[任意]标签上 以 v-xx 开头的，都是vue的指令
| 指令 | 释义 |
|---|---|
| v-html | 让HTML渲染成页面【如果是标签字符串，会把标签渲染到标签内】 |
| v-text | 标签内容显示js变量对应的值【 v-text：把变量渲染到标签中，如果之前有数据，覆盖掉】 |
| v-show | 放1个布尔值：为真 标签就显示；为假 标签就不显示【控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;"】 |
| v-if | 放1个布尔值：为真 标签就显示；为假 标签就不显示 【控制标签的显示与隐藏，但是它是通过dom的增加和删除】 |
v-show与 v-if的区别：
v-show：标签还在，只是不显示了（display: none）
v-if：直接操作DOM，删除/插入 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>文本指令 v-text</h1>
<p v-text='name'>yietong</p>
<br>
<h1>文本指令 v-html</h1>
<p v-html='a'></p>
<br>
<h1 v-show="img"></h1>
<img v-show="girl"
src="data:image/jpeg;base64,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"
alt="" width="300px" height="300px">
<br>
<h1>v-if</h1>
<div v-if="a1">
<a href="">click here for beauties</a>
<h3>pretty girls</h3>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'yietong',
a: '<a href="https://www.google.com">click here</a>',
img: true,
a1: true
}
})
</script>
</html>效果
指令系统之事件指令
放在标签上：v-on:事件名='函数'
事件名可以写：click,dbclick, input标签:change,blur,input
| 指令 | 释义 |
|---|---|
| v-on | 触发事件（不推荐） |
| @ | 触发事件（推荐） |
| @[event] | 触发event事件（可以是其他任意事件） |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件指令</h1>
<button v-on:click="handleShow">click here to disappear</button>
<div v-if="show">
<img src="data:image/jpeg;base64,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" alt="" width="300px"height="300px">
</div>
<h1>事件指令函数带参数</h1>
<button @click="handleClick">函数需要参数，但是没有传入，默认会把event事件传入</button>
<br>
// 可以传入数字， 字符串，数组，对象等
<button @click="handleClick1('yietong')">函数需要参数，但是传值了</button>
<br>
<button @click="handleClick2($event,'yietong')">函数需要2个参数，一个事件，一个字符串</button>
<br>
<button @click="handleClick3('yietong')">函数需要3个参数，但是只传入了一个</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true,
},
methods:{
// handleShow:function () {
// // this 是vm对象 vm.show
// this.show=!this.show
// },
//es6语法，对象写法, 以后都这样写
handleShow(){
// this 是vm对象 vm.show
this.show =! this.show
},
// 一个参数，但是没有传，会把事件传入
handleClick(a){
console.log(a)
alert('god afternoon')
},
// 需要一个参数， 传了一个，但是需要传入数字字符串，布尔胡总和变量
handleClick1(name){
console.log(name)
},
//需要传入三个参数，传了一个， 这种情况不会报错， 后边两个值都是undefined
handleClick3(a,b,c){
console.log(a)
console.log(b)
console.log(c)
},
//需要传入两个参数， 一个事件，一个字符串
handleClick2(event,name){
console.log(event)
console.log(name)
}
}
})
</script>
</html>小补充：es6 对象写法》》 v-on:事件名='函数' 简写成 @事件名='函数'
// // es5写法
var obj = {'name':'yietong','age':22}
var obj = {name:'yietong',age:22}
//es6中写法
var name = 'yietong'
var age = 22
var obj = {name:name,age:age}
//简写为
var obj = {name,age}
// 函数写法[简写】
var obj = {name,age,handleClick () {
}}
指令系统之属性指令
写在标签上的 name，class,href,src,id.....属性
v-bind:属性名='变量' 简写成 》》 v-bind:属性名='变量' :属性名="变量"
| 指令 | 释义 |
|---|---|
| v-bind | 直接写js的变量或语法（不推荐） |
| : | 直接写js的变量或语法（推荐） |
v-bind:class=’js变量’可以缩写成：:class=’js变量’
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./vue/vue.js"></script>
</head>
<body>
<div id="app">
<h1>属性指令</h1>
<button @click="handleClick">click here to check pictures</button>
<br>
<img v-bind:src="url" alt="" width="300px" height="300px">
<hr>
<button @click="handleChange">click to change pictures</button>
<br>
<img :src="img_url" alt="" width="300px" height="300px">
<hr>
<img :src="img_url2" alt="" width="300px" height="300px">
<hr>
<div :id="id_div">
I am div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'data:image/jpeg;base64,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',
img_url: 'data:image/jpeg;base64,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',
img_url2: 'data:image/jpeg;base64,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',
imgList: [
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXdaoQaLx3AntKG2L44el1YGhhx0pj5zFA1A&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9riLwZeamnEb3OJzp2B6ewKODrAzIG9QOVA&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuiuH3HPa3452EUV0Wu8ST2ewn2N2dCpR5Xg&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQli7DO72-xotA53sG03qJ2104qzy5qVS5E3Q&usqp=CAU',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQ0RbhohPRLH7hMA2lG0SigxYtrZzLejijMw&usqp=CAU'
],
id_div: 'xxx'
},
methods: {
handleClick() {
this.url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGre97b9bx8ulRuCXb8nA6H7MGRJhXqTt4KQ&usqp=CAU'
},
handleChange() {
// floor 只取证书部分
//math.random()生成0-1之间的数字
var i = Math.floor(Math.random() + this.imgList.length)
console.log(i)
this.img_url = this.imgList[i]
}
},
mounted() {
//页面加载完，开启一个定时器， 每个三秒钟看函数内容， 函数里面在变化
setInterval(() => {
var i = Math.floor(Math.random() * this.imgList.length)
this.img_url2 = this.imgList[i]
}, 1000)
}
})
</script>
</html>
本文含有隐藏内容，请 开通VIP 后查看