- Demo1:复习——父子组件传值
<!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>
- Demo2:复习——路由基本用法
<!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>
- Demo4——使用watch监听路由地址的改变
<!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>
- Demo5——使用vue实例的render方法渲染组件
<!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">
</div>
<script type="text/javascript" charset="UTF-8">
var login = {
template: '<p>这是登录组件</p>'
}
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
render: function(createElements) {
// createElements是一个方法,调用它能够将指定的组件模板,渲染为html结构
return createElements(login)
// 这里return的结果会替换页面中el指定的那个容器
}
});
</script>
</body>
</html>
Demo6——利用es6的Promise解决回调地狱
/*
1. Promise是一个构造函数,可以new Promise()得到一个Promise的实例
2. 在Promise上,有两个函数,分别叫做resolve(成功之后的回调函数)和reject(失败之后的回调函数)
3. 在Promise的构造函数的Prototype属性上,有一个.then()方法,只要是Promise构造函数创建的实例,都可以访问到.then()方法
4. Promise表示一个异步操作,每当我们new一个Promise的实例,这个实例就表示一个具体的异步操作
5. 既然Promise创建的实例是一个异步操作,那这个异步操作的结果只能有两种状态:
状态1:异步执行成功了,需要在内部调用成功的回调函数resolve把结果返回给调用者
状态2:异步执行失败了,需要在内部调用失败的回调函数reject把结果返回给调用者
由于Promise实例是一个异步操作,所以无法使用return把操作的结果返回给调用者,需要使用回调函数,把成功或失败的结果返回给调用者
6.我们可以在Promise实例上调用.then()方法,预先为这个Promise异步操作指定成功和失败的回调函数
7.Promise实例中的构造函数一经创建就会执行,如果想按需调用,需要用函数包裹起来
8.通过.then指定回调函数的时候,成功的回调函数必须传,但失败的回调可以不传
9.通过.catch捕获异常,当任意一个.then异常时都会中止,转而去执行.catch
10.如果希望一个.then发生异常后下一个.then继续执行,应该为.then指定失败时的回调
11.如果希望一个.then发生异常后不继续执行其他.then,不要为.then指定失败时的回调,而使用.catch捕获异常
12.如果使用.catch,则所有的.then都不能有失败的回调
*/
const fs = require('fs')
function getFileByPath(fpath) {
vue promise = new Promise(function(resolve, reject) {
fs.readFile(fpath, 'utf-8', (err, dataStr) => {
if (err) return reject(err)
resolve(dataStr)
})
})
return promise
}
/*
下面这种情况就叫做“回调地狱”
getFileByPath('./1.txt')
.then(function(data) {
console.log(data)
getFileByPath('./2.txt')
.then(function(data) {
console.log(data)
getFileByPath('./3.txt')
.then(function(data) {
console.log(data)
}, function(err) {
console.log(err.message)
})
}, function(err) {
console.log(err.message)
})
}, function(err) {
console.log(err.message)
})
*/
// 正确用法
getFileByPath('./1.txt')
.then(function(data) {
console.log(data)
return getFileByPath('./2.txt')
}, function(err) {
console.log(err.message)
return getFileByPath('./2.txt')
})
.then(function(data) {
console.log(data)
return getFileByPath('./3.txt')
}, function(err) {
console.log(err.messtage)
return getFileByPath('./3.txt')
})
.then(function(data) {
console.log(data)
}, function(err) {
console.log(err.message)
})
getFileByPath('./1.txt')
.then(function(data) {
console.log(data)
return getFileByPath('./2.txt')
}
.then(function(data) {
console.log(data)
return getFileByPath('./3.txt')
}
.then(function(data) {
console.log(data)
}
.catch(function(err) {
console.log(err.message)
})