vue1- VUE介绍 - MVVM介绍 - 组件开发 - 单页面开发 - 第一个vue项目 - 模板语法之插值 - 文本指令 - 事件指令 - 属性指令
- VUE介绍
- MVVM介绍
- 组件开发
- 单页面开发
- 第一个vue项目
- 模板语法之插值
- 文本指令
- 事件指令
- 属性指令
VUE
前端：
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：一套编码
1.VUE介绍
vue是一套用于构建用户界面的渐进式框架，与其它大框架不同的是，vue的设计可以自底向上逐层应用
vue的核心只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
1.渐进式框架
可以一点一点的使用它，只用一部分，也可以整个工程都使用它
2.vue版本
两个版本评分天下
2.x
3.x
3.vue特点
灵活： 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩
易用： 通过HTML，CSS JAVAscripts构建应用
高效：
20kb min+ gizip运行大小
超快虚拟的DOM
最省心的优化
2.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来编写
③ MVVM的逻辑
3.MVVM-总结[重点]
-M :model 数据层，js的变量
-V：view 页面展示，视图层，html +css 的页面
-VM： vue 写的介于Model和View之间的一层
-双向数据绑定：只要改了M层的数据（js的变量）,view层的页面跟着变化
-mvc #后端web经典架构
-mtv #django
移动开发段--->mvp
-mvvm移动端
4.组件化开发[vue重点]
类似于DTL中的include，每一个组件的内容都可以被替换和复用
5.单页面开发[重点]
只需要1个页面，结合组件化开发来替换页面中的内容
页面的切换只是组件的替换，页面还是只有1个index.html
6.第一个vue项目
插件安装
#一个页面中使用vue，vue代码的引入（跟jq一模一样）
#编辑器的选择
-vscode
-webstorm --推荐webstorm,真前端不会在pycharm上开发前端
-sublime text
引入方式
6.1 CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
6.2下载后导入
其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去
<script src="js/vue.js"></script>
6.3第一个vue页面
第一个vue项目
el:管理的是div
#符号：管理的是id
. 符号：管理的是class属性
div里：写模板语法，两个花括号里写 scripts代码块中的key值，eg: {{name}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<p>我的名字是:{{name}}</p>
<p>我的名字是:{{age}}</p>
</div>
<script>
var vm = new Vue({
// 配置项 一般管理id，class 属性容易重复
el: '#app', //管理整个div, #表示管理id .app是管理div属性 class=app,
data:{
'name':'lzl',
'age':19
}
})
</script>
</body>
</html>
7.补充
解释型的语言是需要解释器的
js就是一门解释型语言，只不过js解释器被集成到了浏览器中
所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样
nodejs：一门后端语言
把chrome的v8引擎（解释器），安装到操作系统之上
8.插值语法
// 插值语法---》可以放 字符串，数字，数组，对象，简单的js语法，如果是标签，不会之间渲染
在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>数组：{{list1}}</p>---->{{list1[1]}}
<p>对象：{{obj1}}</p>---》{{obj1.name}}--->{{obj1['age']}}
<p>标签：{{link1}}</p>
<p>{{10+99}}</p>
<p>三目运算符：{{score>90?"优秀":"垃圾"}}</p>
</div>
</body>
<script>
// vm对象，管理了html中得div，在div中写vue的模板语法，指令
var vm = new Vue({
el: '#app',
data: {
name: 'lqz', // 字符串
age: 18, // 数值
list1: [1,2,3,4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
score:99
},
})
</script>
</html>
9.文本指令
//指令-->写在标签上，以v-开头的属性叫vue的指令
| v-text | 把字符串原封不动显示在标签上，如果有原字符，会覆盖 |
| v-html | 把标签字符选然后，显示在标签里 |
| v-show | 显示不显示，style="display: none;" |
| v-if | 显示与不显示，直接标签的删除 |
v-show 与v -if的区别
-v-show:标签还在，只是不显示（false),display:none
-v-if ：直接操作DOM，删除/插入/标签
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插值</title>
<script src="./vue.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>-->
</head>
<body>
<!-- 插值语法-->
<div id="app">
<h1>vue插值渲染变量</h1>
<p>名字: {{ name }}</p>
<p>age: {{ age }} </p>
<p>hobby: {{ hobby }}</p>
<p>第1个爱好:{{ hobby[1] }}</p>
<p >第2个爱好: {{ hobby[2] }}</p>
<p>wife: {{wife}}</p>
<p>妻子的名字: {{ wife.name }}</p>
<p>妻子的秘密: {{ wife.age }}</p>
<p>百度访问地址: {{ a }}</p>
<p>标签：{{a}}</p>
<a href=""></a>
<br>
<h1>文本指令 v-text</h1>
<p v-text="name">彭于晏</a>"></p>
<h1>文本指令 v-html</h1>
<span v-html="a"></span>
<h1>文本指令 v-show</h1>
<img v-show="c" src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" width="150" height="150">
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
name: 'lzl',
age: 19,
hobby: ['篮球','足球','乒乓球'],
wife: {name:'刘亦菲',age:38},
a: '<a href="http://www.baidu.com">点我</a>',
//指令系统
b:true,
c:false,
},
})
</script>
</html>
10.事件指令
#按钮，标签的事件---》单击事件，双击事件----》单击事件(点击)
#正常写法： v-on:click='函数'
#简单写：@click='函数' --》这种多
<!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>
<button v-on:click="handleShow">点我显示消失</button>
<div v-if='show'>
<img src="https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" alt="" width="300px"
height="300px">
</div>
<h1>事件指令函数带参数</h1>
<button @click="handleClick">函数需要参数，但是没传，默认会把event事件传入</button>
<br>
<button @click="handleClick1('lqz')">函数需要参数，但是传值了</button>
<br>
<button @click="handleClick2('lqz')">函数需要3参数，但是传了1个</button>
<br>
<button @click="handleClick3($event,'lqz')">函数需要2参数，一个事件，一个字符串</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('帅哥')
},
// 需要1个，传了一个，但是需要传数字，字符串，布尔，或变量
handleClick1(name) {
console.log(name)
},
// 需要3个参数，传了一个，没问题，后面俩都是 undefined
handleClick2(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
},
handleClick3(event,name){
console.log(event)
console.log(name)
}
}
})
// es5中
// var obj={'name':'lqz','age':19}
// var obj={name:'lqz',age:19}
// es6中
var name = 'lqz'
var age = 19
// var obj={name:name,age:age}
var obj = {
name, age, handleClick() {
}
}
</script>
</html>
11.属性指令
#标签有属性--》使用变量动态的替换属性
#v-bind:属性='属性值'
#简写成：属性名='属性值' --->这种多
# 简写成：
v-bind:属性名='变量' :属性名="变量"
练习题
2 点击按钮，换美女图片
<!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>
<button @click="handleClick">点我看美女</button>
<br>
<img v-bind:src="url" alt="" width="300px" height="300px">
<hr>
<button @click="handleChange">点我换美女</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">
我是div
</div>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
url: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
img_url: 'https://p.qqan.com/up/2022-8/202283919254843.jpg',
img_url2: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
imgList: ['https://img2.woyaogexing.com/2022/10/23/af963193e9fb67ee!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/22/95afdd5cd39d556d!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/21/f06c65142fe50c19!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/20/c0135f7e74050a74!400x400.jpg',
'https://img2.woyaogexing.com/2022/10/20/5972f09505ac681d!400x400.jpg'],
id_div:'xxx'
},
methods: {
handleClick() {
this.url = 'https://p.qqan.com/up/2022-8/202283919254843.jpg'
},
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() {
// 页面加载完，开启一个定时器，每隔3s干函数内容，函数里面在变化变量
setInterval(() => {
var i = Math.floor(Math.random() * this.imgList.length)
this.img_url2 = this.imgList[i]
}, 1000)
}
})
</script>
</html>
