组件的入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 使用组件 -->
<login-com></login-com>
<register-com></register-com>
</div>
<script src="./js/vue.js"></script>
<script>
// 全局组件声明有三种方式，这里只讲一种
Vue.component('login-com', {
template : `<div><h1>这是我们的 login 组件</h1></div>`, // html模板内容
})
Vue.component('register-com', {
template : `<div><h1>这是我们的 register 组件</h1></div>`, // html模板内容
})
var vm = new Vue({
el : "#app",
data : {},
})
</script>
</body>
</html>
组件的私有化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <my-btn></my-btn>
<my-btn></my-btn>
<my-btn></my-btn> -->
<mybtn></mybtn>
</div>
<script src="./js/vue.js"></script>
<script>
// my-btn 命名 通常为 xx-xxx 一般不要起myBtn这种组件名，如果一定要使用，使用组建时也必须是<my-btn></my-btn>
Vue.component('my-btn', {
template : `<button @click="num++">您已经点击我 {{num}} 次了</button>`,
data() { // data是一个函数，才能复用
return {
num : 0
}
},
});
// 声明一个组件对象
var mybtn = {
template : `<button @click="num++">您已经点击我 {{num}} 次了</button>`,
data() { // data是一个函数，才能复用
return {
num : 10
}
},
}
var vm = new Vue({
el : "#app",
data : {},
components : { // 注册局部组件
mybtn, // 等同于 'mybtn' : mybtn
}
})
</script>
</body>
</html>
组件的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="onOff=!onOff">
<login-com v-if="onOff"></login-com>
<register-com v-else></register-com>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('login-com', {
template : `<h1>这是 login 组件</h1>`
})
Vue.component('register-com', {
template : `<h1>这是 register 组件</h1>`
})
var vm = new Vue({
el : "#app",
data : {
onOff : true
},
})
</script>
</body>
</html>
组件间的传值-向组件内传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<login :title="msg" :abc="msg"></login>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('login', {
template : `<h1> 这是 login 组件 -- {{num}} -- {{title}} -- {{abc}} </h1>`,
data() {
return {
num: 123
}
},
props : ['title','abc']
})
var vm = new Vue({
el : "#app",
data : {
msg : '标题信息22222'
},
})
</script>
</body>
</html>
组件间传值-向组件外传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<son @func="show"></son>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('son', {
template : `<button @click="sendMsg">发送数据</button>`,
data() {
return {
num : 1234
}
},
methods :{
sendMsg(){
// console.log('son : ' + num);
// $emit 触发组件上的事件
this.$emit('func',this.num);// 第一个参数是需要触发当前组件身上的函数，第二个参数要发送的数据
}
}
})
var vm = new Vue({
el : "#app",
data : {},
methods: {
show(num){
console.log('app : ' + num);
}
},
})
</script>
</body>
</html>
ref获取元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="getMsg">获取元素内容</button>
<h1 ref="myh1">这是一个<span>大标题</span></h1>
<login ref="mylogin"></login>
</div>
<script src="./js/vue.js"></script>
<script>
Vue.component('login',{
template : `<h1> 这是 login 组件 </h1>`,
data() {
return {
name : '张三'
}
},
})
var vm = new Vue({
el : "#app",
data : {},
methods: {
getMsg(){
console.log("innerHTML : "+this.$refs.myh1.innerHTML);
console.log("innerText : "+this.$refs.myh1.innerText);
console.log(this.$refs.mylogin.name);
}
},
})
</script>
</body>
</html>
网友评论