143 lines
3.0 KiB
HTML
143 lines
3.0 KiB
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>Vue.js</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
|
|
<style>
|
|
.on {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="zhansa">
|
|
<img :src="imgURL" alt="">
|
|
<a :href="href"> {{ title }} </a>
|
|
|
|
<p v-if="is">v-if</p>
|
|
<p v-else>v-else</p>
|
|
<p v-show="is">v-show</p>
|
|
|
|
|
|
<p v-if="status == 1">1</p>
|
|
<p v-else-if="status == 2">2</p>
|
|
<p v-else-if="status == 3">3</p>
|
|
<p v-else-if="status == 4">4</p>
|
|
<p v-else>没有</p>
|
|
|
|
<ul>
|
|
<li v-for="(item,index) in list" :key="index">
|
|
{{ item.title }} {{ index }}
|
|
</li>
|
|
</ul>
|
|
<button @click="test">点我</button>
|
|
<input type="text" v-model="username" placeholder="请输入账户">
|
|
|
|
|
|
<p>{{ username }}</p>
|
|
<p v-html="text"></p>
|
|
|
|
<lb-button @senddata="getChildenData"></lb-button>
|
|
|
|
<hr>
|
|
|
|
<v-lb :usertest="title"></v-lb>
|
|
|
|
<h2 :class="{ on : active }">2222</h2>
|
|
</div>
|
|
|
|
<script>
|
|
/**
|
|
* v-on 简写 @
|
|
* v-bind 简写 :
|
|
*
|
|
* 组件注册：全局组件
|
|
* 局部组件
|
|
*/
|
|
|
|
// 父 --> 子 props
|
|
// 子 --> 父 $emit
|
|
|
|
// 全局注册
|
|
Vue.component('lb-button', {
|
|
data() {
|
|
return {
|
|
count: '子组件数据'
|
|
}
|
|
},
|
|
methods: {
|
|
add() {
|
|
this.$emit("senddata", this.count)
|
|
}
|
|
},
|
|
template: '<button @click="add">点我，把子组件数据传递给父组件</button>'
|
|
});
|
|
|
|
let ComponentA = {
|
|
props: {
|
|
usertest: String
|
|
},
|
|
data() {
|
|
return {
|
|
count: 0
|
|
}
|
|
},
|
|
methods: {
|
|
add() {
|
|
this.count++
|
|
}
|
|
},
|
|
template: `<div><button @click="add">子组件 {{ count }} times.</button> <h2>{{ usertest }}</h2></div> `
|
|
}
|
|
|
|
new Vue({
|
|
el: '.zhansa',
|
|
data: {
|
|
title: '测试',
|
|
is: false,
|
|
href: 'https://www.juhe.cn/myData',
|
|
imgURL: 'https://cn.vuejs.org/images/logo.png',
|
|
list: [
|
|
{id: 1,title: "hahah "},
|
|
{id: 2,title: "www "},
|
|
{id: 3,title: "失误失误 "}
|
|
],
|
|
username: null,
|
|
text: '<h2>我是H2</h2>',
|
|
status: 10,
|
|
active: false
|
|
},
|
|
watch: {
|
|
username(val, oldVal) {
|
|
console.log("新数值： "+ val + "，旧数值：" + oldVal)
|
|
}
|
|
},
|
|
beforeCreate() {
|
|
console.log(this.title)
|
|
},
|
|
created() {
|
|
console.log("created: ",this.title)
|
|
},
|
|
mounted() {
|
|
console.log("mounted: ",this.title)
|
|
},
|
|
methods: {
|
|
test() {
|
|
alert(1)
|
|
},
|
|
getChildenData(val) {
|
|
console.log("父组件接收到的数据：",val)
|
|
}
|
|
},
|
|
components: {
|
|
'v-lb': ComponentA
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html> |