本文尽可能将vue开发中常用的特性整理出来，便于个人理解记忆
一、实例和组件常用方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Directive</title>
<script type="text/javascript" src="https://unpkg.com/vue"></script>
<div id="app">
<h3 v-text="title"></h3>
<div v-limitspeed="true">
<p>
<span>{{speed}}</span><span>m/s=</span>
<span>{{kmSpeed}}</span><span>km/h</span>
</p>
<div>
<!-- 等价于v-on:click 传表达式或方法名 -->
<button @mousedown="speed++">+</button><button @mousedown="speed--">-</button>
</div>
<div>
<span>child receiver: {{emitMsg}}</span>
</div>
</div>
<!-- 最普通的组件 -->
<h3>common-component</h3>
<hr>
<!-- :bindProp 等价于 v-bind:bindProp 等式右边为data/props属性或表达式 -->
<!-- 不使用bind，等式右边为普通字符串 -->
<commom-component non-bind-prop="this is not an bind prop" :bind-prop=" bindController == 0? "zero" : "non-zero" " @sthemit="changemsg">
</commom-component>
<!-- slot -->
<h3>slot-component</h3>
<a href="slot.html">see usage of slot</a>
</div>
<script>
// 组件定义
const commomComponent = Vue.component('common-component',{
// 如果是import进来的组件，则不需要该属性，但是dom节点需要用<template></template>包裹
template:`
<div style="padding:5px;border:1px solid #eee">
<h4>{{text}}</h4>
<button @click="showTip">show alert</button>
<input type="text" :placeholder="plcHolderMsg" v-model="childTxt" />
</div>`,
props:{
nonBindProp:{
required: false,
type: String,
},
bindProp:{
default:"父组件没有传任何值"
}
},
//官方建议data作为函数返回！
data:()=>({
text:'this is a common-component',
tip:'111',
childTxt:'',
plcHolderMsg:'check out \'child receiver\''
}),
methods:{
showTip(){
alert(this.tip)
}
},
//检测属性变化
watch:{
childTxt: function(newv,oldv){
//子组件传递事件到父组件
this.$emit('sthemit',newv)
}
}
})
// 根目录实例
const vue = new Vue({
// 寻找id为app的容器div
el:'#app',
data: ()=>({
title: 'Vue demo',
speed: 0,
bindController: 1,
emitMsg: 'try to type something at the input of common-component'
}),
// 方法
methods:{
greet(){
console.log("hello")
},
changemsg(val){
if(val === ''){
this.emitMsg = 'try to type something at the input of common-component';
} else {
this.emitMsg = val;
}
}
},
//钩子，详见生命周期
mounted(){
this.greet()
},
//计算属性
computed:{
kmSpeed: {
set(){
console.log('set')
return (this.speed*3.6)*100/100;
},
get(){
console.log('get')
return (this.speed*3.6)*100/100;
}
}
},
//自定义指令
directives:{
limitspeed:{
bind(){
// run only once
// console.log("init");
},
inserted(){
// console.log('inserted');
},
update(...args){
// when component status change this trigged;
},
componentUpdated(){
}
}
},
// 组件注册
components:{
commomComponent
}
})
</script>
SLOT用法
slot，意为插槽，即在子组件中写插槽，父组件中编写对应的元素节点，使其在子组件中使用
某乎上一个回答（忘了是谁，欢迎补充）对slot理解特别有帮助：
数据通过props传递给子组件，dom节点通过slot传递给子组件
slot适用于如表格等需要在父组件处理数据而仅在子组件中展示的页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slot</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="slotRoot">
<div><a href="index.html">返回首页</a></div>
<slot-component>
<!--父组件编写节点并关联对应name的slot-->
<div slot="title">
<h3>-----slot-----</h3>
</div>
<div slot="personal">
<div v-for="i in infos">
<span>姓名: {{i.name}}</span> <span>性别: {{i.age === 'f' ? '女' : '男' }}</span>
<p>{{i.remark}}</p>
</div>
</div>
</slot-component>
</div>
</body>
<script>
//子组件定义slot
const slotComponent = Vue.component('slot-component',{
template: `<div>
<slot name="title"></slot>
<slot name="personal"></slot>
</div>
`,
data: ()=>({})
})
const slotRoot = new Vue({
el: "#slotRoot",
components: {
slotComponent
},
data: ()=>({
infos: [
{id:0,name:"werew",age:"f",remark:"Lorem ipsum dolor sit amet, consectetur adipisicing elit."},
{id:1,name:"i6767i",age:"m",remark:"Illo non sed id pariatur esse asperiores dolorum vero vel hic optio possimus"},
{id:2,name:"aaaaa",age:"m",remark:"autem repudiandae provident voluptas ipsa,"},
{id:3,name:"ccfwe",age:"f",remark:"magnam modi reprehenderit voluptates!"}
]
})
})
</script>
</html>
网友评论