学习笔记||使用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时遇到的一些问题,但是我觉得并没有真正的解决的很好.后面会在学习过程中更新前面的那篇文章,加 ...
随机推荐
- python打包生成exe报错
如图所示 如果出现的是这个问题可以可以考虑以下方法 首先卸载原先下载的 Pyinstaller pip uninstall pyinstaller 再执行以下代码,去github上下载 pip ...
- java NIO原理和代码实践
一,先说java IO 1,线程阻塞:当线程调用write()或read()时,线程会被阻塞,直到有一些数据可用于读取或数据被完全写入. 2,面向流: 我们需要从流中读取一个或多个字节.它使用流来在数 ...
- uniapp离线打包安卓未配置appkey或配置错误
按照这4步检查都没问题 1.查看签名文件是否配置到了主APP的build.gradle. signingConfigs { config { keyAlias 'newPt' keyPassword ...
- 软件工程日报七——checkbox的使用
今天学了checkbox的使用 activity_main.xml文件为 <?xml version="1.0" encoding="utf-8"?> ...
- Android学习——控件EditText
1.主要属性
- Qt 一键部署脚本
echo "begin deploying..." echo Setting up environment for Qt usage... set PATH=C:\Qt\Qt5.8 ...
- c#笔记（四）——switch
---恢复内容开始--- using UnityEngine; using System.Collections; public class Script1 : MonoBehaviour { ...
- Devexpress WPF ChartControl 多Y轴
<Window x:Class="DXApplication4.MainWindow" xmlns="http://schemas.microsoft.com/wi ...
- go组合
package main import "fmt" func main() { aa := []string{"a", "b", " ...
- Idea报错:Command line is too long.
https://blog.csdn.net/qq_40682764/article/details/109215368 run–>edit configurations–>你的项目–> ...