学习笔记||使用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时遇到的一些问题,但是我觉得并没有真正的解决的很好.后面会在学习过程中更新前面的那篇文章,加 ...
随机推荐
- lua 文件读写处理（操作敏感词库）
最近需要给游戏做一个敏感词新系统,我采用的方法是比较常用的DFA(确定有穷状态机)算 法,先不讲算法,而这种算法的实现需要一个相应的敏感词库. 我拿到了词库后发现词库中大概有8000+个词,其中包括很 ...
- ubuntu下ntp时间同步
1. 首先安装ntp服务(ubuntu 16.02)在linux的root用户下执行以下命 sudo apt-get install ntp (如果不是ubuntu系统则执行 yum insta ...
- global 函数
x = 15 # 全局变量Gdef func_a(): print(x)def func_b(): print(x)def func_c(): global x # 在定义函数内声明x为全局变量后,才 ...
- android9.0之后wifi热点原生接口开发示例
话不多说,直接上代码了,这示例是直接调用原生接口实现的,没有使用反射的方式,如果找不到接口无法编译,请依赖一下对应系统的framewords.jar,并且参考我https://www.cnblogs. ...
- zk-复制安装
Zookeeper系列一:Zookeeper介绍.Zookeeper安装配置.ZK Shell的使用 一.Zookeeper介绍 1. 介绍Zookeeper之前先来介绍一下分布式 1.1 分 ...
- 山寨e网通公告
SHANZGONGG山寨e网通V1.0[换行]软件完全免费,官方绝不会索取任何费用,请勿被骗,后果自负.[换行]如果你有什么更好的建议或者需要哪里改进的地方,请联系作者QQ206044600反馈,前提 ...
- Pyscript使用本地Pyodide配置方法
背景 Pyscript工程本身很小,KB级别,引用的Pyodide工程比较大,因为包含了各种类库的wasm文件,默认引用了cdn上的文件,cdn上的文件又在外网,访问会中断导致不可用,于是需要使用本地 ...
- 2022年JMUCTF WP
2022年JMUCTF WP crypto 2,Are you ok Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. Ook. ...
- C# 开源NuGet插件
ExcelDataReader 开源免费,Excel读取插件 GitHub - ExcelDataReader/ExcelDataReader: Lightweight and fast libra ...
- C++ 11 std::mem_fn
mem_fn 想到member function 成员函数 这还真就是用来调用成员函数的 普通的函数我们通过函数指针可以调用,但对于成员函数的调用稍微复杂一点,需要对象,也即this指针 因为成员函数 ...