<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<com1 :parentmsg="msg" @func="getMsgFormSon"></com1>
</div>
<template id="tmpl">
<div>
<p>子組件---{{ parentmsg }}</p>
<button @click="sendMsg">向父組件傳值</button>
</div>
</template>
<script type="text/javascript" charset="UTF-8">
var com1 = {
template: '#tmpl',
props: ['parentmsg'],
data() {
return {
msg: '子組件的數據'
}
},
methods: {
sendMsg(){
this.$emit('func', this.msg)
console.log(this.msg)
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg: '父組件的數據',
msgFormSon: ''
},
methods: {
getMsgFormSon(data){
this.msgFormSon = data
console.log(data)
}
},
components: {
com1
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/vue-router.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
<script type="text/javascript" charset="UTF-8">
var login = {
template: '<p>登錄部分</p>'
}
var register = {
template: '<p>註冊部分</p>'
}
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive'
})
var vm = new Vue({
el: '#app',
router
})
</script>
</body>
</html>
- Demo3：名稱案例——利用對keyup事件的監聽實現姓名拼接、使用watch監聽文本框數據的改變實現姓名拼接、使用computed計算屬性實現姓名拼接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/vue-router.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<p>監聽keyup實現姓名拼接</p>
<input placeholder="姓" type="text" v-model="firstname1" @keyup="getFullname1"> +
<input placeholder="名" type="text" v-model="lastname1" @keyup="getFullname1"> =
<input placeholder="姓名" type="text" v-model="fullname1">
<br><br><hr>
<p>使用watch監聽文本框數據的變化實現姓名拼接</p>
<input placeholder="姓" type="text" v-model="firstname2"> +
<input placeholder="名" type="text" v-model="lastname2"> =
<input placeholder="姓名" type="text" v-model="fullname2">
<br><br><hr>
<p>使用computed計算屬性實現姓名拼接</p>
<input placeholder="姓" type="text" v-model="firstname3"> +
<input placeholder="名" type="text" v-model="lastname3"> =
<input placeholder="姓名" type="text" v-model="fullname3">
</div>
<script type="text/javascript" charset="UTF-8">
var vm = new Vue({
el: '#app',
data: {
firstname1: '',
lastname1: '',
fullname1: '',
firstname2: '',
lastname2: '',
fullname2: '',
firstname3: '',
lastname3: ''
// 此處不用也不能定義fullname3，會與computed中的衝突
},
methods: {
// 監聽數據變化，進行業務邏輯操作，可以看做watch和computed的結合體
// 適合寫方法調用
getFullname1() {
this.fullname1 = this.firstname1 + this.lastname1
}
},
watch: { // 可以監視data中數據的變化，然後觸發在這裏面定義的函數
// 更側重業務邏輯的處理
// 適合監聽虛擬的、非DOM的值，比如路由
'firstname2': function(newVal, oldVal) {
this.fullname2 = newVal + this.lastname2
},
'lastname2': function(newVal, oldVal) {
this.fullname2 = this.firstname2 + newVal
}
},
computed: { // computed中定義的屬性稱爲“計算屬性”，其本質是一個方法，只不過使用時直接把方法名當做屬性，並不會作爲方法被調用
// 計算屬性的求值結果，會被緩存起來，方便下次直接使用
// 只適合簡單求值
// 適合經過一系列複雜運算/操作後返回一個結果的場景
'fullname3': function() {
return this.firstname3 + this.lastname3
}
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/vue-router.js" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<router-link to="/login">登錄</router-link>
<router-link to="/register">註冊</router-link>
<router-view></router-view>
</div>
<script type="text/javascript" charset="UTF-8">
var login = {
template: '<p>登錄部分</p>'
}
var register = {
template: '<p>註冊部分</p>'
}
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive'
})
var vm = new Vue({
el: '#app',
router,
watch: {
'$route.path': function(newVal, oldVal) {
console.log(newVal + '---' + oldVal)
}
}
})
</script>
</body>
</html>
