173 lines
3.4 KiB
HTML
173 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Title</title>
|
||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
||
<style>
|
||
.red {
|
||
color: red;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
|
||
<div id="app">
|
||
<h2>{{getIndexData}}</h2>
|
||
|
||
<input v-model="phone" type="number" placeholder="输入手机号">
|
||
|
||
<h2 :class="{ red: isRed }">测试1</h2>
|
||
|
||
<h2 :class="isRed ? 'red' : '' ">测试2</h2>
|
||
|
||
<h2>仿照微信支付键盘</h2>
|
||
|
||
<h-header @dddd="FatherClick" :content="list" title="测试标题1"></h-header>
|
||
|
||
<!-- <h-header @dddd="FatherClickTwo" title="测试标题2"></h-header>-->
|
||
|
||
<!--3 使用局部组件-->
|
||
<v-jubu ref="hello">
|
||
<!-- <template v-slot:like>-->
|
||
<!-- 收藏-->
|
||
<!-- </template>-->
|
||
<div slot="like" class="like">收藏</div>
|
||
</v-jubu>
|
||
|
||
</div>
|
||
|
||
|
||
</body>
|
||
|
||
<script>
|
||
// watch 监听数据的变化，可以获得新数值和旧数值
|
||
// computed 计算属性 作用和 methods类似，计算结果会被缓存（变量没有发生改变）
|
||
// 组件 实现html的复用，类似于js的function函数
|
||
// 全局组件
|
||
// 局部组件
|
||
|
||
// 组件间数据传递
|
||
// 父组件 ---> 子组件
|
||
// props
|
||
// 子组件 ---> 父组件
|
||
// $emit
|
||
|
||
// 父子互调(数据的访问和修改，方法) $children $parent $root ， $refs
|
||
|
||
//
|
||
|
||
|
||
// 全局组件
|
||
Vue.component('h-header', {
|
||
// props: ['it'],
|
||
props: {
|
||
content: Array,
|
||
// content: {
|
||
// type: Array, // 这个变量 content 能存放的数据类型
|
||
// default: []
|
||
// },
|
||
title: {
|
||
type: String,
|
||
default: ""
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
message: '我是组件 v-header'
|
||
}
|
||
},
|
||
methods: {
|
||
submit() {
|
||
this.$emit("dddd","3")
|
||
}
|
||
},
|
||
template: `
|
||
<div>
|
||
<button @click="submit">提交</button>
|
||
<h2>{{title}}</h2>
|
||
<ul>
|
||
<li v-for="(item,index) in content">{{item.id}}</li>
|
||
</ul>
|
||
</div>
|
||
`
|
||
});
|
||
|
||
// 局部组件 1：导入（定义）组件
|
||
var JuBuZuJian = {
|
||
data() {
|
||
return {
|
||
mesaage: '我是局部注册的组件'
|
||
}
|
||
},
|
||
methods: {
|
||
setChilder() {
|
||
return "哈哈哈哈"
|
||
}
|
||
},
|
||
template: `
|
||
<div>
|
||
<h2>{{mesaage}}</h2>
|
||
<h3>
|
||
<slot name="like"></slot>
|
||
</h3>
|
||
</div>
|
||
`
|
||
}
|
||
|
||
new Vue({
|
||
el: '#app',
|
||
data: {
|
||
message: 'dededede',
|
||
phone: '',
|
||
isRed: false,
|
||
list: [
|
||
{id:2},
|
||
{id:3},
|
||
{id:4}
|
||
]
|
||
},
|
||
// 局部组件 2： 注册局部组件
|
||
components: {
|
||
'v-jubu':JuBuZuJian
|
||
},
|
||
|
||
created() {
|
||
// this.getIndexData()
|
||
},
|
||
mounted() {
|
||
// console.log(this.message)
|
||
this.$children[1].$data.mesaage = "sddddd"
|
||
console.log(this.$children[1].setChilder())
|
||
|
||
console.log(this.$refs.hello.setChilder())
|
||
|
||
},
|
||
methods: {
|
||
FatherClick(it) {
|
||
alert("登录："+it)
|
||
},
|
||
FatherClickTwo(it) {
|
||
alert("注册："+it)
|
||
}
|
||
// 发送ajax请求数据
|
||
// getIndexData() {
|
||
// console.log("发送ajax请求数据")
|
||
// }
|
||
},
|
||
computed: {
|
||
getIndexData() {
|
||
return "hello"
|
||
}
|
||
},
|
||
watch: {
|
||
phone(newVal,oldVal) {
|
||
console.log("newVal:",newVal)
|
||
console.log("oldVal:",oldVal)
|
||
}
|
||
}
|
||
})
|
||
|
||
</script>
|
||
</html> |