网站首页 > 技术文章 正文
初学Vue(三) -- 生命周期、过滤器、监听属性、计算属性
vue - 国人开发制作的
类似于 view 的发音
vue经过了几次大的版本波动
0.x 0.6版本
1.x 版本
2.x 版本 - 现在常用的
为什么要介绍版本改动呢,因为不同版本语法和用法有差别,用起来比较麻烦
react 因为版权原因,导致百度等企业转用vue,导致vue突然火起来,也有支持国人的成分,当然其中的也缺不了它的确好用。
完整版演示代码
正式部分
vue学习建议先学会js,json
有的人觉得vue或angular不够jquery方便,首先,vue和angular是数据驱动的,而jquery是事件驱动的,也就是说用jquery需要想着给赋予事件,而vue与angular只要想着数据怎么变化就行了。
vue1.0下载
vue2.0下载
vue使用
html部分:
//首先当然是引入vue.js文件
<script src="vue.js"></script>
<body>
//vue标准是要用两对花括号圈住数据名的
{{msg}}
<body>
js部分:
//使用vue要先new 一个vue对象出来传入json格式的数据
<script>
new Vue({
//作用域:el - element缩写
el:'body',
//输出的数据
data:{
msg:'hello vue!',
}
})
</script>
{{}} -> 必须在作用域里面放入输出的模板,模板里面放入data里面你自己定义的变量
注意:只有ie8 以上的浏览器才能兼容vue
如何选取class或id为作用域
<div class="myDiv">
{{msg}}
</div>
<script>
new Vue({
//这里选区类与id是与jquery的方式是一样的,id的话就是#myDiv
el: '.myDiv',
data: {
msg:'hello vue!',
}
})
</script>
常用指令
类似于angular 的常用指令有 ng-show /ng-repeat,vue当然也有。
- v-show:类似于display,true就是显示false就是隐藏
<style>
div{
width: 200px;
height: 200px;
background: black;
}
</style>
<div v-show='false'></div>
<script>
//这里定义作用域是必须的,使用vue语句如果不定义作用域是不会起作用的
new Vue({
el:'body',
})
</script>
<style>
div{
width: 200px;
height: 200px;
background: black;
}
</style>
<div v-show='dis'></div>
<script>
new Vue({
el:'body',
//也可以利用数据传输来使用,更加灵活
data:{
dis:false,
}
})
</script>
- v-for:循环输出数组或json数据
<div v-for='i in arr'>{{i}}{{$index}}</div>
<div v-for='i in json'>{{i}}</div>
<div v-for='(key,value) in json'>{{key}}=>{{value}}</div>
<div v-for='i in json'>{{$key}}=>{{i}}</div>
<script>
new Vue({
el:'body',
data:{
//这是个字符串数组
arr:['a','b','c'],
json:{
bill:18,
bill2:21,
bill3:24
}
}
})
</script>
- v-for: {{index}} -> 索引值,{{key}} -> key值因为json是键值对,可以理解为数组的索引与值的关系,所以可以用不同方式访问。{{index}}可以进行计算 => {{index+10}} 从10开始计数
v-model:双向绑定 -- 数据和输出绑定
<body>
<input type="text" v-model='msg'>
{{msg}}
<script>
new Vue({
el:'body',
data:{
msg:'',
}
})
</script>
Vue事件书写区
<style>
div{
height: 100px;
width: 100px;
background:black;
}
</style>
<input type="button" v-on:click='change' value="change">
<div v-show='dis'></div>
<script>
new Vue({
el:'body',
data:{
dis:true,
},
//vue 事件区域,所有事件控制写在这里
methods:{
change:function() {
this.dis=!this.dis;
}
}
})
</script>
- v-on有简写形式@ ,可以直接把v-on替换为@,@click='change'。
事件对象:event
- 查看事件对象这些演示里面的html部分关于body与html的样式设置是必须的,不然body与html会按内容的大小填充,而不是布满整个页面
html部分:
//这里是必须设置这个样式,不然body的大小是根据页面内容调整大小的
<style>
body,html{
height: 100%;
width: 100%;
}
</style>
<body @click='show'>
<script>
new Vue({
el:'body',
methods:{
//事件对象,如果传参只有一个,默认就是事件对象,如果有多个参数传入,那么事件对象就是$event
show:function(e){
console.log(e);
}
}
})
</script>
- `@click="show"是可以传递参数给事件的,当它传递参数时,事件处理的形参不再默认为是时间对象,当我们传递参数给事件又想看事件对象时可以用$event
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
</style>
<body @click='show(10,event)'>
js部分:
<script>
new Vue({
el:'body',
methods:{
show:function(e,$event){
console.log(e,event);
}
}
})
</script>
事件冒泡:事件冒泡的三种阻止方法
- 先来看下事件冒泡没有阻止的情况这些演示里面的html部分关于body与html的样式设置是必须的,不然body与html会按内容的大小填充,而不是布满整个页面
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
div{
height: 100px;
width: 100px;
background: black;
}
</style>
<body @click="myBody">
<div @click="myDiv"></div>
js部分:
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>
- event.cancelBubble=true;
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
div{
height: 100px;
width: 100px;
background: black;
}
</style>
<body @click="myBody">
<div @click="myDiv"></div>
js部分:
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
event.cancelBubble=true;
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>
- event.stopProgation();
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
div{
height: 100px;
width: 100px;
background: black;
}
</style>
<body @click="myBody">
<div @click="myDiv"></div>
js部分:
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
event.stopProgation();
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>
- 直接在click后接.stop其中,上面两个event都是原生方法,所以虽然能用,但是还是不够方便,所以这里使用vue方法来
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
div{
height: 100px;
width: 100px;
background: black;
}
</style>
<body @click="myBody">
<div @click.stop="myDiv"></div>
js部分:
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>
阻止默认事件 -- 两种默认事件阻止方式
- event.preventDefault();这个是原生js方法,能用但是也不够vue方法方便
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
</style>
<body @click="myBody">
js部分:
<script>
new Vue({
el:'body',
methods:{
myBody:function(){
event.preventDefault();
alert('我右键了');
}
}
})
</script>
- @click.prevent="";
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
</style>
<body @click.prevent="myBody">
js部分:
<script>
new Vue({
el:'body',
methods:{
myBody:function(){
alert('我右键了');
}
}
})
</script>
键盘事件 -- 键盘监控事件利用keydown/up来监控用户按下了什么按键
- 键盘监控事件
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
</style>
<body @keydown="mybody">
js部分:
<script>
new Vue({
el:'body',
methods:{
mybody:function(){
alert('我按键盘了');
}
}
})
</script>
- event.keyCode监控用户按键的ASCII码,可以通过查看keyCode来赋予不同按键不同事件,例如通过console.log(event.keyCode);可以看到按键A的键值是65,那么我们可以设置只有当按下A键时才显示的事件@keydown.65等效于if(e.keyCode==65)
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
</style>
<body @keydown.65="mybody">
js部分:
<script>
new Vue({
el:'body',
methods:{
mybody:function(){
alert('我按了A键');
}
}
})
</script>
- 可以组合键使用
html部分:
<style>
body,html{
height: 100%;
width: 100%;
}
</style>
<body @keydown.65.66.67="mybody">
js部分:
<script>
new Vue({
el:'body',
methods:{
mybody:function(){
alert('我按了abc键');
}
}
})
</script>
- 上一篇: 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- 下一篇: 看完就懂的前端拖拽那些事
猜你喜欢
- 2024-11-21 技术分享 | 测试平台开发-前端开发之Vue.js 框架(一)
- 2024-11-21 新手自学前端开发的六个阶段
- 2024-11-21 Vue Shop Vite:轻量级前端开发的新神器
- 2024-11-21 实战 | 基于Vue语言的企业级前端开发框架Hui的应用研究
- 2024-11-21 前端图形学实战:从零开发几何画板(vue3 + vite版)
- 2024-11-21 循序渐进Vue+Element前端开发(14)—根据ABP后端接口实现前端界面
- 2024-11-21 1.8K Star!Cool-Admin-Vue:AI编码+流程编排,重新定义后台开发
- 2024-11-21 VUE3前端开发入门系列教程三:VITE热更新配置及WSL填坑
- 2024-11-21 后端Springboot+前端Vue开发的角色权限管理系统,源码免费分享
- 2024-11-21 Vue 非常实用的自定义指令
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 602℃几个Oracle空值处理函数 oracle处理null值的函数
- 594℃Oracle分析函数之Lag和Lead()使用
- 582℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 579℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 574℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 567℃【数据统计分析】详解Oracle分组函数之CUBE
- 554℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 548℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)