目录
前端发展
1.前端发展史
1.1 HTML(5)+css(3)+JavaScript(ES5、ES6)---编写前端页面---后端(PHP/Python/go/Java)---后端通过模板语法将后端数据渲染---返回前端---在浏览器中查看
1.2 Ajax--后端发送异步请求 前端Render+Ajax混合模式展示
1.3 只有Ajax加载数据---DOM渲染--前后端分离的雏形
1.4 前端框架：Angular框架---出现了'前端工程化'概念
1.5 前端框架：React、Vue框架---当前最火(国人喜欢用Vue 国外喜欢用React)
1.6 (大)前端：移动开发(Android+ISO)+Web(web+微信小程序+支付宝小程序)+桌面开发(windows桌面)
1.7 大前端：一套代码在各个平台运行谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
1.8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
1.9 前端发展的介绍：https://zhuanlan.zhihu.com/p/337276087?
Vue的使用
1.Vue的介绍：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
2.Vue是渐进式框架
可以使用一部分也可以整个项目整体使用
3.网站：
官网：https://cn.vuejs.org/
文档：https://cn.vuejs.org/v2/guide/
4.Vue的特点：
4.1 易用
通过 HTML、CSS、JavaScript构建应用
4.2 灵活
不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
4.3 高效
20kB min+gzip 运行大小
超快虚拟 DOM
最省心的优化
5.M-V-VM思想
5.1 介绍：Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式
Model：Vue对象的data属性中的数据 显示在页面中的数据
view：Vue中数据要显示在HTML页面 在Vue中也称之为视图模板(HTML+CSS)
ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变）
https://tva1.sinaimg.cn/large/008i3skNgy1gprqsts5q2j321s09saan.jpg
5.2 特征：
低耦合
可复用
独立开发
可测试
5.3 逻辑：view双向数据绑定---ViewModel---发送Ajax请求---返回数据Model(逻辑编写--数据库)
6.开发：
单页开发：
只需要1个页面，结合组件化开发来替换页面中的内容 页面的切换只是组件的替换，页面还是只有1个index.html
组件化开发：类似于DTL中的include，每一个组件的内容都可以被替换和复用
7.版本：
1.X：使用较少
2.X：普遍使用
3.X：过渡阶段
8.引入方式：
CDN引入
下载导入--与js导入一致
网址：https://cdn.jsdelivr.net/npm/vue/dist/vue.js
9.语言：
js是解释性语言：解释器集成到了浏览器中
nodejs(一门后端语言)：把chrome的v8引擎（解释器），安装到操作系统之上
10.Vue
<body>
<div id="d1">
姓名：{{name}}
年龄：{{age}}
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
name:'lili',
age: 18,
}
})
</script>
插值语法
1.字符串
2.数值
3.数组--字符串(索引取值)
4.对象--字符串
5.网址--字符串
注：当Vue的插值语法与模板语法共同存在时需要修改一方的 不然会导致错误
<body>
<div id="d1">
姓名：{{name}}
年龄：{{age}}
爱好：{{hobby}}
第一个爱好：{{hobby[1]}}
信息：{{info}}
网址：{{a}}
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
name:'lili',
age: 18,
hobby:['羽毛球', '乒乓球'],
info: {'name': 'lili', 'age': 18},
a:'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'
}
})
指令系统
文本指令
1.写在[任意]标签上 以 v-xx 开头的，都是vue的指令
2.文本指令
v-text：把变量渲染到标签中，如果之前有数据，覆盖掉
v-html:如果是标签字符串，会把标签渲染到标签内
v-show：控制标签的显示与隐藏，但是它是通过style的display控制的：style="display: none;"
v-if：控制标签的显示与隐藏，但是它是通过dom的增加和删除
3.代码
<body>
<div id="d1">
<span v-text="name"></span>
<span v-html="a"></span>
<img v-show="img" src="https://img0.baidu.com/it/u=633778097,1034027030&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=27efede310a2bd944ca5eed92e58fe20" alt="">
<img v-if="img1" src="https://img1.baidu.com/it/u=665208686,3911335732&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=a89b1af11b58a2d1efd6babaf3321ce5" alt="">
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
name:'lili',
age: 18,
hobby:['羽毛球', '乒乓球'],
info: {'name': 'lili', 'age': 18},
a:'<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">点我</a>',
img: true,
img1: true,
}
})
事件指令
1.放在标签上：v-on:事件名='函数'
2.事件名可以写：click,dbclick, input标签:change,blur,input
3.补充：es6 对象写法
var name = 'lili'
var age = 18
// var obj={name:name,age:age}
var obj = {name, age, handleClick() {}}
4.v-on:事件名='函数' 简写成 @事件名='函数'
5.形参：不报错
多传--以实际传的实参为准
少传--以位置参数给与实参
不传--无实参显示
6.代码：
<div id="d1">
<!-- <button v-on:click="handledimg">点我</button>-->
<button @click="handledimg('123', 'lili')">点我</button>
<div v-show="img">
<img src="https://img0.baidu.com/it/u=633778097,1034027030&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=27efede310a2bd944ca5eed92e58fe20" alt="">-->
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
// name:'lili',
// age: 18,
// hobby:['羽毛球', '乒乓球'],
// info: {'name': 'lili', 'age': 18},
// a:'<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">点我</a>',
img: true,
// img1: true,
},
methods:{
// handledimg:function () {
// this.img = !this.img
// }
// handledimg(){
// this.img = !this.img
// }
//
handledimg(a,b) {
this.img = !this.img
alert(a)
alert(b)
}
}
})
</script>
属性指令
1.写在标签上的 name，class,href,src,id.....属性
2.v-bind:属性名='变量' 简写成： :属性名="变量"
注：属性指令可以使标签中属性写变量名
3.图片切换代码
<body>
<div id="d1">
src="https://img0.baidu.com/it/u=633778097,1034027030&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=27efede310a2bd944ca5eed92e58fe20" alt="">–>-->
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
img: true, urlList:'https://img0.baidu.com/it/u=633778097,1034027030&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=27efede310a2bd944ca5eed92e58fe20',
urllist:[
'https://img2.baidu.com/it/u=1640158430,3788639612&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', 'https://img1.baidu.com/it/u=84572721,2203711366&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360', 'https://img1.baidu.com/it/u=3766746561,140386798&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=493', 'https://img2.baidu.com/it/u=1765478171,368549186&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500'
]
},
methods:{ this.url='https://img1.baidu.com/it/u=665208686,3911335732&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=a89b1af11b58a2d1efd6babaf3321ce5'
// }
handledimg() {
var i = Math.floor(Math.random() * this.urllist.length)
console.log(i)
this.urlList = this.urllist[i]
}
}
})
</script>
4.图片随机切换(定时装置)
<body>
<div id="d1">
src="https://img0.baidu.com/it/u=633778097,1034027030&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=27efede310a2bd944ca5eed92e58fe20" alt="">–>-->
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#d1',
data:{
img: true, urlList:'https://img0.baidu.com/it/u=633778097,1034027030&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=27efede310a2bd944ca5eed92e58fe20',
urllist:[
'https://img2.baidu.com/it/u=1640158430,3788639612&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400', 'https://img1.baidu.com/it/u=84572721,2203711366&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360', 'https://img1.baidu.com/it/u=3766746561,140386798&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=493', 'https://img2.baidu.com/it/u=1765478171,368549186&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500'
]
},
methods:{ this.url='https://img1.baidu.com/it/u=665208686,3911335732&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1666717200&t=a89b1af11b58a2d1efd6babaf3321ce5'
// }
handledimg() {
handledimg() {
setInterval(() => {
var i = Math.floor(Math.random() * this.urllist.length)
this.urlList = this.urllist[i]
}, 1000)
}
}
})
</script>
属性
1.class属性：
通过vue属性v-bind:class='变量名'简写:class='变量名'
1.1 class属性字符串用法--已定义过的类
1.2 class属性数组用法--类本身就是多个 所以数组使用较多
1.3 class属性对象用法--针对是否显示(v布尔值)
2.style属性
通过vue属性v-bind:style='变量名'简写:style='变量名'
1.1 style属性字符串用法--styleObj:'background-color: green;',
1.2 style属性数组用法--styleObj:[{'background-color': 'green'}, {'font-size': '40px'}]
1.3 style属性对象用法--styleObj:{backgroundColor: 'green',fontSize: '40px'}
3.代码
<style>
.color{
background-color: green;
}
.size{
font-size: 40px;
}
</style>
<body>
<div id="app">
<div :class="classObj">
class的div
</div>
<div :style="styleObj">
style的div
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
// classObj:{color:true, size:false},
// styleObj: 'size'
//class字符串的用法
// classObj:'color',
//class数组用法
// classObj:['color', 'size']
//class对象的用法
classObj:{color:true, size:false},
//style字符串用法
// styleObj:'background-color: green;',
//style数组用法
// styleObj:[{'background-color': 'green'}, {'font-size': '40px'}]
//style对象用法
styleObj:{backgroundColor: 'green',fontSize: '40px'}
},
})
</script>
条件渲染
1.放在标签上控制标签的显示与不显示
v-if---条件成立走 结果是布尔值
v-else-if---if条件不成立走 结果是布尔值
v-else---条件都不成立走
2.代码
<body>
<div id="app">
<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>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
score:100
},
})
</script>
列表渲染
1.放在标签上可以循环显示多个此标签
v-for
2.代码：购物车商品展示
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">购物车</h1>
<button @click="handleClick" class="btn btn-danger">加载购物车</button>
<div v-if="goods.length>0">
<table class="table">
<thead>
<tr>
<th>序号</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="good in goods">
<td>{{good.id}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
</tr>
</tbody>
</table>
</div>
<div v-else>
购物车空空哒
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
goods:[]
},
methods: {
handleClick(){
this.goods=[{id:1,name:'滑板', price: 999},
{id:2, name:'
标签：Vue,name,--,app,vm,var
From： https://www.cnblogs.com/040714zq/p/16823332.html