Vue初识,vue的插值语法,vue指令之文本指令,vue指令之事件指令, vue指令之属性指令
Ⅰ Vue初识
【一】前端的发展史
# 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES13)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
# 2 Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
# 3 单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
index.html
login.html
# 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端，web
java：sun--->oracle甲骨文收购了--->收费-->商业需要授权
openjdk
毕昇jdk
# 8 在Vue框架的基础性上 uni-app：一套编码 编到10个平台
# 9 在不久的将来 ，前端框架可能会一统天下
【二】vue介绍
- 是一个js框架
【1】什么是vue
# --->用于构建用户界面的js框架
Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任
【2】渐进式框架
渐进式:可以一点一点地使用它，只用一部分，也可以整个工程都使用它
# 渐进式 JavaScript 框架 易学易用，性能出色，适用场景丰富的 Web 前端框架
-可以项目的一部分使用 也可以全项目使用
-单页应用 (SPA)：signal page application
-整个vue项目，只有一个 html页面
【3】网站
【4】版本选择（vue2--vue3）
- vue2：少量vue2
- vue3：公司内 vue3多
【5】Vue特点
易用
- 通过 HTML、CSS、JavaScript构建应用
灵活
- 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效
- 20kB min+gzip 运行大小
- 超快虚拟 DOM
- 最省心的优化
【6】单文件组件
# 单文件组件
-一种类似 HTML 格式的文件来书写 Vue 组件，它被称为单文件组件 xx.vue
-英文名字是Single-File Components:SFC
-Vue 的单文件组件会将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里
【7】 API风格
# API风格
-组合式：vue3使用它，也兼容配置项API
-配置项API：vue2使用它
【8】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来编写
# M-V-VM 架构
-MTV架构风格：Django，本质也是MVC
-Model：数据层-->orm-->表模型
-T：template 就是V ，模板，用户界面
-V：视图层 django的V+路由= c层:controller控制层
-MVC架构风格：后端开发的架构风格
-Model：数据层-->orm-->表模型
-V：view视图层，模板，用户界面
-C:controller控制层：控制逻辑，判断，循环
-MVVM：vue的架构模式
M：model数据层 js控制
v：View视图层 用户看到的页面
js的dom操作--->实现 M和V的交互--->原生js操作dom很麻烦
jquery-->方便js操作dom-->很多年前，jquery非常火
vm：view-model层 介于 view和 Model之间 vue编写的一层--->实现 只要数据发生变化，页面就跟着变，只要页面发生变化，js数据页变
响应式，以后不用操作dom了，只需要动js的变量即可
-MVP：移动端开发
# 渐进式，构建用户界面的js框架，单文件组件SFC,单页面应用：SPA, API 风格:组合式，选项式，MVVM
【9】组件化开发、单页面开发
组件化开发
- 类似于DTL中的
include，每一个组件的内容都可以被替换和复用
单页面开发
- 只需要1个页面，结合组件化开发来替换页面中的内容
- 页面的切换只是组件的替换，页面还是只有1个
index.html
【三】vue初体验（vue2,vue3）
【1】 vue开发，选择编辑器
-vscode：免费
-webstorm：jetbrains公司专门用来开发前端的
-不正经前端开发：goland，pycharm，IDEA开发vue
【2】 jetbrains全家桶
-IDEA-->为java开发者定制的
-继续开发出了全家桶：pycharm，goland，clion，phpstorm，webstorm
-pycanrm-->装vue插件-->跟webstorm一样了
【3】 vue2 初体验
-一部分用vue--->src方式：cdn引入，本地引入
-vue项目 install 安装方式
- 在pycharm上使用
（1）引入方式
1. CDN的方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
2.下载后导入
其实就是直接在浏览器中打开https://cdn.jsdelivr.net/npm/vue/dist/vue.js，然后复制下来，创建一个js文件再粘贴进去
<script src="./js/vue.js"></script>
- src方式：cdn引入，本地引入
- 也可以把源码保存到本地再引用
- html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js2/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
name:"hjj"
}
})
</script>
</html>
【4】解释型的语言是需要解释器的
- js就是一门解释型语言，只不过js解释器被集成到了浏览器中
- 所以，在浏览器的Console中输入命令，就和在cmd中输入python后，进入交互式环境一样
nodejs：一门后端语言
- 把chrome的v8引擎（解释器），安装到操作系统之上
【5】 vue3 初体验
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- vue2与vue3略有不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js3/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
<span></span>
</div>
</body>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const name = ref('zzq')
return {
name
}
}
}).mount('#app')
</script>
</html>
Ⅱ vue的插值语法
语法：{{ 变量、js语法、三目表达式 }}
# 补充：三目运算符语法
var a=条件?'':''
例如 <p>三目运算符：{{age>=18?"成年":"未成年"}}</p>
# 2 插值语法中 可以放 变量 简单运算 三目运算符 函数()
# 3 标签字符串，无法渲染成标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
<p>渲染字符串：{{name}}</p>
<p>渲染数字：{{age}}</p>
<p>渲染数组：{{list1}}--->{{list1[1]}}</p>
<p>渲染对象：{{obj1}}--->{{obj1.name}}</p>
<p>渲染标签字符串：{{link1}}</p>
<p>简单js语法：{{9+9}}</p>
<p>简单js语法：{{age+9}}</p>
<p>简单js语法：{{name+'_NB'}}</p>
<p>三目运算符：{{age>=18?"成年":"未成年"}}</p>
<p v-></p>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'silence',
age: 25, // 数值
list1: [1, 2, 3, 4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>'
},
})
</script>
</html>
Ⅲ vue指令之文本指令
# 1 vue 指令：放在标签上，以v-开头的，都是vue的指令，每个指令有特殊的用途
# 2 文本指令
v-html 让HTML渲染成页面
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示
| 指令 | 释义 |
|---|---|
| v-html | 让HTML渲染成页面 |
| v-text | 标签内容显示js变量对应的值 |
| v-show | 放1个布尔值：为真 标签就显示；为假 标签就不显示 |
| v-if | 放1个布尔值：为真 标签就显示；为假 标签就不显示 |
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="./js2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>v-html使用</h1>
<h2 v-html="name"></h2>
<h2 v-html="link1"></h2>
<h1>v-text使用</h1>
<h2 v-text="name"></h2>
<h2 v-text="link1"></h2>
<h1>v-show使用</h1>
<img src="./img/1.jpg" alt="" v-show="is_show" height="80px" width="80px">
<h1>v-if使用</h1>
<h3 v-if="is_show_h3">看到我了</h3>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'silence',
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>',
is_show: true,
is_show_h3: true,
},
})
</script>
</html>
【二】v-show使用
- v-show：标签还在，只是不显示了（
display: none）
- display: none
【三】v-if使用
- 是真删除，而不是隐藏
Ⅳ vue指令之事件指令
| 指令 | 释义 |
|---|---|
| v-on | 触发事件（不推荐） |
| @ | 触发事件（推荐） |
| @[event] | 触发event事件（可以是其他任意事件） |
# 1 事件指令
-js中有很多事件：点击，双击，滑动，滚动。。。。
-这么多事件中，只有点击事件用的最多
# 2 点击事件
指令 释义
v-on: 触发事件（不推荐） v-on:click='函数名' --->定义在methods中
@ 触发事件（推荐） @click='函数名' --->定义在methods中 # v-on:click可以缩写成@click
@[event] 触发event事件（可以是其他任意事件）
【一】点击事件–>点击隐藏显示图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件指令</h1>
<img src="./img/1.jpg" alt="" v-show="is_show" height="380px" width="380px">
<br>
<!-- <button v-on:click="handleClick">点击-显示或隐藏</button>-->
<!-- v-on:click可以缩写成@click-->
<button @click="handleClick">点击-显示或隐藏</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
age:10,
is_show: true,
},
methods:{
handleClick:function (){
// 把data中is_show 取反
// this代表的是 vm
this.is_show=!this.is_show
},
}
})
</script>
</html>
【二】事件指令-click-函数传参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>事件指令-click-函数传参数</h1>
<!-- <button @click="handleDemo1(10,age)">handleDemo1</button>-->
<!-- <button @click="handleDemo1(10,age,19)">handleDemo1-多的参数会忽略</button>-->
<!-- <button @click="handleDemo1(age)">handleDemo1-少的参数会-是undefined</button>-->
<!-- <button @click="handleDemo1">如果不传-函数有变量接收-第一个参数是event事件对象</button>-->
<button @click="handleDemo1($event,10)">传event事件对象，又要传变量</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
age:10,
is_show: true,
},
methods:{
handleClick:function (){
// 把data中is_show 取反
// this代表的是 vm
this.is_show=!this.is_show
},
// handleDemo1:function (a,b){
// console.log(a)
// console.log(b)
// console.log(a+b)
// },
handleDemo1:function (event,a){
console.log(event)
console.log(a)
},
}
})
</script>
</html>
Ⅴ vue指令之属性指令
| 指令 | 释义 |
|---|---|
| v-bind | 直接写js的变量或语法（不推荐） |
| : | 直接写js的变量或语法（推荐） |
# 1 属性指令
-标签都有属性 name id src link href...
-属性绑定一个变量--->变量变，属性也变
# 2 如何使用
v-bind: 直接写js的变量或语法（不推荐）
: 直接写js的变量或语法（推荐）
【一】在控制台修改属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>属性指令</h1>
<!-- <img v-bind:src="img" width="100px" v-bind:height="height">-->
<img :src="img" width="100px" v-bind:height="height">
<button @click="handleChange">点我换一张</button>
<br>
<a :href="link">点我看美女</a>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
height:'120px',
img:'https://img1.baidu.com/it/u=2156151471,2963783761&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1731',
link:'http://www.baidu.com'
},
methods:{
handleChange:function (){
this.img='./img/2.jpg'
}
}
})
</script>
</html>
【一】在控制台修改图片大小
【二】在控制台修改链接地址
- 点击后跳转博客园
