学习笔记||使用Vue时踩过的坑2.0
6.Vue指令之v-show篇
v-show的功能，其功能类似于v-if
1、判断某个元素是否显示或隐藏
<el-button v-show="list.power == 1" @click="toUpload" class="toUpload" type="primary">去上传<i class="el-icon-upload el-icon--right"></i></el-button>
通过接口里的参数list.power是否等于1，如果等于1，则为“true”，否则为“false”，然后v-show指令，等于true的时候显示，false的时候隐藏。
2、三目运算符判断
<a class="warn" v-show="true ? item.ai != null : item.ai == null" :href="'http://172.168.8
7.Vue指令之v-cloak 的用法
在使用{{}}展示或更新页面数据时：当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式（上面页面中的{{msg}}），然后才看到data中的值（欢迎Vue!）------->即所谓的闪烁问题！
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="https://unpkg.com/vue/dist/vue.js"></script>
10 </head>
11 </head>
12
13 <body>
14
15 <div id="app">{{msg}}</div>
16
17 <script>
18 new Vue({
19 el: '#app',
20 data: {
21 msg: '欢迎Vue!'
22 }
23 })
24 </script>
25 </body>
26
27 </html>
解决方法：
（1）使用v-cloak指令，然后为其设置css样式display:none;
说明：但有时添加完毕后变量仍会显示（即闪烁问题没解决），这是怎么回事呢？原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，所以最好再添加一个 !important ，将其优先级设置为最高，防止被其他优先级高的dispaly:none样式所覆盖。
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="https://unpkg.com/vue/dist/vue.js"></script>
10 </head>
11 <style>
12 [v-cloak]{
13 display: none;
14 }
15 </style>
16 </head>
17
18 <body>
19
20 <div id="app" v-cloak>{{msg}}</div>
21
22 <script>
23 new Vue({
24 el: '#app',
25 data: {
26 msg: '欢迎Vue!'
27 }
28 })
29 </script>
30 </body>
31
32 </html>
（2）使用v-text解决
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 <script src="https://unpkg.com/vue/dist/vue.js"></script>
10 </head>
11 </head>
12
13 <body>
14
15 <div id="app" v-text="msg">￥元</div>
16
17 <script>
18 new Vue({
19 el: '#app',
20 data: {
21 msg: '100'
22 }
23 })
24 </script>
25 </body>
26 </html>
最后输出的结果为：100
8.Vue中的@blur事件
@blur 是当元素失去焦点时所触发的事件
1 <template>
2 <div>
3 ============================61、@blur 事件的使用=========================
4 <!--
5 @blur 当元素失去焦点时触发blur事件
6 -->
7 <div>
8 <input type="text" placeholder="请输入内容" @blur="blur"/>
9 </div>
10
11 </div>
12 </template>
13
14 <script>
15 export default {
16 name: "@blur_61",
17 methods:{
18 blur(){
19 console.log("blur事件被执行了")
20 // blur事件被执行了
21 }
22 }
23 }
24 </script>
25 </tempalte>
9.vue---如何在一个页面调用另一个页面的methods
被调用的代码块：
1 <!-- 在这里创建组件，在index.vue里引用组件 -->
2 <template>
3 <view>
4 <h1 @tap="tap1">{{title}}</h1>
5 <div>{{content}}</div>
6 </view>
7 </template>
8
9 <script>
10 export default {
11 props:{
12 title:{
13 type:String,
14 default:"title"
15 },
16 content:{
17 type:String,
18 default:"content"
19 }
20 },
21 data() {
22 return {
23
24 };
25 },
26 methods:{
27 tap1:function(){
28 console.log(1);
29 this.$emit('tap1',this.title)
30 /* 这个函数用以传递组件的参数给它的调用者,第一个参数是函数名称,第二个参数是变量名,若有多个变量,可采用数组的形式传递 */
31 }
32 }
33 }
34 </script>
35
36 <style>
37
38 </style>
调用的代码块：
1 <template>
2 <view class="">
3 <mycomponent title="hi" content="content....." @tap1="tap"></mycomponent>
4 <!-- 可以在标签中直接对组件属性赋值 --> <!-- 父级可以使用@函数名的方式监听子组件 -->
5 </view>
6 </template>
7
8 <script>
9 import mycomponent from "@/components/mycomponent.vue"
10
11 export default{
12 data(){
13 return {
14 title:"Hello..."
15 }
16 },
17 onload(){
18
19 },
20 methods:{
21 tap:function(e){
22 console.log(e)
23 }
24 },
25 components:{mycomponent}
26 }
27 </script>
最终输出结果：
hi
content....
控制台：
10.vue中methods一个方法调用另外一个方法
vue在同一个组件内；
methods中的一个方法调用methods中的另外一个方法
可以在调用的时候 this.$options.methods.test2();
this.$options.methods.test2();一个方法调用另外一个方法；
1 new Vue({
2 el: '#app',
3 data: {
4 test:111,
5 },
6 methods: {
7 test1:function(){
8 alert(this.test)
9 },
10 test2:function(){
11 alert("this is test2")
12 alert(this.test) //test3调用时弹出undefined
13 },
14 test3:function(){
15 this.$options.methods.test2();//在test3中调用test2的方法
16 }
17 }
18 })
学习笔记||使用Vue时踩过的坑2.0的更多相关文章
- Vue 学习笔记之 —— 组件（踩了个坑）
最近在学习vue,学习组件时,遇到了一个问题,困扰了半个多小时.. <!DOCTYPE html> <html lang="en"> <head> ...
- 学习Spring5源码时所遇到的坑
学习Spring5源码时所遇到的坑 0)本人下载的源码版本是 spring-framework-5.0.2.RELEASE 配置好gradle环境变量之后,cmd进入到spring项目,执行gradl ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- 学习笔记：Vue——组件和Prop
前言:这一篇是关于组件基础.组件注册.Prop等内容. 1.组件基础 01.组件是可复用的Vue实例 02.组件中的data选项必须是一个函数 03.一个组件默认可以有任意数量的prop 任何值都可以 ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- [转] 那些在使用webpack时踩过的坑
用webpack的过程,就是一个不断入坑和出坑的过程.回望来时路,一路都是坑啊!现把曾经趟过的那些坑整理出来,各位看官有福了~ 文章末尾有我用到的依赖的版本信息,若你发现某个问题与我在本文中的描述不一 ...
- [问题解决]RedHat7更换CentOS7的yum源时踩过的坑
更换yum源的流程 查看当前yum程序 $ rpm -qa|grep yum 这里推荐将其结果截屏或拷贝出来,以免后面报错修复. 删除原有yum源 $ rpm -aq | grep yum|xargs ...
- 【学习笔记】深入理解js原型和闭包（0）——目录
文章转载:https://www.cnblogs.com/wangfupeng1988/p/4001284.html 说明: 本篇文章一共16篇章,外加两篇后补的和一篇自己后来添加的学习笔记,一共19 ...
- 使用Ajax中get请求发送Token时踩的那些坑
在使用惯了各种牛X的插件以后,在使用原生组件写一些小东西的时候总是有踩不完的坑! 今天就来说一说我使用原生ajax请求时踩得坑: 下面是我的代码: var xmlhttp; if (window.XM ...
- 学习笔记——在vue中如何配置Jest（一）
最近在搞Jest单元测试,如何在vue中安装和使用jest我就不说了,前一篇文章简单的说了一下在使用jest时遇到的一些问题,但是我觉得并没有真正的解决的很好.后面会在学习过程中更新前面的那篇文章,加 ...
随机推荐
- 25js String(字符串)对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue路由中 Navigating to current location ("/xxx") is not allowed
原因:报错原因:多次点击同一路由,导致路由被多次添加 解决:在引入路由的地方 import Vue from 'vue' import Router from 'vue-router' Vue.use ...
- sxt_(003_007)_tomcat
一.web服务器 接受浏览器请求,进行结果响应. 常见的web服务器:tomcat.jboss.weblogic.websphere.resin.jetty.二.tomcat下载: 去apache官网 ...
- Asp.Net Core上传大文件请求体限制设置
IIS进程内部署时 1. Web.Config的<system.webServer>节点下增加 <security> <requestFiltering> < ...
- 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的互转
/**火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的互转 * Created by macremote on 16/5/3. */ function GPSUtil (){ v ...
- Razor视图cshtml做到运行时编译【提高开发效率】
当你的.NET开发工具升级到.NET Core版本以上,就会发现有时候无法将视图界面做的修改可以直接保存后刷新输出,一般都需要重新热重载或重新编译,这样会导致开发效率过慢的行为,开发者无法直接直观地看 ...
- 使用python启动appium(虚拟器)
1.先安装各种库 https://www.cnblogs.com/zhanglingling00/p/14169462.html pip install Appium-Flutter-Finder p ...
- python39
Python pass 是空语句,是为了保持程序结构的完整性. pass 不做任何事情,一般用做占位语句. Python 语言 pass 语句语法格式如下: pass 测试实例: 实例 #!/usr/ ...
- Typora以及Markdown学习
Typora以及Markdown学习 标题 n级标题 一级标题为#+[空格]+标题或者ctrl+1 二级标题则为``##+[空格]+标题`或者ctrl+2 后续几级标题依此类推... 最多支持6级标题 ...
- c++ 引用 指针。
一.什么是引用(reference) ?已经存在的对象的另外一个名字. 引用有什么特别的? 1.引用在定义时,以&开头. 2.引用不是对象,只能绑定在对象上.所以必须在初始化的时候,指定引用绑 ...