Vue
关注
分享
扫一扫
腌咸鱼
这个作者很懒，什么都没留下…
展开
-
【学习笔记】20-v-for遍历数组和对象的学习
v-for用于遍历数组和对象一般服务器的数据接收会用到v-for的遍历，有三种遍历场景遍历对象的过程中，如果只获取一个值，那么获取到的是value获取key和value 格式(item,index)获取key、value和index 格式(item,key,index)示例代码 <div id="app" > <ul> <!--1.遍历对象的过程中，如果只获取一个值，那么获取到的是value--> <li v-for="item in ar原创 2020-09-21 17:44:31 · 244 阅读 · 0 评论 -
【学习笔记】19-v-show的学习和使用，以及v-if的对比
v-show的学习和使用v-show一般用在频繁的切换，如果添加判断，隐藏方式是添加display:none的样式v-if的判断隐藏方式，是不渲染示例代码 <div id="app" > <h2 v-if="isShow">我要不要显示呢？</h2> <h2 v-show="isShow">我要不要显示呢？</h2> <button type="button" @click="isShow = !isShow">点击我&l原创 2020-09-21 17:15:56 · 107 阅读 · 0 评论 -
【学习笔记】18-v-if、v-else的小案例
要求：点击切换按钮，邮箱登陆和用户登陆的输入框，相互切换代码示例 <div id="app" > <span v-if="isUser"> <label for="userinput">用户登陆</label> <input type="text" name="userinput" id="userinput" value="" placeholder="用户登录"/> </span> <span原创 2020-09-21 16:35:48 · 118 阅读 · 0 评论 -
【学习笔记】17-v-if、v-else、v-else-if的使用
Vue的逻辑判断常见的逻辑判断只有v-if和v-else，很少用到v-else-if，太多的逻辑判断，建议在conputed里进行代码示例<div id="app" > <h2 v-if="vif">{{message}}</h2> <h2 v-else>我是else展现出来的</h2> <!-- 常见的逻辑判断只有v-if和v-else --> <h2 v-if="score>90">优秀原创 2020-09-21 16:18:04 · 469 阅读 · 0 评论 -
【学习笔记】16-v-on的修饰符
v-on修饰的学习@click.stop //阻止冒泡事件@click.prevent //阻止默认事件的发生，例如submit的提交过程@keyup.enter //监听键盘某键的事件@click.once //只执行一次 <div id="app" @click="divClick">aaaaaa <button type="button" @click="btnClick">按钮1</button> <button type="原创 2020-09-21 15:37:39 · 69 阅读 · 0 评论 -
【学习笔记】15-v-on的传递参数时注意的问题
v-on需要传递参数时需要注意的问题1.当没有参数传递时，方法名称后面可以不加小括号2.当需要传递参数时，且只有一个参数需要传递，而没有进行传递，会默认输出浏览器的event对象3.当需要传递多个参数时，想要获取浏览器的event对象，需要在前面加$符号代码示例<div id="app"><button type="button" @click="btnClick1()">按钮1</button><!-- v-on事件监听的时候，需要传递参数，后面才会原创 2020-09-21 15:00:56 · 234 阅读 · 0 评论 -
【学习笔记】14-v-on的基本使用和语法糖
v-on的基本使用和语法糖v-on用于监听某项事件，在以后会经常用到示例<div id="app"> <div>{{counter}}</div> <!-- <button type="button" v-on:click="increment">+</button> --> <!-- <button type="button" v-on:click="decrement">-</button>原创 2020-09-21 14:24:59 · 283 阅读 · 0 评论 -
【学习笔记】13-计算属性的复杂操作
计算属性的复杂操作简单的数组操作，会用到计算属性里面，由于methods使用一次调用一次，没有缓存效率很低，所以在computed里计算示例<div id="app"> <h1>总价格：{{totalPrice}}</h1></div><script src="vue.js" type="text/javascript" charset="utf-8"></script><script type="text/jav原创 2020-09-18 13:49:28 · 141 阅读 · 0 评论 -
【学习笔记】12-计算属性的基本使用
计算属性的基本使用区别于methods的命名规范，一般不带有动词get，而是直接用示例<div id="app"> <h1>{{firstName}} {{lastName}}</h1> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1> <h1>{{fullName}}</h1>原创 2020-09-18 11:58:42 · 145 阅读 · 0 评论 -
【学习笔记】11-v-bind动态绑定Style（数组语法）
v-bind动态绑定style的数组语法在实战中用到的地方非常少，了解下就可以了示例<div id="app"> <h1 :style="[style1,style2]">{{message}}</h1></div><script src="vue.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">原创 2020-09-18 11:39:32 · 362 阅读 · 0 评论 -
【学习笔记】10-v-bind动态绑定Style（对象语法）
v-bind动态绑定style的对象语法改变某个页面时，需要根据不同页面，改变不同的背景颜色或者字体大小，会偶尔用到示例<div id="app"> <h1 :style="{fontSize : finalSize + 'px'}">{{message}}</h1> <h1 :style="getStyle()">{{message}}</h1></div><script src="vue.js" type="t原创 2020-09-18 11:29:19 · 203 阅读 · 0 评论 -
【学习笔记】09-v-bind动态绑定class（数组语法）
v-bind的动态绑定控制class（数组语法）v-bind动态绑定class也可以使用数组的形式绑定，但是不经常使用示例<div id="app"><h1 class="active">{{message}}</h1><h1 class="title" :class="getClass()">{{message}}</h1></div><script src="vue.js" type="text/javascr原创 2020-09-18 10:27:49 · 234 阅读 · 0 评论 -
【学习笔记】08-v-bind动态绑定class（对象语法）
v-bind的动态绑定控制class（对象语法）通过v-bind绑定class，实现交互示例 <style type="text/css"> .active{color: red;} </style> </head> <body> <div id="apt"> <h1 class="active">你好</h1> <h1 v-bind:class="{active:isActive原创 2020-09-17 15:01:43 · 131 阅读 · 0 评论 -
【学习笔记】07-v-bind的基本使用方法
v-bind的基本使用方法在标签内进行动态绑定，语法糖是冒号“：”示例 <div id="app"> <img src="{{Url_pic}}" /> <img src="Url_pic" /> <img v-bind:src="Url_pic" /> <img :src="Url_pic" > </div> <script src="vue.js"></script> <sc原创 2020-09-17 14:12:11 · 518 阅读 · 0 评论 -
【学习笔记】06-v-cloak的学习和示例
v-cloak的认识和使用屏蔽闪动，经常用到v-cloak，Vue解析后，会自动删除v-cloak属性示例 <style type="text/css"> [v-cloak]{ display: none; } </style> </head> <body> <div id="app" v-cloak> <h1>{{message}}</h1> </div> &l原创 2020-09-17 13:29:56 · 168 阅读 · 0 评论 -
【学习笔记】05-v-pre的学习和示例
v-pre的认识和使用v-pre用来屏蔽解析，保持原始样式和数据示例 <div id="app"> <h1>{{message}}</h1> <h1 v-pre>{{message}}</h1> </div> <script src="vue.js"></script> <script> const apt = new Vue({ el : '#app', da原创 2020-09-17 10:59:16 · 113 阅读 · 0 评论 -
【学习笔记】04-v-text的学习和示例
v-text的认识和使用除了mustache的语法使用，还可以用到v-text进行文本调用示例<div id="app"> <h1>{{message}},hello world</h1> <h1 v-text="message">hello，world</h1> </div> <script src="vue.js"></script> <script> const ap原创 2020-09-17 10:51:09 · 123 阅读 · 0 评论 -
【学习笔记】03-v-html的学习和示例
v-html的认识和使用 讲服务器端传回来的html格式，进行无损转换，所用到的指令示例： <div id="app"> <h1>{{url}}</h1> <h1 v-html="url"></h1> </div> <script src="vue.js"></script> <script> const apt = new Vue({ el : '#app',原创 2020-09-17 10:42:17 · 115 阅读 · 1 评论 -
【学习笔记】02-v-once的学习和使用
v-once的认识和使用 显示一次，无法进行二次修改，使用v-once示例：<div id="app"><h1>{{messages}}</h1><h1 v-once>{{messages}}</h1></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script> con原创 2020-09-17 10:28:53 · 124 阅读 · 0 评论 -
【学习笔记】01-Vue的初次相识
VUE初识mustache的认识｛｛message｝｝格式<div id="app"><h1>{{message}}</h1><h1>{{firstName + lastName}}</h1><h1>{{firstName + " " + lastName}}</h1><h1>{{firstName}} {{lastName}}</h1><h1>{{counter *原创 2020-09-17 10:07:02 · 64 阅读 · 0 评论