python69 前端框架之vue 前端发展史、vue介绍、插值语法、文本指令、属性指令、时间指令、class和style、条件渲染、列表渲染
前端发展史
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
2.Ajax(异步JavaScript和XML)的出现 -> 后台发送异步请求，Render+Ajax混合
$.ajax
XMLHttpRequest 原生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=41967790587904
vue介绍
一：Vue介绍 和 基本使用
1.Vue介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
# 渐进式框架
可以一点一点地使用它，只用一部分，也可以整个工程都使用它
# 网站
官网：https://cn.vuejs.org/
文档：https://cn.vuejs.org/v2/guide/
2.Vue特点
# 易用
通过 HTML、CSS、JavaScript构建应用
# 灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
# 高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
3.M-V-VM思想
# MVVM介绍
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来编写
4.组件化开发、单页面开发
组件化开发
类似于DTL中的include，每一个组件的内容都可以被替换和复用
单页面开发
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html
5.版本
1.X：使用得较少
2.X：普遍使用
3.X：刚出没多久，只有Beta版
6.引入方式
# 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>
7.补充
解释型的语言是需要解释器的
js就是一门解释型语言，只不过js解释器被集成到了浏览器中
所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样
nodejs：一门后端语言
把chrome的v8引擎（解释器），安装到操作系统之上
8.简单使用
创建一个index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue的简单使用</title>
<!-- <script src="js/vue.js"></script>-->
<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>
双向数据绑定测试
vm._data.name='darker' // 修改js中变量的值
$('#box').text('hahah') // 修改HTML的div中的值
'''
注意 为了让pycharm更好的识别vue语法 在设置里面 Plugins里面安装vue.js
'''
插值语法
mvvm演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
姓名:{{name}}
姓名:{{age}}
</div>
<script>
var vm =new Vue({
el:'#app',
data:{ //data中定义的变量 以后从vm实例直接可以拿到
name:'lqz',
age:19
}
})
</script>
</body>
</html>
插值语法
插值语法中可以放：
变量，对象取值，数组取值
简单的js语法
函数（）
# 插值不能写在标签的属性上，只能写在标签内部
<!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.age}}</p>
<p>运算：{{10 * 2 + 3 * 4}}</p>
<p>三目运算符【条件？'符合':'不符合'】:{{10 > 90 ? '大于' : '小于'}}</p>
<p>标签(默认不会渲染成标签):{{a_url}}</p>
<p>函数()</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'lqz',
age: 20,
hobby: ['篮球', '排球', '乒乓球'],
wife: {age: 19, hight: 200},
a_url: '<a href="http://www.baidu.com">点我看美女</a>'
// 三目运算符 三元表达式
}
})
</script>
</body>
</html>
文本指令
指令系统
v-xx 写在标签上，任意标签
v-xx="" -------》原来插值语法中能写的，它都能写，不要再加 {{}}
# 指令系统：vue提供的 都是v-xx写在标签属性上的，统称为指令 例如，a_url必须是data中定义的变量
<p v-text="a_url"></p>
v-text 直接把字符串内容渲染在标签内部，等同于
<p v-text="a_url"></p>
<p>{{a_url}}</p>
v-html 把字符串的内容渲染成标签，写在标签内部
<p v-html="a_url"></p>
# v-show 等于布尔值，该标签是否显示 样式控制显示 不显示：style="display:none;"
# v-if 等于布尔值，该标签是否显示 整个标签之间删除，效率低 在dom中删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>v-text</h2>
<p v-text="a_url"></p>
<p>{{a_url}}</p>
<h2>v-html</h2>
<p v-html="a_url1"></p>
<h2>v-show</h2>
<img src="https://img2.woyaogexing.com/2023/02/10/f426aeefcf78b0f6e88bba4e67437409.jpeg" alt="" v-show="show" width="200px" height="200px">
<h2>v-if</h2>
<div v-if="show_if">
<img src="https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg" alt="" width="200px" height="200px">
</div>
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
a_url:'指令指令指令',
a_url1:'<a href="http://www.baidu.com">点我看美女</a>',
show:false,
show_if:true
}
})
</script>
</body>
</html>
属性指令
标签上的属性可以绑定变量，以后变量变化，属性的值跟着变化
href
src
name
class
style
height
。。。。。
语法
v-bind：属性名="变量名"
可以简写成，以后都用简写
：属性名="变量名"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">点我看博客</a>
<br>
<a :href="url">点我看博客</a>
<br>
<img v-bind:src="photo" alt="" height="300px" width="300px">
<br>
<img :src="photo" alt="" v-bond:height="h" v-bind:width="w">
</div>
<script>
var vm =new Vue({
el:'#app',
data:{
url:'http://www.cnblogs.com',
photo:'https://img1.baidu.com/it/u=273892741,1142580910&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
h:'300px',
w:'300px'
}
})
</script>
</body>
</html>
事件指令
事件指令是：点击事件，双击事件，滑动事件
用的最多的是点击事件click
v-on:事件名='函数'
<button v-on:click="handleClick">点我看美女</button>
函数必须写在methods的配置项中
methods:{
'handleClick':function(){
//alert('美女')
console.log(this) //this就是当前vue实例，就是vm实例
this.show =!this.show
},
}
点击button就会触发绑定函数(handleClick)的执行
可以简写成，以后都用简写
@事件名='函数'
小案例：点击按钮，随机切换美女图片
1.methods配置项中写成这种形式 es6的对象写法
handleClick（）{}
如果函数中再套函数，如果内部不是箭头函数，this指向有问题，需要在外部定义一下
var _this = this
小案例：点击按钮，随机切换美女图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="handleClick">点我看美女</button>
<br>
<button @click="handleClick">点我看美女</button>
<div>
<img :src="url" alt="" width="600px" height="600px">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
url_list: ['https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
]
},
methods:{
handleClick:function (){
var i = Math.round(Math.random()*(this.url_list.length-1))
this.url = this.url_list
console.log(i)
var _this=this
// setInterval(function () {
// console.log(_this)
// var i = Math.round(Math.random()*(_this.url_list.length-1))
_this.url = _this.url_list[i]
console.log(i)
// },1000)
},
},
})
</script>
</body>
</html>
点击开始随机美女，点击美女停下（定时器停），弹出美女地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="handleClick">点我看美女</button>
<div>
<img :src="url" alt="" width="600px" height="600px" @click="e">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
url_list: ['https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
]
},
methods:{
// handleClick:function (){
// var i = Math.round(Math.random()*(this.url_list.length-1))
// this.url = this.url_list
// console.log(i)
// var _this=this
// setInterval(function () {
// console.log(_this)
// var i = Math.round(Math.random()*(_this.url_list.length-1))
// _this.url = _this.url_list[i]
// console.log(i)
// },1000)
// },
handleClick(){
var _this = this;
id = setInterval(function(){
// console.log(_this)
var i = Math.round(Math.random()*(_this.url_list.length-1))
_this.url = _this.url_list[i]
console.log(i)
},1000)
},
e(){
var _this = this;
clearInterval(id);
alert(_this.url)
}
},
})
</script>
</body>
</html>
1.点击按钮后进行图片的跳动 绑定的点击事件，定时功能 简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="handleClick">点我看美女</button>
<br>
<button @click="handleClick">点我看美女</button>
<div>
<img :src="url" alt="" width="600px" height="600px">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
url: 'https://img2.woyaogexing.com/2023/02/13/0253c158c222e0db0ea0bf68df21d315.jpeg',
url_list: ['https://img.lesmao.vip/k/1178/T/XIAOYU/951/951_001_dj7_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_001_k4r_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6211/6211_004_g66_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XiuRen/6165/6165_001_gwy_3600_5400.jpg',
'https://img.lesmao.vip/k/1178/T/XIAOYU/948/948_020_xcx_3600_5400.jpg',
]
},
methods:{
// handleClick:function (){
// var i = Math.round(Math.random()*(this.url_list.length-1))
// this.url = this.url_list
// console.log(i)
// var _this=this
// setInterval(function () {
// console.log(_this)
// var i = Math.round(Math.random()*(_this.url_list.length-1))
// _this.url = _this.url_list[i]
// console.log(i)
// },1000)
// },
handleClick(){
var _this = this
setInterval(function (){
console.log(_this)
var i = Math.round(Math.random()*(_this.url_list.length-1))
_this.url = _this.url_list[i]
console.log(i)
},1000)
}
},
})
</script>
</body>
</html>
es 6 的对象写法
var hobby = ['篮球'，'足球']
var f = function (a, b) {
console.log('匿名函数')
console.log(a + b) // 参数讲过 随便传参数 传相同时 正常显示
}
// var d={'name':"lqz",age:19,'hobby':hobby}
// var d={'name':"lqz",age:19,hobby:hobby}
// var d = {'name': "lqz", age: 19, hobby} // es6 的简写形式
// var d = {'name': "lqz", age: 19, f} // es6 的简写形式
var d = {'name': "lqz", age: 19, handleClick(){
console.log('xxxxx')
}} // es6 的简写形式
console.log(d)
d.handleClick()
class和style
本身他俩都是属性指令，但是他们比较特殊，应用更广泛，
class：推荐用数组 []
:class='变量'
变量可以是字符串，数组，对象
style： 推荐用对象 {（）（）（）}
：style='变量'
变量可以是字符串，数组，对象
数组的方法：很多 百度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
<style>
.font {
font-size: 60px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.font-color {
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<h1>clss</h1>
<div :class="class_obj">我是div</div>
<h1>style</h1>
<div :style="style_obj">我是style-----div</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
// class_str:'font',
// class_list:['font'], # 推荐
class_obj: {font: true, green: false, 'font-color': false},
style_str: 'color: green;font-size:80px',
// style_list: [{color:'yellow'}, {'font-size':'90px'}],
style_list: [{color: 'yellow'}, {fontSize: '90px'}], // 可以用驼峰
style_obj: {color: 'yellow', fontSize: '80px'}
// style_obj: {color: 'yellow', 'font-size': '80px'}
},
})
</script>
</html>
条件渲染
v-if=条件 放在标签上，如果条件成立该标签就显示，如果条件不成立，该标签就不显示
v-else-if=条件 放在标签上，如果条件成立 该标签就显示 ，如果条件不成立，该标签就不显示
v-else 放在标签上，上面条件都不成立，显示这个标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>通过分数显示文字</h1>
<div v-if="score>=90">优秀</div>
<div v-else-if="score>=80&&score<90">良好</div>
<div v-else-if="score>=60&&score<80">及格</div>
<div v-else>不及格</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
score: 99
}
})
</script>
</body>
</html>
列表渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
<div id="app">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="text-center">
<h1>v-if+v-for 显示购物车</h1>
<button @click="handleClick" class="btn btn-danger">点我显示</button>
</div>
<div v-if="show">
<table class="table table-hover">
<thead>
<tr>
<th>id</th>
<th>商品名</th>
<th>商品价格</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<th scope="row">{{item.id}}</th>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
show:false,
good_list:[
{id: 1, name: '钢笔', price: '29'},
{id: 2, name: '铅笔', price: '29'},
{id: 3, name: '文具盒', price: '298'},
{id: 4, name: '彩笔', price: '298'},
]
},
methods:{
handleClick(){
this.show =! this.show
}
}
})
</script>
</body>
</html>
补充：
解释器
ide：集成开发环境，快速开发
ptcharm
goland
vscode
dtl： django template language djagno的模板语法
