学习笔记||使用Vue时踩过的坑2.0
2024-09-08 11:16:34
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 })
最新文章
- Markdown学习
- Boolean()值为false的五个特殊值
- POJ No.2386【B007】
- Java 集合系列10之 HashMap详细介绍(源码解析)和使用示例
- winform下的智能提示框
- 常用JS汇总
- javascript笔记4-函数表达式
- 把一个类（或者Object）转换成字典
- CentOS7搭建SAMBA服务器实现与WIN10匿名共享文件
- 获取元素位置信息：getBoundingClientRect
- VB6关于判断模态窗体的问题
- ThinkPHP - 模板引擎
- OpenCV学习(20) grabcut分割算法
- Centos7+nginx+keepalived集群及双主架构案例
- 将对象xml序列化和反序列化
- MFC程序打包方法
- apache2 以及https证书配置
- Java并发编程笔记之ThreadLocal内存泄漏探究
- 以为是tomcat出现using问题，怎么改都改不好终于找到原因
- kivy 小demo