vue手记

其他 2019-12-31 14:34:14 阅读次数: 0

目录

常用单词记录

render
[ˈrendə(r)]
v.使变得;给予;提供;提交

re-render
重新渲染

patch
[pætʃ]
v.打补丁;缝补;修补

teardown
n.拆卸

divider

[dɪˈvaɪdə(r)]

分割线;

prototype

[ˈprəʊtətaɪp]

n.原型;雏形;最初形态

promise

[ˈprɒmɪs]

v.许诺;承诺;答应;保证;

n.许诺;承诺;

scheduler

[ˈʃɛdjuːlə]

n.调度程序，日程安排程序

release

[rɪˈliːs]

v.释放;放出;放走;放开;

n.释放;公开;发行;发布;

docker

[ˈdɒkə(r)]

n.码头工人

daemon

英 [ˈdiːmən] 美 [ˈdiːmən]

n.守护进程；(古希腊神话中的)半神半人精灵

关于vue中父子组件通信的几种方法对比

组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。通过props、$ref和 $emit ，来讲解如何实现父子组件间通信。

通过props实现通信

（1）静态传递
子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。

//父组件
<template>
    <div>
    <h1>我是父组件！</h1>
        <child message="这是个message"></child>
    </div>
</template>
<script>
    import Child from '../components/child.vue'
    export default {
        components: {Child},
    }
</script>
//子组件
<template>
    <h3>我是子组件！</h3>
    <h3>{{message}}</h3>
</template>
<script>
 export default {
    props: ['message']
 }
</script>

（2）动态传递
用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

<!-- 父组件 -->
<template>
     <div>
         <h1>我是父组件！</h1>
         <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
         <child v-bind:message="a+b"></child>
         <!-- 用一个变量进行动态赋值。-->
         <child v-bind:message="msg"></child>
     </div>
</template>
<script>
import Child from '../components/child.vue'
export default {
     components: {Child},
     data() {
         return {
          a:'我是子组件二！',
          b:112233,
          msg: '我是子组件三！'+ Math.random()
         }
     }
}
</script>
<!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
    props: ['message']
 }
</script>

通过$ref 实现通信

ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 \(refs 对象上。 通俗点说，就是通过ref注册的组件，可以通过this.refs.调用到子组件信息 通过\)ref可能获取到在子组件里定义的属性和方法。
ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。

<!-- 父组件 -->
<template>
 <div>
 <h1>我是父组件！</h1>
 <child ref="msg"></child>
 </div>
</template>
<script>
     import Child from '../components/child.vue'
     export default {
         components: {Child},
         mounted: function () {
              console.log( this.$refs.msg);
              this.$refs.msg.getMessage('我是子组件一！')
         }
     }
</script>
<!-- 子组件 -->
<template>
 <h3>{{message}}</h3>
</template>
<script>
 export default {
     data(){
          return{
          message:''
          }
     },
     methods:{
          getMessage(m){
                this.message=m;
          }
     }
 }
</script>

prop和$ref之间的区别

prop 着重于数据的传递，它并不能调用子组件里的属性和方法。像创建文章组件时，自定义标题和内容这样的使用场景，最适合使用prop。
\(ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。 通过\)emit 实现通信
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

<!--父组件-->
<template>
 <div>
     <h1>{{title}}</h1>
     <child @getMessage="showMsg"></child>
 </div>
</template>
<script>
 import Child from '../components/child.vue'
 export default {
     components: {Child},
     data(){
          return{
          title:''
          }
     },
     methods:{
      showMsg(title){
            this.title=title;
      }
     }
 }
</script>
<template>
 <h3>我是子组件！</h3>
</template>
<script>
 export default {
     mounted: function () {
      this.$emit('getMessage', '我是父组件！')
     }
 }
</script>

vue中@的作用

import Vue form 'vue’的意思

  1. import Vue form ‘vue’ 写全的话是import Vue from ‘…/nodemouls/vue/list/vue.js’； 此时在webpack.base.conf.js中进行了定义，内置了一些选项，extenions:[’.js’,’.vue’,’.json’],意思是省略后面的后缀，由webpack来自动为我们加上。

  2. 如果名字比较长，还可以起个别名。
    alias:{ ‘@’:resolve(‘src’)},
    它的意思是在vue项目中，引入路径的时候使用@即代表src文件夹，省去了…/…/…/的操作，这样写比较十分方便。

  3. 当我们在模板中写img的时候有时也需要翻着找，那么能用@代替吗？答案是当然可以的，
    比如在assets文件夹中有张图片，logo.png。以往写可能是：

<img src="../../src/assets/logo.png">

现在知道怎么回事以后可以直接这样写：

现在知道怎么回事以后可以直接这样写：

<img src="@/assets/logo.png"
  1. 试验发现这是能成功的，但是lssue提出的方案是在@前面加上~。两者均能成功
    vue插槽
    插槽定义
    插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
    插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

插槽使用

默认插槽

//父组件
<template>
 <div>
 我是父组件
 <slotOne1>
  <p style="color:red">我是父组件插槽内容</p>
 </slotOne1>
 </div>
</template>
//子组件(slotOne1)
<template>
 <div class="slotOne1">
 <div>我是slotOne1组件</div>
 <slot></slot>
 </div>
</template>

具名插槽

//父组件
<template>
 <div>
 我是父组件
 <slot-two>
  <p>啦啦啦，啦啦啦，我是卖报的小行家</p>
  <template slot="header">
   <p>我是name为header的slot</p>
  </template>
  <p slot="footer">我是name为footer的slot</p>
 </slot-two>
 </div>
</template>
//子组件
<template>
 <div class="slottwo">
 <div>slottwo</div>
 <slot name="header"></slot>
 <slot></slot>
 <slot name="footer"></slot>
 </div>
</template>

我是父组件
slottwo
我是name为header的slot
啦啦啦，啦啦啦,我是卖报的小行家
我是name为footer的slot

作用域插槽

//父组件
//在父组件上使用slot-scope属性，user.data就是子组件传过来的值
<template>
 <div>
 我是作用域插槽
 <slot-three>
  <template slot-scope="user">
  <div v-for="item in user.data" :key="item.id">
  {{item}}
  </div>
  </template>
 </slot-three>
 </div>
</template>
//子组件
//在子组件的slot标签上绑定需要的值
<template>
 <div class="slotthree">
 我是作用域插槽的子组件
 <slot :data="user"></slot>
 </div>
</template>
<script>
export default {
 name: 'slotthree',
 data () {
 return {
  user: [
  {name: 'Jack', sex: 'boy'},
  {name: 'Jone', sex: 'girl'},
  {name: 'Tom', sex: 'boy'}
  ]
 }
 }
}
</script>

我是作用域插槽
我是作用域插槽的子组件
{ "name": "Jack", "sex": "boy" }
{ "name": "Jone", "sex": "girl" }
{ " name": "Tom", "sex". "boy" }

区分this. $route 和this \(router 这两个对象 //其中: this.\)route 是路由[参数对象] ，所有路由中的参数， params, query

都属于它
//其中: this. $router 是个路由 [导航对象] ,用它可以方便的使用JS代码，实现路由的前进、后退、 跳转到新的URL地址

闲谈

v-bind:value不是双向绑定的

只有通过v-model才能双向绑定参数（v-model = v-bind + v-on）

{{ message.split('').reverse().join('') }}

message根据""分割成字符串数组，然后添加""合并成字符串

修饰符

事件修饰符

按键修饰符

popup-picker中data绑定的是数组对象结构是[['个人', '公司', '客户']]，其中v-model结构是['个人']，这样默认选中的就会是个人

遇到的几个问题，因为需要使用的是列表循环；

1、循环list获得single，但是single.type是字符串，所以需要转数组

2、v-model绑定的是['个人']，展示时需要将字符串转数组，存取时将数组转为字符串，以求数据同步绑定更新

v-model绑定方法，只能使用无参方法

其实是自己想太多了，只要自己取数据时将数据解析为数组中，提交前再将需要的数据解析为字符串即可。

<div id=-"app">
    <popup-picker disabled :popup-title="'请选择'" title="类别" :data="typeList" v-model="reversedTypeName"></popup-picker>
</div>
<script>
var vm = new Vue({
  el: '#app',
  data: {
      typeList: [
          ['个人', '公司', '客户']
      ],
  },
  computed: {
      reversedTypeName: {
          get: function() {
            return [this.lists[0].mailTypeName];
          },
          set: function(newValue) {
            this.lists[0].mailTypeName = newValue[0];
          }
      }
  }
})
</script>

关于array[0]=obj和array.push的不同区别

<template>
    <div>
        <group :title="'标题'">
            <div v-for="(province,index) in provinces" :key="index">
                <cell v-if="provinces != null" :title="province.name" is-link :border-intent="false" :arrow-direction="province.show? 'up' : 'down'"
                 @click.native="province.show = !province.show"></cell>
                <template v-show="province.show">
                    <cell-box v-for="(pro,index) in province.projectDtos" :key="index" :border-intent="false"
                     class="sub-item">{{pro.xmjc}}</cell-box>
                </template>
            </div>
        </group>
    </div>
</template>

<script>
    import {
        Cell,
        CellBox,
        Group,
        CellFormPreview
    } from "vux";
    import http from "@/service/http/index";

    export default {
        components: {
            Group,
            Cell,
            CellBox,
            CellFormPreview
        },
        methods: {
            initPage() {
                var obj = {
                    name: "首都",
                    projectDtos: [{
                        xmId: 1,
                        xmjc: "项目1"
                    }, {
                        xmId: 2,
                        xmjc: "项目2"
                    }],
                    show: false
                };
                this.provinces.push(obj);
            }
        },
        data() {
            return {
                provinces: []
            };
        },
        created() {
            this.initPage();
        }
    };
</script>

array[0]是采用array[0].push(obj);

array[1]是采用array[1]=obj;

template的v-show属性

并不能覆盖其中的元素，也就是说不能使元素隐藏起来

猜你喜欢

转载自www.cnblogs.com/mumuyinxin/p/12124179.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022