13.vue组件
vue组件(一)
组件嵌套:
1.全局嵌套:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
template:`<div>组件A <bbb></bbb></div>`
});//子组件放在父组件的模板里
Vue.component("bbb",{
template:`<div>组件B</div>`
});
window.onload = function(){
let vm = new Vue({
el:"#app"
});
};
</script>
</head>
<body>
<div id="app">
<aaa></aaa>
</div>
</body>
</html>
res:
2.局部嵌套:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
let vm = new Vue({
el:"#app",
components:{
"aaa":{
template:`<div>组件A<bbb></bbb></div>`,
//子组件必须放在父组件的属性里
components:{
"bbb":{
template:`<div>组件B</div>`
}
}
},
/*"bbb":{
template:`<div>组件B</div>`
} */ //错误
}
});
};
</script>
</head>
<body>
<div id="app">
<aaa></aaa>
</div>
</body>
</html>
res:
组件通信(重要)
1、props/$emit
1.数据的双向绑定:
v-model后的变量名相同
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"abc"
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg" type="text" value=""/><br />
<input v-model="msg" type="text" value=""/><br />
{{msg}}<br />
</div>
</body>
</html>
res:
2.父传子,子传父props/$emit, 用ev.target.value或事件监听
(1)ev.target.value
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("mycomponent",{
props:["msg"],
template:`<div><input @input="show" type="text" :value="msg"/>{{msg}}</div>`,
methods:{
show(ev){
console.log(22222);
this.$emit("abc",ev.target.value);
//传子组件value值
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"abc"
},
methods:{
fn(data){
console.log(11111,data);
this.msg = data;
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg" type="text" value=""/>{{msg}}<br />
<hr />
<mycomponent :msg="msg" @abc="fn"></mycomponent>
</div>
</body>
</html>
res:
(2)事件监听
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("mycomponent",{
props:["msg"],
template:`<div><input v-model="msg2" type="text" value=""/>{{msg}}</div>`,
data(){
return {msg2:this.msg}
},
watch:{
msg(){
this.msg2 = this.msg;
},
msg2(){
this.$emit("abc",this.msg2);
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"abc"
},
methods:{
fn(data){
console.log(11111,data);
this.msg = data;
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg" type="text" value=""/>{{msg}}<br />
<hr />
<mycomponent :msg="msg" @abc="fn"></mycomponent>
</div>
</body>
</html>
res:
2.对象—— 引用
子与父操控同一个对象
1.父传子,子传父props,value
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("mycomponent",{
props:["msg"],
template:`<div><input v-model="msg.value" type="text" value=""/>{{msg.value}}</div>`
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
//msg:"abc"
msg:{value:"abc"}
//对象--msg.value引用
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg.value" type="text" value=""/>{{msg.value}}<br />
<hr />
<mycomponent :msg="msg"></mycomponent>
</div>
</body>
</html>
res:
3.$children / $parent / $root
1. $children
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
template:`<div>组件A----{{a}}</div>` ,
data(){
return {a:"a"}
}
});
Vue.component("bbb",{
template:`<div>组件B</div>`
});
window.onload = function(){
let vm = new Vue({
el:"#app",
methods:{
show(){
//$children
console.log(this.$children);
this.$children[0].$el.style.background = "red"
this.$children[0].a = "abc"
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="show" type="button" value=" 按钮" />
<aaa></aaa>
<bbb></bbb>
</div>
</body>
</html>
res:
2.$parent
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
template:`<div @click="show">组件A----{{a}}</div>`,
data(){
return {a:"a"}
},
methods:{
show(){
//parent/root
console.log(this.$parent == this.$root);
//this.$parent.msg = "哈哈哈";
this.$root.msg = "哈哈哈";
}
}
});
Vue.component("bbb",{
template:`<div>组件B</div>`
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"Vue"
},
methods:{
show(){
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="show" type="button" value=" 按钮" />{{msg}}
<hr />
<aaa></aaa>
<bbb></bbb>
</div>
</body>
</html>
res:
3.$root
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
template:`<div @click="show">组件A----{{a}} <bbb></bbb></div>`,
data(){
return {a:"a"}
},
methods:{
show(){
//parent/root
console.log(this.$parent == this.$root);
//this.$parent.msg = "哈哈哈";
this.$root.msg = "哈哈哈";
}
}
});
Vue.component("bbb",{
template:`<div @click.stop="show">组件B</div>`,
methods:{
show(){
//parent/root
console.log(this.$parent == this.$root);
this.$parent.a = "aa";
this.$root.msg = "嘻嘻嘻";
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"Vue"
},
methods:{
show(){
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="show" type="button" value=" 按钮" />{{msg}}
<hr />
<aaa></aaa>
</div>
</body>
</html>
res:
4、ref/$refs
this.$refs以数组的形式获取全部的ref
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//ref
Vue.component("aaa",{
template:`<div>组件A----{{a}} </div>`,
data(){
return {a:"a"}
}
});
Vue.component("bbb",{
template:`<div>组件B</div>`,
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"Vue"
},
methods:{
show(){
console.log(this.$refs);
//this.$refs以数组的形式获取全部的ref
this.$refs.aaa.$el.style.background = "pink";
this.$refs.aaa.a = "pink";
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="show" type="button" value=" 按钮" />{{msg}}
<hr />
<aaa ref="aaa"></aaa>
<bbb ref="bbb"></bbb>
</div>
</body>
</html>
res:
5、eventBus事件总线
let eventBus = new Vue();
eventBus.$emit(sEv,data);
eventBus.$on(sEv,data=>{})
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//事件总线——eventBus emit/on
Vue.component("aaa",{
template:`<div @click="show">组件A----{{a}} </div>`,
data(){
return {a:"a"}
},
created(){
eventBus.$on("chagnea",data=>{
this.a = data;
});
},
methods:{
show(){
eventBus.$emit("chagneb","我想你了");
}
}
});
Vue.component("bbb",{
template:`<div @click="show">组件B----{{b}}</div>`,
data(){
return {b:"b"}
},
created(){
eventBus.$on("chagneb",data=>{
this.b = data;
});
},
methods:{
show(){
eventBus.$emit("chagnea","我也想你了");
}
}
});
let eventBus = new Vue();
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"Vue"
},
methods:{
show(){
}
}
});
};
</script>
</head>
<body>
<div id="app">
<aaa></aaa>
<bbb></bbb>
</div>
</body>
</html>
res:
6、sync
sync --> this.$emit("updata:xxx",data);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//sync
Vue.component("mycomponent",{
props:["msg"],
template:`<div><input @input="show" v-model="msg2" type="text" value=""/>{{msg}}</div>`,
data(){
return {msg2:this.msg}
},
methods:{
show(){
this.$emit("update:msg",this.msg2);
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"abc"
},
methods:{
fn(data){
this.msg = data;
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg" type="text" value=""/>{{msg}}<br />
<hr />
//@update:msg="fn",事件
<mycomponent :msg="msg" @update:msg="fn" ></mycomponent>
// :msg.sync="msg",固定写法
<mycomponent :msg.sync="msg" ></mycomponent>
</div>
</body>
</html>
res:
7、v-model
v-model --> this.$emit("input",data);
exp:自增
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//sync
Vue.component("mycomponent",{
template:`<div><input @click="show" type="button" value="plus"/></div>`,
data(){
return {count:0}
},
methods:{
show(){
//"input"固定写法 this.$emit("input",++this.count);
}
}
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
count:0
},
methods:{
show(data){
console.log(1,data);
this.count = data;
}
}
});
};
</script>
</head>
<body>
<div id="app">
{{count}}
<hr />
<mycomponent v-model="count" ></mycomponent>
</div>
</body>
</html>
res:
vue组件(二)
1.创建组件
1、全局 Vue.component
2、局部 new Vue({components:{}});
3、Vue.extend
let VueComponent = Vue.extend(options);
Vue.component("名字",VueComponent);
返回值：Vue.extend、Vue.component 返回的都是VueComponent
new VueComponent().$mount("#app");
Vue.extend可以没有参数
let VueComponent = Vue.extend();
new VueComponent(options).$mount("#app");
获取模板元素：
let tmp = new VueComponent([options]).$mount().$el;
document.body.appendChild(tmp);
exp:
++Vue.extend++
全局组件:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//Vue.extend
//VueComponent
let mycomponent = Vue.extend({
template:`<div>Vue.extend组件</div>`
});
Vue.component("mycomponent",mycomponent);//("组件名",VueComponent)
window.onload = function(){
let vm = new Vue({
el:"#app",
});
};
</script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
</body>
</html>
局部组件:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//Vue.extend
let mycomponent = Vue.extend({
template:`<div>Vue.extend组件</div>`
});
//new Vue({components:{}});
window.onload = function(){
let vm = new Vue({
el:"#app",
components:{mycomponent}
});
};
</script>
</head>
<body>
<div id="app">
<mycomponent></mycomponent>
</div>
</body>
</html>
//最大组件 Vue
let VueComponent = Vue.extend(options);//new时不带参数
let VueComponent = Vue.extend();//new时带参数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
let Comp1 = Vue.extend({
template:`<div>Vue.extend组件</div>`
});
let Comp2 = Vue.extend();
console.log(1,Comp1);
console.log(2,Comp2);
window.onload = function(){
//let oDiv = new Comp1().$mount().$el;
//获取模板元素：
let oDiv = new Comp2({
template:`<div>new Comp2组件</div>`
}).$mount().$el;
console.log(3,oDiv);
document.body.appendChild(oDiv);
};
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
静态组件 动态组件
必须有is
静态--> is="组件的名称"
动态--> :is="变量或者值 '组件的名称'"
<div is="组件的名称"></div>
<div :is="变量或者值 '组件的名称'"></div>
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
template:`<div>组件A</div>`
});
Vue.component("bbb",{
template:`<div>组件B</div>`
});
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
comp:"aaa"
},
methods:{
toggle(){
this.comp = this.comp=="aaa"?"bbb":"aaa";
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="comp='aaa'" type="button" value="组件A"/>
<input @click="comp='bbb'" type="button" value="组件B"/>
<input @click="toggle" type="button" value="toggle"/>
<!-- 动态-->
<div :is="comp"></div>
</div>
</body>
</html>
3.异步组件
Vue.component(组件名称,(resolve,reject)=>{
axios.get(url).then(res=>{
resolve({
template:res.data
});
});
});
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
Vue.component("mycomp",(resolve,reject)=>{
axios.get("abc2.html").then(res=>{
setTimeout(()=>{
console.log(res.data);
let oDiv = document.createElement("div");
oDiv.innerHTML = res.data;
//读取成功放到template
resolve({
//template:res.data
//template:oDiv.children[0].innerHTML
template:oDiv.children[0]
});
},2000);
});
});
window.onload=function(){
let vm = new Vue({
el:"#app",
})
}
</script>
</head>
<body>
<div id="app">
<mycomp></mycomp>
</div>
</body>
</html>
4.组件的生命周期
activated //激活
deactivated //休眠
必须跟 keep-alive标签
<keep-alive>
<div :is="'组件名称'"></div>
</keep-alive>
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.component("aaa",{
template:`<div>组件A</div>`,
activated(){
console.log("A-----activated");//激活
},
deactivated(){
console.log("A-----deactivated");//休眠
},
beforeDestroy(){
console.log("A-----beforeDestroy");
},
destroyed(){
console.log("A-----destroyed");
},
});
Vue.component("bbb",{
template:`<div>组件B</div>`,
activated(){
console.log("B-----activated");//激活
},
deactivated(){
console.log("B-----deactivated");//休眠
},
beforeDestroy(){
console.log("B-----beforeDestroy");
},
destroyed(){
console.log("B-----destroyed");
},
});
window.onload = function(){
vm = new Vue({
el:"#app",
data:{
a:"aaa"
},
methods:{
toggle(){
this.a = this.a == "aaa"?"bbb":"aaa";
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="toggle" type="button" value="toggle"/>
<keep-alive>
<div :is="a"></div>
</keep-alive>
</div>
</body>
</html>
res:
错误的生命周期
errorCaptured
执行条件:
只能捕获子组件的异常，无法捕获自己发生的错误！
异常会冒泡！
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//异常会冒泡
Vue.component("aaa",{
template:`<div>组件A <bbb></bbb></div>`,
errorCaptured(){//捕获异常
console.log("A-----errorCaptured");
},
});
Vue.component("bbb",{
template:`<div>组件B</div>`,
data(){
return {
a
//a is not defined
}
},
errorCaptured(){
console.log("B-----errorCaptured");
}
});
window.onload = function(){
vm = new Vue({
el:"#app",
data:{
//a
},
errorCaptured(){
console.log("Vue-----errorCaptured");
}
});
};
</script>
</head>
<body>
<div id="app">
<aaa></aaa>
</div>
</body>
</html>
冒泡:bbb-->aaa-->app
res:
5.组件渲染:
Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。
render(createElement){
return createElement(
"h1", // tag name 标签名称
"标题" //内容: {属性:{属性值}}}
)
}
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
let vm = new Vue({
el:"#app",
render(createElement){
return createElement(
"ul", // tag name 标签名称
{
attrs: {
id: 'ul1'
},
'class': {
foo: true,
bar: false
},
style: {
color: 'red',
fontSize: '14px'
},
},
[
createElement("li","111"),
createElement("li","222"),
createElement("li","333"),
]
)
}
});
};
</script>
</head>
<body>
<div id="app">
<!--
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
-->
</div>
</body>
</html>
res:
6.混入
合并.
exp:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
let json1 = {
data:{
msg:"abc",
a:"a",
b:"b",
},
methods:{
fn(){
console.log("fn");
}
}
};
let json2 = {
data:{
c:"c",
},
computed:{
computedXXX(){
console.log("computedXXX");
}
} ,
watch:{
c(){
console.log("watch c");
}
}
}
window.onload = function(){
let vm = new Vue({
//mixins: [json],
el:"#app",
data:{
msg:"Vue",
},
methods:{
show(){
console.log("show");
}
},
mixins: [json1,json2],
});
console.log(vm);
};
</script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
res:
对与父组件已存在的实例,不会被改变
7.自定义指令
v-xxx
Vue.directive("xxx", function (el, binding) {
console.log(el,binding);
el.style.color = "xxx";
})
v-red 字体变红
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.directive("red", function (el, binding) {
console.log(el,binding);
el.style.color = "red";
})
window.onload = function(){
let vm = new Vue({
el:"#app",
});
console.log(vm);
};
</script>
</head>
<body>
<div id="app">
<div v-red>自定义指令</div>
</div>
</body>
</html>
res:
v-color="'red'" 字体变红
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.directive("color", function (el, binding) {
console.log(el,binding);
el.style.color = binding.value;
})
window.onload = function(){
let vm = new Vue({
el:"#app",
});
};
</script>
</head>
<body>
<div id="app">
<div v-color="'red'">自定义指令</div>
</div>
</body>
</html>
res:
自定义样式style
v-style="{width:'200px',height:'200px',background:'green'}"
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
/*
Vue.directive("style", function (el, binding) {
console.log(el,binding);
for(let name in binding.value){
el.style[name] = binding.value[name];
}
})
*/
window.onload = function(){
let vm = new Vue({
el:"#app",
directives:{
style(el, binding){
console.log(el,binding);
for(let name in binding.value){
el.style[name] = binding.value[name];
}
}
}
});
};
</script>
</head>
<body>
<div id="app">
<div v-style="{width:'200px',height:'200px',background:'green'}">自定义指令</div>
</div>
</body>
</html>
res:
自定义拖拽:v-drag
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
Vue.directive("drag",{
bind(el, binding){
console.log("bind");
el.style.position = "absolute";
el.style.left = 0;
el.style.top = 0;
el.style.width = "100px";
el.style.height = "100px";
el.style.background = "red";
},
inserted(el, binding){
el.onmousedown = function(ev){
let disX = ev.clientX - el.offsetLeft;
let disY = ev.clientY - el.offsetTop;
document.onmousemove = function(ev){
el.style.left = ev.clientX - disX + "px";
el.style.top = ev.clientY - disY + "px";
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
},
update(el, binding){
console.log("update");
},
componentUpdated(el, binding){
console.log("componentUpdated");
},
unbind(el, binding){
console.log("unbind");
},
})
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"Vue",
a:true,
},
methods:{
show(){
this.a = false;
this.msg = Math.random();
}
}
});
};
</script>
</head>
<body>
<div id="app">
<div v-if="a" @click="show" v-drag>自定义指令 {{msg}}</div>
</div>
</body>
</html>
res:
v-if: 与unbind
8.过滤器
过滤器:
https://cn.vuejs.org/v2/api/?#Vue-filter
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
//首字母大写
Vue.filter("capitalize", function (str) {
return str.charAt(0).toUpperCase() + str.substring(1);
});
//字符串反转
/*Vue.filter("reverse", function (str) {
return str.split("").reverse().join("");
});*/
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"vue",
},
//字符串反转
filters:{
reverse(str){
return str.split("").reverse().join("");
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input v-model="msg" type="text" value=""/><br />
{{msg}}<br />
{{msg|capitalize}}<br />
{{msg|reverse}}<br />
{{msg|reverse|capitalize}}<br />
{{msg|capitalize|reverse}}<br />
</div>
</body>
</html>
res:
9.nextTick
nextTick https://cn.vuejs.org/v2/api/#Vue-nextTick
将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="vue.js"></script>
<script>
window.onload = function(){
let vm = new Vue({
el:"#app",
data:{
msg:"vue",
},
methods:{
show(){
this.msg = Math.random();
this.$nextTick(function(){
let oSpan = document.getElementById("s1");
console.log(oSpan.innerHTML);
});
}
}
});
};
</script>
</head>
<body>
<div id="app">
<input @click="show" type="button" value="按钮"/><br />
<span id="s1">{{msg}}</span>
</div>
</body>
</html>
res:
++不加nextTick,console.log(oSpan.innerHTML)中的结果是上一次的内容.++
13.vue组件的更多相关文章
- 13. VUE 组件之间数据传递
组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...
- 移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...
- vue组件推荐
Vue 是一个轻巧.高性能.可组件化的MVVM库,API简洁明了,上手快.从Vue推出以来,得到众多Web开发者的认可.在公司的Web前端项目开发中,多个项目采用基于Vue的UI组件框架开发,并投入正 ...
- VUE组件汇总
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
- vue 组件数据传递
vue组件化开发 主要为了把一个大功能拆分成若干个小的功能,解决高耦合问题,同时也方便开发人员维护. 从功能上组件可以分为木偶组件和功能组件. 木偶组件(为了接收数据,渲染数据,基本上是没有逻辑的 ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- [vue]webpack&vue组件工程化实践
[vue]全局组件和局部组件(嵌套+props引用父组件数据) [vue]组件篇 [vue]组件的创建(componet)和销毁(keep-alive缓存)和父子dom同步nextTick [vue] ...
- day 83 Vue学习三之vue组件
本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给大家介绍一下组件(componen ...
- vue组件讲解（is属性的用法）
什么是组件? 在说之前我们先搞清楚什么是组件?这样对我们下边的学习是很有帮助的. 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可以重复使用的代码.在较高层次 ...
随机推荐
- ASP.NET Core WebApi
ASP.NET Core WebApi 创建项目 使用VS新建项目,选择ASP.NET Core WebAPI即可. 此时Startup的Configure.ConfigureService方法中如下 ...
- Java8 stream 中利用 groupingBy 进行多字段分组求和
Java8的groupingBy实现集合的分组,类似Mysql的group by分组功能,注意得到的是一个map 对集合按照单个属性分组 case1: List<String> items ...
- js正则提取数字小数,提取中文,提取英文
var value="污染物:PM2.5"; //提取中文 console.log(value.replace(/[^\u4E00-\u9FA5]/g,'')); //提取英文 c ...
- htop使用详解
一．Htop的使用简介 大家可能对top监控软件比较熟悉,今天我为大家介绍另外一个监控软件Htop,姑且称之为top的增强版,相比top其有着很多自身的优势.如下: 两者相比起来,top比较繁琐 默认 ...
- sql注入工具：sqlmap命令
sqlmap是一款专业的sql注入工具, 让你告别人工注入, 程序高效自动注入 前提是你有找到注入点 , 工具的官方网站:http://sqlmap.org/ kali系统默认安装sqlmap, 不需 ...
- yarn 切换 设置 镜像 源
1.查看一下当前源 yarn config get registry 2.切换为淘宝源 yarn config set registry https://registry.npm.taobao.org ...
- webstorm快捷键 webstorm keymap内置快捷键英文翻译、中英对照说明
20160114参考网络上的快捷键,整理自己常用的: 查找/代替shift+shift 快速搜索所有文件,简便ctrl+shift+N 通过文件名快速查找工程内的文件(必记)ctrl+shift+al ...
- IOS应用内购（一）内购的种类
Glossary IAP - In App Purchase, 应用内购. 内购种类 consumable - 可消费的,比如游戏中的金币,金币可以购买游戏道具或者装备,这个金币是可以消费的,用完之后 ...
- 20.1翻译系列：EF 6中自动数据迁移技术【EF 6 Code-First系列】
原文链接:https://www.entityframeworktutorial.net/code-first/automated-migration-in-code-first.aspx EF 6 ...
- 伟哥对RTO & RPO的通俗理解
RTO (Recovery Time Objective,复原时间目标)是企业可容许服务中断的时间长度.比如说灾难发生后半天内便需要恢复,RTO值就是十二小时: RPO (Recovery Point ...