vue手记

目录

• 常用单词记录
• 关于vue中父子组件通信的几种方法对比
  • 通过props实现通信
  • 通过$ref 实现通信
  • prop和$ref之间的区别
• vue中@的作用
• 插槽使用
  • 默认插槽
  • 具名插槽
  • 作用域插槽
• 区分this. $route 和this $router 这两个对象
• 闲谈
  • v-bind:value不是双向绑定的
  • {{ message.split('').reverse().join('') }}
  • popup-picker之v-model绑定方法问题
  • 关于array[0]=obj和array.push的不同区别
  • template的v-show属性

常用单词记录

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"

4. 试验发现这是能成功的，但是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" }

区分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之v-model绑定方法问题

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属性

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