网站首页 > 基础教程 正文
学习大纲
为什么要学习Vue
- 传统开发&问题
在早期开发网站技术体系没有明确分工，前后端由一个开发工程师来完成，既要学习html、javascript、jquery等前端技术，开发速度和效率比较慢。
JQ有大量的DOM操作，vue有一个概念虚拟DOM 就是直接去内存中取
JQ没有统一模型不方便后期维护，vue是基于mvvm思想 数据统一管理在模型汇总
JQ有语法可以提取公共的html或js吗？vue有组件 vue可以减少代码冗余便于后期维护
而且在MVC模式兴起之后虽然有所改善，但是后端程序员还是避免不了套页面的工作。
- 解决：前后端分离
后端只需要提供接口数据给前端，后续的工作由前端人员实现数据展示和服务端交互。
这样真正实现前后端分离
Vue 是什么
- 简单概括：Vue是当下很火的一个JS库&框架（国人尤雨溪）
库： 一堆属性方法的集合，按需求调用
框架：针对业务提供的一套解决方案（N个库的集合） 并且制定了统一的开发规范
- 官方解释
小结
为什么要学习Vue：减轻后端压力，用来解决前后端分离问题。
什么是vue：就是用js写的一个库 或 框架
渐进式：你可以用一个库，也可以用它的全家桶（根据项目需求来）
M V模式
- 明确：MV*模式主要解决的问题就是View代码难以维护的问题
- 种类：MVC、MVP、MVVM
- MVC
Model模型 - 负责数据处理，
View视图 - 负责显示页面，
Controller控制器 - 负责调度使用哪个M和哪个V
- MVP（和MVC的区别V<=>M不会直接通信）
Model模型 - 负责数据处理，
View视图 - 负责显示页面，
Controller控制器 - 负责调动M和V（不要）
Presenter主持人 - 负责调度使用哪个M和哪个V（MVC中的Controller）
- MVVM
Model模型 - 负责数据处理，
View视图 - 负责显示页面，
ViewModel - 负责监控M数据变化同步到V
体验一下
<div id="app">
<!--
v必须在监控范围内写
语法：{{ data中的键 }}
作用：展示模型中的数据
-->
{{ msg }}
</div>
<!-- 步骤1：导入库 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 步骤2：创建vue对象
// vue可以统一管理数据 它有数据模型
// 按照MVVM思想开发
// M - 模型 model - 负责管理数据
// V - 视图 view - 展示数据
// VM - ViewModel - 负责监控m 自动同步到 v
// 创建vue对象 有一个实参 对象类型
let vm = new Vue({
// 声明监控范围（元素 element el）
el: "#app", //用CSS选择器
// 声明模型
data: {
msg: "展示数据"
}
})
</script>模版语法
<span>输出变量信息: {{ data }}</span>
<p>现实带有html格式的内容: <span v-html="data"></span></p>- 语法
插值：顾名思义就是在页面展示数据（插：插入，值：数据）
文本：{{ data中的键 }}
显示HTML数据（模型中的html代码能够被解析）：v-html="data中的键"
指令：就是通过v-开头的语法显示数据
动态参数（动态标签的属性值）：v-bind:属性名="data中键" 或简写 直接冒号
事件：v-on:事件类型="函数名" 或简写 直接@
注意：
1-函数名不能写小括号
2-函数默认不存在，你需要在vm中定义methods键
2.需求
需求1：定义模型变量uname=小明 age=18，url=http://www.baidu.com/
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>你猜我叫什么？ 答： {{uname}} </p>
<p>你猜我今年多少岁？答： {{age}} </p>
<p> 哥哥你年龄太大了，我要你回到18岁，实现age-870 代码：{{age-870}} </p>
<p>姓名反转显示，代码： {{uname.split('').reverse().join(',')}} </p>
<p>
姓名等于悟空超厉害，否则八戒还得努力呀！代码：
{{ uname == '悟空' ? '超厉害' : '八戒还得努力'}}
</p>
<p> 声明a标签href中的值使用模型数据url</p>
<p>
<a v-bind:href="url">点击跳转url</a>
<a :href="url">点击跳转url</a>
</p>
<p>声明button按钮，点击弹出：hello</p>
<input type="button" value="点我" v-on:click="fn1">
<input type="button" value="点我" @click="fn1">
<hr /><hr />
<p>显示模型中的html键（逻辑上）： {{html}}</p>
<p v-html="html"></p>
<!-- 注：用v-html数据会放到标签里面 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
//声明监控访问
el: '#app',
//2创建模型
data: {
uname:'小明',
age: 18,
url: 'http://www.baidu.com/',
html: '<b>你好呀</b>'
},
methods: {//脚下留心：写对象 因为要写多个方法
// 键就是函数名
// fn1:function(){}
// fn1:()=>{} es6 箭头函数
// fn1(){} es6 对象 属性和方法的简写
fn1() {
alert('hello，world')
}
}
})
</script>
</body>
</html>需求2：直接运行下述代码 实现需求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>你猜我叫什么？ 答： {{uname}} </p>
<p>你猜我今年多少岁？答： {{age}} </p>
<p> 哥哥你年龄太大了，我要你回到18岁，实现age-870 代码：{{age-870}} </p>
<p>姓名反转显示，代码： {{uname.split('').reverse().join(',')}} </p>
<p>
姓名等于悟空超厉害，否则八戒还得努力呀！代码：
{{ uname == '悟空' ? '超厉害' : '八戒还得努力'}}
</p>
<p> 声明a标签href中的值使用模型数据url</p>
<p>
<a v-bind:href="url">点击跳转url</a>
<a :href="url">点击跳转url</a>
</p>
<p>声明button按钮，点击弹出：hello</p>
<input type="button" value="点我" v-on:click="fn1">
<input type="button" value="点我" @click="fn1">
<hr /><hr />
<p>显示模型中的html键（逻辑上）： {{html}}</p>
<p v-html="html"></p>
<!-- 注：用v-html数据会放到标签里面 -->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
//声明监控访问
el: '#app',
//2创建模型
data: {
uname:'小明',
age: 18,
url: 'http://www.baidu.com/',
html: '<b>你好呀</b>'
},
methods: {//脚下留心：写对象 因为要写多个方法
// 键就是函数名
// fn1:function(){}
// fn1:()=>{} es6 箭头函数
// fn1(){} es6 对象 属性和方法的简写
fn1() {
alert('hello，world')
}
}
})
</script>
</body>
</html>3.小结
插值：顾名思义在视图插入模型中数据
文本数据：{{ data中的键 }} 或者 v-text="data中的键" （了解）
HTML数据：v-html="data中的键"
思考：v-html和v-text有什么区别？
回答：v-html能够解析模型中的标签 v-text仅仅原样输出
注意：只要是v-开头的都是vue指令
动态参数/标签的属性值动态也就是想要用模型数据
v-bind:属性名="data中的键"
简写
:属性名="data中的键" 推荐
事件
v-on:事件类型="函数名"
简写
@事件类型="函数名" 推荐
注意：
1-函数名 切记切记切记 不能写小括号
2-函数不存在必须在vm中声明methods键（统一用es6对象属性和方法的简写）
列表渲染（循环）
1、明确需求
在实际工作中，上图商品数据来源于数据库[ {},..., {} ]
数组中每一个对象就是一条商品数据
思考：将上述数据存到模型中，视图如何显示呢？
回答：循环遍历，通过v-for指令
循环-在生活中：不断重复做某件事得表现
循环-在编程中：按个获取【复合类型数组/对象】中的数据、数据获取完毕退出终止获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<div
v-for="item in goodsList"
>{{item.name}}{{item.id}}</div>
<div
v-for="(item,i) in goodsList"
>{{item.name}}{{i}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1创建VM
new Vue({
//声明监控访问
el: '#app',
//2创建模型
data: {
//定义循环变量
goodsList:[
{id:1,name:'商品名称',price:12},
{id:2,name:'商品名称',price:13},
{id:3,name:'商品名称',price:14},
{id:4,name:'商品名称',price:15}
]
},
methods: {
}
})
</script>
</body>
</html>2.语法分析
v-for="数据 in data中键" 数据一般是数组中一个个对象
v-for="(数据, 索引/下标) in data中键"
条件渲染
1.明确需求
淘宝购物车：有商品-会显示商品数量，没商品-消失
思考：将上图购物车商品数据cartNum存到模型中，如何实现上述效果
回答：判断，通过v-if指令
2.语法分析
v-if="条件"
v-else-if="条件"
...
v-else
3.需求
- 需求1：实现购物车数量需求
- 需求2：判断成绩>=90优秀>=80一般>=70良好>=60及格>=0不及格，其他不行
4.代码实现
<div id="app">
<h1>直接显示cartNum模型数据</h1>
<div>{{ cartNum }}</div>
<h1>仿淘宝判断是否显示</h1>
<div v-if="cartNum">购物车{{ cartNum }}</div>
<div v-else>购物车</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 声明监控范围
el: "#app",
// 声明模型数据
data: {
// cartNum: 666
cartNum: 0
}
})
</script>- 判断成绩>=90优秀>=80一般>=70良好>=60及格>=0不及格，其他不行
<div id="app">
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 80">一般</div>
<div v-else-if="score >= 70">良好</div>
<div v-else-if="score >= 60">及格</div>
<div v-else-if="score >= 0">不及格</div>
<div v-else>你有瑕疵，你不行</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 声明监控范围
el: "#app",
// 声明模型数据
data: {
// 需求2：判断成绩>=90优秀>=80一般>=70良好>=60及格>=0不及格，其他不行
score: 5
}
})
</script>v-show
说明：通过v-if和v-show都可以实现判断
区别1：v-if控制DOM 移除标签，v-show控制css隐藏显示
区别2：v-if语法更强 else if 和 else
事件处理
事件就是用户和网页之间的交互
1.语法分析
- 语法： v-on:事件类型="处理函数"
- 简写：@事件类型="处理函数"
注意：
1：处理函数不能写小括号
2：函数不在，需要在vm中定义methods （切记：es6 对象的 属性和方法简写）
2.需求
需求1：点击按钮弹出h5@qf（写函数）
需求2：显示data中的num键数据，通过按钮控制+/-（写函数）
需求3：通过按钮+（直接执行js代码更新数据）
2.代码实现
<div id="app">
<button @click="fn1">点我弹QF</button>
<h1>{{num}}</h1>
<button @click="add">加</button>
<button @click="del">减</button>
<button @click="num=num+1">直接操作模型</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 声明监控范围
el: "#app",
// 声明模型数据
data: {
num: 6
},
// 声明普通方法
methods: {
// fn1: function(){}
// fn1: () => {}
fn1(){
alert('h5@qf')
},
add() {
// 获取：this.data中的键
// 修改：this.data中的键 = 值
this.num += 1 // this.num = this.num + 1
},
del() {
this.num -= 1
}
}
// 需求1：点击按钮弹出h5@qf（写函数）
// 需求2：显示data中的num键数据，通过按钮控制+/-（写函数）
// 需求3：通过按钮+（直接执行js代码更新数据）
})
</script>3.事件修饰符
概念：名词
作用：vue提供了事件修饰符，可以修改默认的事件触发
<style>
.grandfather {
width: 300px;
height: 300px;
background: yellow;
}
.father {
width: 200px;
height: 200px;
background: green;
}
.son {
width: 100px;
height: 100px;
background: red;
}
</style>
<div id="app">
<h1>.stop 阻止冒泡</h1>
<div class="grandfather" @click="grandfather">
<div class="father" @click="father">
<div class="son" @click.stop="son"></div>
</div>
</div>
<h1>.prevent阻止默认动作</h1>
<a href="http://baidu.com" @click.prevent>点击进入百度</a>
<h1>.capture 打乱冒泡</h1>
<div class="grandfather" @click.capture="grandfather">
<div class="father" @click="father">
<div class="son" @click="son"></div>
</div>
</div>
<h1>.self 阻止冒泡（除非自身触发）</h1>
<div class="grandfather" @click="grandfather">
<div class="father" @click.self="father">
<div class="son" @click="son"></div>
</div>
</div>
<h1>.once 仅触发一次</h1>
<button @click.once="fn">悟空</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 声明监控范围
el: "#app",
// 声明模型数据
data: {
},
// 声明普通方法
methods: {
fn() {
console.log('妖怪，快放了我师傅')
},
grandfather(){
console.log('this is grandfather')
},
father(){
console.log('this is father')
},
son(){
console.log('this is son')
}
}
})
</script>4.按键修饰符
场景
上述用户输入完毕账号密码后，直接回车相当于按了登录按钮
思考：如何实现
解决：监听键盘事件&触发的键- 传统：设置键盘事件onkeyup -> 判断用户按得是哪个键 -> 如果enter就提交表单
- 现在：通过vue语法 @事件类型.键盘修饰符=“方法名”
如下练习
<div id="app">
<input
type="text"
@keyup.enter="fn1"
@keyup.space="fn2"
@keyup.delete="fn3"
/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
// 声明监控范围
el: "#app",
// 声明模型数据
data: {
},
// 声明普通方法
methods: {
fn1() {
console.log('this is enter')
},
fn2() {
console.log('this is space')
},
fn3() {
console.log('this is delete')
}
}
})
</script>总结
事件：用户和网页之间的交互
事件三大组成：事件源、事件类型、事件处理函数
vue中事件语法
v-on:事件类型="函数名"
@事件类型="函数名"
留心1：函数名不加小括号，除非传递参数
留心2：函数需要在vm的methods键中定义
vue中事件修饰符
@事件类型.修饰符="函数名"
修饰符种类
.stop阻止冒泡
.prevent阻止默认动作
.self阻止冒泡（除本身）
.once 仅触发一次
.capture（打乱冒泡）
.passive（优化直接告诉浏览器没有阻止默认动作）
vue按键修饰符
@事件类型.修饰符="函数名"
修饰符种类：delete、enter、space等 也可以写数字
猜你喜欢
- 2024-12-19 管理系统-UniApp开发相关技巧及注意点
- 2024-12-19 前端图片延迟加载详细讲解 梦见擦窗户框
- 2024-12-19 如何使用 JavaScript 导入和导出 Excel XLSX
- 2024-12-19 XMLHttpRequest VS. Fetch, 谁才是 2019 最适合的 AJAX 技术?
- 2024-12-19 学习下ECharts 异步加载数据 echarts按需加载
- 2024-12-19 @HR，常见 IT 招聘术语大全(建议收藏)
- 2024-12-19 百度工程师教你玩转设计模式(单例模式)
- 2024-12-19 Cesium 两种方式加载 Geoserver服务 WMTS以及WMS、WFS、KML资源图层
- 2024-12-19 Shiny Web开发从入门到放弃 web开发视频教程
- 2024-12-19 手把手详细教你优化CSS提高网站加载速度的21种方法汇总【实践】
- 最近发表
- 标签列表
-
- gitpush (61)
- pythonif (68)
- location.href (57)
- tail-f (57)
- pythonifelse (59)
- deletesql (62)
- c++模板 (62)
- css3动画 (57)
- c#event (59)
- linuxgzip (68)
- 字符串连接 (73)
- nginx配置文件详解 (61)
- html标签 (69)
- c++初始化列表 (64)
- exec命令 (59)
- canvasfilltext (58)
- mysqlinnodbmyisam区别 (63)
- arraylistadd (66)
- node教程 (59)
- console.table (62)
- c++time_t (58)
- phpcookie (58)
- mysqldatesub函数 (63)
- window10java环境变量设置 (66)
- c++虚函数和纯虚函数的区别 (66)