Vue学习之旅-01
2024-04-29 17:52:39
Vue01
- 1. 初体验
- 2. 插值操作
- 3. 动态绑定属性
- 4. 计算属性
- 5. 事件监听
- 6. 条件判断
1. 初体验
- 初体验
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><h1>{{message}}</h1> <!-- 试一试 --><h2>{{name}}</h2> <!-- zh -->
</div><div>{{message}}</div> <!-- {{message}} --><script src="../js/vue.min.js"></script>
<script>//let(变量)/const(常量)const app = new Vue({el:'#app',//用于挂载要管理的元素data:{//定义数据message:'试一试!',name:'zh'}})
</script>
- 遍历.
<div id="app"><ul><li v-for="item in movies">{{item}}</li></ul>
</div><script>const app = new Vue({el:"#app",data:{message:'你好啊',movies:['火影忍者','海贼王','名侦探柯南']}})
</script>
- 计数器
<div id="app"><h2>当前计数：{{counter}}</h2>
<!-- <button v-on:click="counter++">+</button>-->
<!-- <button v-on:click="counter--;">-</button>--><button v-on:click="add">+</button><button v-on:click="sub">-</button>
</div><script>const app = new Vue({el:'#app',data:{counter: 0,},methods:{add:function () {this.counter++},sub:function () {this.counter--}}})
</script>
2. 插值操作
- Mustache语法
<div id="app"><h2>{{message}}</h2><h2>{{message}},Vue！</h2><!-- mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式 --><h2>{{firstName + lastName}}</h2><h2>{{firstName +' '+lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{counter * 2}}</h2>
</div><!-- 你好啊你好啊,Vue！kobebryantkobe bryantkobe bryant200
--><script>const app = new Vue({el: '#app',data: {message: '你好啊',firstName: 'kobe',lastName: 'bryant',counter: 100}})
</script>
- v-once指令
<div id="app"><h2>{{message}}</h2><!-- v-once:只渲染一次，不会随着数据的改变而重新渲染 --><h2 v-once>{{message}}</h2>
</div>
- v-html指令
<div id="app"><h2>{{url}}</h2><!-- v-html: 将内容用html的方式渲染出来 --><h2 v-html="url"></h2> <!-- 这里会出来一个百度一下的超链接 -->
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊',url: '<a href="http://www.baidu.com">百度一下</a>',}})
</script>
- v-text指令
<div id="app"><h2>{{message}},vue</h2><!-- 将内容填充到标签中，vue会被meeage中的内容替换 --><h2 v-text="message">vue</h2>
</div>
<!-- 你好啊,vue你好啊
-->
<script>const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>
- v-pre指令
<div id="app"><!-- 显示{{message}} --><h2 v-pre>{{message}}</h2>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊'}})
</script>
- v-cloak指令
<div id="app" v-cloak><h2>{{message}}</h2>
</div><script>//在vue解析之前，div中有一个属性v-cloak//在vue解析之后，div中没有一个属性v-cloaksetTimeout(function () {const app = new Vue({el: '#app',data: {message: '你好啊'}})},1000)
</script>
3. 动态绑定属性
- v-bind 的基本使用
<div id="app"><img v-bind:src="imgURL" alt=""><a v-bind:href="aHref">百度一下</a><!--语法糖的写法--><img :src="imgURL" alt=""><a :href="aHref">百度一下</a></div><script>const app = new Vue({el: '#app',data: {message: '你好啊',imgURL: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1595268220238&di=099c7272e13493fc60c84d1cd094b466&imgtype=0&src=http%3A%2F%2Fzbjquan.zbjimg.com%2Fforum%2F7niu%2F201809%2F28%2F175317az6j6wxrjsej171j.jpg',aHref: 'http://www.baidu.com'}})
</script>
- v-bind动态绑定class(对象语法).html
<style>.active{color: red;}</style><div id="app">
<!-- <h2 class="active">{{message}}</h2>-->
<!-- <h2 :class="active">{{message}}</h2>-->
<!--boolean为true时将类名赋值进去-->
<!-- <h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>--><h2 class="title" v-bind:class="{active:isActive,line:isLine}">{{message}}</h2><h2 class="title" v-bind:class="getClasses()">{{message}}</h2><button v-on:click="btnClick">按钮</button>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊',active: 'active',isActive: true,isLine: true},methods: {btnClick: function () {this.isActive = !this.isActive},getClasses: function () {return {active:this.isActive,line:this.isLine}}}})
</script>
- v-bind动态绑定class(数组语法).html
<div id="app"><h2 class="title" :class="[active,'line']">{{message}}</h2><h2 class="title" :class="getClasses()">{{message}}</h2>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊',active: 'aaa'},methods: {getClasses: function () {return [this.active,'line']}}})
</script>
- v-bind动态绑定style(对象语法)
<div id="app">
<!-- <h2 :style="{keg(属性名):value(属性值)}">{{message}}</h2>--><!--'50px'必须要加上单引号-->
<!-- <h2 :style="{'font-size':'50px'}">{{message}}</h2>-->
<!-- <h2 :style="{'font-size':finalSize}">{{message}}</h2>--><h2 :style="{'font-size':finalSize+'px',color:finalColor}">{{message}}</h2><h2 :style="getStyles()">{{message}}</h2></div><script>const app = new Vue({el: '#app',data: {message: '你好啊',finalSize: 100,finalColor: 'red'},methods: {getStyles: function () {return {'font-size':this.finalSize+'px',color:this.finalColor}}}})</script>
- v-bind动态绑定style(数组语法)
<div id="app"><h2 :style="[baseStyle,baseStyle1]">{{message}}</h2>
</div><script>const app = new Vue({el: '#app',data: {message: '你好啊',baseStyle:{backgroundColor:'red'},baseStyle1:{fontSize:'100px'}}})
</script>
4. 计算属性
- 计算属性的基本使用
<div id="app"><h2>{{firstName + ' ' + lastName}}</h2><h2>{{firstName}} {{lastName}}</h2><h2>{{getFullName()}}</h2><h2>{{fullName}}</h2>
</div><script>const app = new Vue({el: '#app',data: {firstName: '小',lastName: '李'},computed: {//计算属性fullName: function () {return this.firstName+' '+this.lastName}},methods: {getFullName(){return this.firstName+' '+this.lastName}}})
</script>
- 计算属性的复杂操作
<div id="app"><h2>总价格：{{totalPrice}}</h2>
</div><script>const app = new Vue({el: '#app',data: {books: [{id:10,name:'html',price:100},{id:11,name:'css',price:200},{id:13,name:'js',price:300}]},computed: {totalPrice: function () {let result = 0;for (let i = 0;i < this.books.length;i++){result += this.books[i].price}return result/*for(let i in this.books){}for(let book of this.books){}*/}}})
</script>
- 计算属性的setter和getter
- 计算属性内部有set和get方法
- 一般我们只用get方法，不用set方法
<div id="app"><h2>{{fullName}}</h2>
</div><script>const app = new Vue({el: '#app',data: {firstName: '小',lastName: '李'},computed: {//属性一般没有set方法，只读属性fullName: {get: function () {return this.firstName + ' ' + this.lastName}}}})
</script>
- 计算属性和方法的区别
- 计算属性有缓存机制，方法没有；
- 只要计算属性内相关依赖的值不发生改变，多次调用计算属性可以从缓存中获取值，不必重复计算；
- 方法每次调用都要重新执行一遍；
<div id="app"><h2>{{firstName}} {{lastName}}</h2><h2>{{getFullName()}}</h2><h2>{{fullName}}</h2>
</div><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {firstName: '小',lastName: '李'},methods: {getFullName: function () {return this.firstName + ' ' + this.lastName}},computed: {fullName: function () {return this.firstName + ' ' + this.lastName}}})
</script>
5. 事件监听
- v-on的使用。简写用@
<div id="app"><h2>{{counter}}</h2><!-- <button v-on:click="increment">+</button>-->
<!-- <button v-on:click="decrement">-</button>--><button @click="increment">+</button><button @click="decrement">-</button>
</div><script>const app = new Vue({el: '#app',data: {counter: 0},methods: {increment(){this.counter++},decrement(){this.counter--}}})
</script>
- v-on的参数问题
<div id="app"><!--1.事件调用的方法没有参数--><button @click="btn1Click()">按钮一</button><button @click="btn1Click">按钮一</button><!--2.在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的，这个时候Vue会默认将浏览器生产的event事件作为参数传入到方法--><button @click="btn2Click(123)">按钮二</button><button @click="btn2Click()">按钮二</button><!--3.在方法定义时，我们需要event对象，同时又需要其他参数--><button @click="btn3Click(123,$event)">按钮三</button><button>按钮四</button>
</div><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {btn1Click(){console.log('btn1Click')},btn2Click(abc){console.log('--------'+abc)},btn3Click(abc,event){console.log('++++',abc,event)}}})
</script>
- v-on的修饰符
<div id="app"><!--1.stop修饰符:停止冒泡--><div @click="divClick"><button @click.stop="btnClick">按钮</button></div><!--2.prevent修饰符的使用:阻止默认行为。提交行为不会发生，而是会执行submitClick方法--><br><form action="www.baidu.com"><input type="submit" value="提交" @click.prevent="submitClick"></form><br><!--3.监听某个键盘的键帽,@keyup.enter监听回车键--><input type="text" @keyup.enter="keyUp"><br><!--4..once修饰符的使用--><button @click.once="onceClick">点击</button>
</div><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊'},methods: {divClick(){console.log("divClick")},btnClick(){console.log("btnClick")},submitClick(){console.log("submitClick")},keyUp(){console.log("keyUp")},onceClick(){console.log("onceClick")}}})
</script>
6. 条件判断
- v-if和v-else-if和v-else的使用
<div id="app"><h2 v-if="score>-90">优秀</h2><h2 v-else-if="score>=80">良好</h2><h2 v-else-if="score>=60">及格</h2><h2 v-else>不及格</h2>
</div><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {score: 99}})
</script>
- v-show的使用
<div id="app"><h2 v-if="isShow" id="aaa">{{message}}</h2><!--直接就不在dom中了--><h2 v-show="isShow" id="bbb">{{message}}</h2><!--使用的时display:none-->
</div><script src="../js/vue.min.js"></script>
<script>const app = new Vue({el: '#app',data: {message: '你好啊',isShow: true}})
</script>
Vue学习之旅-01相关推荐
- Vue 学习 之 7.01 学习笔记
Vue 学习 之 7.01 学习笔记 1.还是复习前面的那个"品牌案例管理",但是数据不是静态写死哦,而是动态的管理,向数据库发送相关请求实现,因此,小节和昨天所学就是掌握Vu ...
- zynq的emio和axi_【ZYNQ7000学习之旅 - 01】EMIO练习
[ZYNQ7000学习之旅 - 01]EMIO练习 [ZYNQ7000学习之旅 - 01]EMIO练习 ZYNQ7000 EMIO练习参考 背景 准备 功能 生成XSA文件 编写APP 总结 xili ...
- 阿菜的Vue学习之旅（一）
阿菜的Vue学习之旅(一) 1.Vue的初步使用 2.关于MVVM架构的Vue设计 1.Vue的初步使用 刚刚开始接触Vue的时候,阿菜是这样写 html部分: <div id="me ...
- Vue学习之旅Part1：Vue的数据渲染语法和指令(插值表达式、v-cloak、v-text、v-html)
在Vue里 有好几种数据渲染的方法及相关指令 下面将一一介绍: 一.插值表达式 插值表达式是用两个花括号{{}}包裹属性 属性在Vue实例里定义: 通过Vue提供的指令即可很方便地将数据渲染到页面上 ...
- Vue学习之旅-02
Vue02 7. 循环遍历 8. v-model的使用 9. 组件化开发 10. 组件通信 11. 插槽 7. 循环遍历 v-for遍历数组 <div id="app"> ...
- Vue3学习之旅--Vue3高级语法补充-自定义指令，vue插件，Teleport......
文章目录 Vue3高级语法补充 自定义指令 认识自定义指令 实现方式一:默认实现 实现方式二:局部自定义指令 方式三:自定义全局指令 指令的生命周期 指令的参数和修饰符 自定义指令练习 时间格式化指令 ...
- Vue学习笔记01——Vue开发基础
一.Vue实例配置选项 选项 说明 data Vue实例数据对象 methods 定义Vue中的方法 components 定义子组件 computed 计算属性 filters 过滤器 el 唯一根 ...
- 猿创征文｜我的前端学习之旅【来自一名大四老学长的真情流露】
猿创征文 | 我的前端学习之旅 自我介绍 我浑噩的大一大二(是不是另一个你) 我的大三生活 大三上(学习过程.学习方法.推荐网站) 大三下(技术提升.荣誉证书.推荐比赛) 我与 CSDN 的机缘(从小 ...
- 是选择Keras还是PyTorch开始你的深度学习之旅呢？
点击上方"算法猿的成长",关注公众号,选择加"星标"或"置顶" 总第 135 篇文章,本文大约 7000 字,阅读大约需要 20 分钟 原文 ...
最新文章
- 十进制转十六进制（蓝桥杯）
- 一句话总结Windbg 32位版本和64位版本的选择
- Why is OFDMA a Magical Feature in the 802.11ax Standard?
- 一般线性模型和混合线性模型_线性混合模型如何工作
- RTX5 | 事件标志组03 - 线程同步（逻辑或）
- NoSuchMethodError: org.apache.avro.Schema.getLogicalType()Lorg/apache/avro/LogicalType；
- BEST定理：有向图欧拉回路个数（bzoj 3659: Which Dreamed It）
- python 2.7安装pandas失败
- infer的用法_infer运用实践
- 新浪云服务器配置说明（java+mysql）
- php 截图ppt文件,介绍ppt文件截图并插入
- Ubuntu下安装NS-3图文教程
- 第八章 组织结构设计与类型
- C++ opencv之像素值统计（minMaxLoc，meanStdDev）
- Component template should contain exactly one root element
- CSP - J 2020 T2 直播获奖
- CLion及Cmake安装教程
- Xutils3使用心得
- wacom linux 驱动下载,Drivers
- java如何链接到sql_java如何连接sql数据库?