Vue基础如何深入掌握和灵活运用？
摘要：demo01 <!DOCTYPE html> <html lang="en"> &l
demo01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
<h1>{{msg}}</h1>
</div>
<script>
new Vue({
el:'#example',
data:{
msg:'Hello VueJS'
}
});
</script>
</body>
</html>
demo02_双花括号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{num1+num2}}</p>
<h1>{{list[0]}}</h1>
<p>{{"当前汽车的品牌是"+car.brand}}</p>
</div>
<script>
new Vue({
el:'#container',
data:{
num1:10,
num2:20,
list:[100,200,300],
car:{price:10,brand:'volvo'}
}
});
</script>
</body>
</html>
demo03_lianxi
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<table>
<thead>
<tr>
<th>性别</th>
<th>年龄</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{stuList[0].sex}}</td>
<td>{{stuList[0].age}}</td>
<td>{{stuList[0].score}}</td>
</tr>
<tr>
<td>{{stuList[1].sex}}</td>
<td>{{stuList[1].age}}</td>
<td>{{stuList[1].score}}</td>
</tr>
<tr>
<td>{{stuList[2].sex}}</td>
<td>{{stuList[2].age}}</td>
<td>{{stuList[2].score}}</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el:'#example',
data:{
stuList:[
{
sex:'female',
age:18,
score:80
},
{sex:'female',age:22,score:83},
{sex:'female',age:20,score:82}
]
}
})
</script>
</body>
</html>
demo04_循环
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<ul>
<li v-for="tmp in list">
{{tmp}}
</li>
</ul>
<ul>
<li v-for="(value,index) in list">
<p>
{{'第'+index+"个元素是"+value}}
</p>
</li>
</ul>
</div>
<script>
new Vue({
el:'#example',
data:{
list:[100,200,300]
}
})
</script>
</body>
</html>
demo05_选择
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<p>{{msg}}</p>
<h1 v-if="count > 3">{{count}}</h1>
<!--
if(answer == 'a'){}
else if(answer == 'b'){}
else if(answer == 'c'){}
else if(answer == 'd'){}
else{}
-->
<p v-if="answer == 'a'">
A:正确答案是A
</p>
<p v-else-if="answer == 'b'">
B:正确答案是B
</p>
<p v-else-if="answer == 'c'">
C:正确答案是C
</p>
<p v-else-if="answer == 'd'">
D:正确答案是D
</p>
<p v-else>请输入正确答案</p>
</div>
<script>
new Vue({
el:'#example',
data:{
msg:'VueJS is Awesome',
count:4,
answer:'d'
}
})
</script>
</body>
</html>
demo06_事件绑定
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<p>{{count}}</p>
<button
v-on:click="handleClick()">clickMe</button>
<button
@click="handleClick()">clickMe</button>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
count:0
},
methods:{
handleClick:function(){
//alert('btn is clicked');
//在按钮按下时，count自增操作
this.count++;
}
}
})
</script>
</body>
</html>
demo07_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<ul v-if="list.length <= 10">
<li v-for="myValue in list">
{{myValue}}
</li>
</ul>
<button v-on:click="addToList">
clickMe
</button>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
list:[100,200,300]
},
methods:{
//向数组中插入一条随机的数据
addToList:function(){
var num =
Math.floor(Math.random()*100);
this.list.push(num);
}
}
})
</script>
</body>
</html>
demo08_属性绑定
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<!--属性绑定：将变量中的值 取出来 给 指定的属性-->
<a v-bind:href="myUrl"> test </a>
<!--指令的简写方式-->
<a :href="myUrl"> test </a>
<img v-bind:src="'img/'+imgName" alt=""/>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
myUrl:'http://www.tedu.cn',
imgName:'1.jpg'
}
})
</script>
</body>
</html>
demo09_动态样式
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
<style>
.myRed{
color:red
}
</style>
</head>
<body>
<div id="example">
<h1 :class="{myRed:false}">this is a test</h1>
<p :style=
"{backgroundColor:myBGColor}">
{{msg}}
</p>
<button @click="changBGColor">
点击改变p背景色
</button>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
myBGColor:'#ff0000'
},
methods:{
changBGColor:function(){
//修改myBGColor这个变量
this.myBGColor = '#0000ff'
}
}
})
</script>
</body>
</html>
demo10_其他指令
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<p>{{msg}}</p>
<!--
v-if决定是否挂载到DOM，v-show通过display决定是否显示
-->
<h1 v-if="isMember">仅会员可见</h1>
<h1 v-show="isMember">仅会员可见</h1>
<div v-html="msg">
<p>hello paragraph</p>
</div>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
isMember:false
}
})
</script>
</body>
</html>
demo11_双向绑定
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<!--
注意：双向绑定只能用在表单元素中！
方向1：从数据绑定到视图
方向2：将视图中用户操作的结果绑定到数据
-->
<p>{{msg}}</p>
<input type="text" v-model="uname"/>
<h1>{{uname}}</h1>
<input type="checkbox"
v-model="isUserAgree"/> 是否同意
<br/>
<button :disabled="!isUserAgree">
注册
</button>
<br>
<input type="text"
v-model.number="num1"/>
<br>
<input type="text"
v-model.number="num2"/>
<br>
<button @click="addSum">求和</button>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
uname:'zhangsan',
isUserAgree:false,
num1:0,
num2:0
},
methods:{
addSum:function(){
var result = this.num1+this.num2;
console.log(result);
}
}
})
</script>
</body>
</html>
demo12_组件
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<p>{{msg}}</p>
<my-button></my-button>
<my-header></my-header>
<my-cart></my-cart>
</div>
<script>
// file->settings->languages->js->es6
Vue.component('my-cart',{
template:`<div>
<h2>这是购物车</h2>
<p>test</p>
<my-button></my-button>
</div>`
})
//创建一个全局组件
Vue.component('my-button',{
template:'<button>TestButton</button>'
});
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
},
components: {
'my-header': {
template:'<h1>it is a header</h1>'
}
}
})
</script>
</body>
</html>
、*************************************************Day02**********************************************
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
<style>
.btnSelect{
background-color: blue;
}
</style>
</head>
<body>
<div id="example">
<button
:disabled="nowPage == 1">
上一页
</button>
<!--
btnSelect这个样式类是否要添加到button，取决于用户所选择的页码和当前pageList遍历时的页码是否一致
-->
<button
@click="choosePage(tmp)"
:class
="{btnSelect:nowPage == tmp}"
v-for="tmp in pageList">
{{tmp}}
</button>
<button
:disabled="nowPage == 5">下一页</button>
</div>
<script>
new Vue({
el:'#example',
data:{
pageList:[1,2,3,4,5],
nowPage:1
},
methods:{
choosePage:function(page){
//将nowPage修改为当前所选中的页码
this.nowPage = page;
}
}
});
</script>
</body>
</html>
1、复合组件
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<!--调用my-list组件-->
<my-list></my-list>
</div>
<script>
Vue.component('my-list',{
template:`
<ol>
<my-item></my-item>
<my-item></my-item>
<my-item></my-item>
</ol>
`
})
Vue.component('my-item',{
template:`
<li> test </li>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo02_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<store-cart></store-cart>
</div>
<script>
Vue.component('my-header',{
template:`
<h1>这是购物车页面的标题</h1>
`
})
Vue.component('my-footer',{
template:`
<p> 这是购物车页面的页脚 </p>
`
})
Vue.component('my-list',{
template:`
<ul>
<li>MongoDB权威指南</li>
<li>Angular权威指南</li>
<li>VueJS权威指南</li>
</ul>
`
})
Vue.component('store-cart',{
template:`
<my-header></my-header>
<my-list></my-list>
<my-footer></my-footer>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo03_自定义指令
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<store-cart></store-cart>
</div>
<script>
Vue.component('my-header',{
template:`
<h1>这是购物车页面的标题</h1>
`
})
Vue.component('my-footer',{
template:`
<p> 这是购物车页面的页脚 </p>
`
})
Vue.component('my-list',{
template:`
<ul>
<li>MongoDB权威指南</li>
<li>Angular权威指南</li>
<li>VueJS权威指南</li>
</ul>
`
})
Vue.component('store-cart',{
template:`
<my-header></my-header>
<my-list></my-list>
<my-footer></my-footer>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo04_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<p v-change-bg="myColor">{{msg}}</p>
</div>
<script>
//创建指令
Vue.directive('change-bg',{
bind:function(el,binding){
console.log(
'指令被调用了',
binding.value);
el.style.backgroundColor
= binding.value;
}
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
myColor:'#ff0000'
}
})
</script>
</body>
</html>
demo05_自定义过滤器
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<p>{{msg}}</p>
<h1>{{100 | currency(1)}}</h1>
</div>
<script>
//创建
//需求：如果在调用currency过滤器的时候，传递的参数是0，显示美元；是1，显示人民币
Vue.filter('currency',function(arg,arg1){
console.log(arg1,arg2);
//根据业务的要求，对数据采取处理措施
//最终一定要记得将处理的结果进行返回
if(arg1 == 0)
{
return '$'+arg;
}
else{
return '￥'+arg;
}
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo06_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<!--使用-->
<h1>{{0 | sex('zh')}}</h1>
<h1>{{0 | sex('en')}}</h1>
<h1>{{1 | sex('zh')}}</h1>
<h1>{{1 | sex('en')}}</h1>
</div>
<script>
//创建过滤器
Vue.filter('sex',function(arg,arg1){
console.log(arg,arg1);
//根据arg是0还是1，根据arg1是zh还是en，返回boy/girl/男/女
if(arg == 0)
{
if(arg1 == 'zh'){
return '女'
}
else{
return 'girl'
}
}
else
{
if(arg1 == 'zh'){
return '男'
}
else{
return 'boy'
}
}
});
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo07_lifecycle
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<my-component v-if="showCom">
</my-component>
</div>
<script>
Vue.component('my-component',{
beforeCreate:function(){
console.log('组件准备创建');
},
created:function(){
console.log('组件创建完毕');
},
beforeMount:function(){
console.log('准备挂载');
},
mounted(){
console.log('挂载完毕');
},
beforeUpdate:function(){
console.log('准备更新');
},
updated:function(){
console.log('更新完毕')
},
beforeDestroy:function(){
console.log('准备销毁');
},
destroyed:function(){
console.log('销毁完成');
},
data:function(){
return {count:1}
},
methods:{
modifyCount:function(){
//修改数据
this.count++;
}
},
template:`
<div>
<p>{{count}}</p>
<button
@click="modifyCount">
clickMe
</button>
</div>
`
})
new Vue({
el: '#example',
mounted:function(){
console.log('---------');
//控制my-component组件的显示和移除
setTimeout(
()=>{
console.log(this);
this.showCom = false;
},
2000
);
},
data: {
msg: 'VueJS is Awesome',
showCom:true
}
})
</script>
</body>
</html>
demo08_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<test-component></test-component>
</div>
<script>
//创建组件
Vue.component('test-component',{
mounted:function(){
console.log('组件挂载完毕');
//启动一个定时器，来周期性修改数值0 ~ 1
setInterval(()=>{
//修改一个变量
this.opacityValue+=0.1;
if(this.opacityValue > 1){
this.opacityValue = 0;
}
},500);
},
data:function(){
return {opacityValue:0}
},
template:`
<h1
:style="{opacity:opacityValue}">
it is a header
</h1>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo09_watch
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<test-component></test-component>
</div>
<script>
Vue.component('test-component',{
data:function(){
return {uName:''}
},
template:`
<input
type="text" v-model="uName"/>
`,
watch:{
uName:
function(newValue,oldValue){
console.log(this.uName);
console.log(arguments);
}
}
});
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo10_computed
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<ul>
<li v-for="tmp in list">
<h2>{{myFunc()}}</h2>
<p>{{myComput}}</p>
</li>
</ul>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome',
list:[100,200,300],
count:0
},
mounted:function(){
setInterval(()=>{
this.list.push(Math.random()*100);
},500);
},
methods:{
myFunc:function(){
console.log('in func');
return this.count;
}
},
computed:{
myComput:function(){
console.log('in computed');
return this.count;
}
}
})
</script>
</body>
</html>yyx
***** *Day03 *****************************
综合练习：
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<to-do-box></to-do-box>
</div>
<script>
//创建一个事件总线，用来完成某个组件对于事件的绑定和触发
var bus = new Vue();
//todoitem
Vue.component('to-do-item',{
template:`
<li>
<button>delete</button>
<span>待做事项</span>
</li>
`
});
Vue.component('to-do-list',{
created:function(){
//绑定一个自定义的事件 处理函数
bus.$on('addEvent',function(msg){
console.log('todolist收到的todoinput传来的数据是'+msg);
})
},
template:`
<ul>
<to-do-item></to-do-item>
<to-do-item></to-do-item>
</ul>
`
})
Vue.component('to-do-input',{
data:function(){
return {
uInput:''
}
},
methods:{
handleClick:function(){
//将input中用户输入的信息发给todolist
bus.$emit('addEvent',this.uInput)
}
},
template:`
<div>
<h2>待做事项列表</h2>
<input v-model="uInput"
type="text" placeholder="请输入"/>
<button @click="handleClick">add</button>
</div>
`
})
Vue.component('to-do-box',{
template:`
<div>
<to-do-input></to-do-input>
<to-do-list></to-do-list>
</div>
`
})
new Vue({
el:'#example',
components:{
'my-header':{
template:'<h1></h1>'
}
}
})
</script>
</body>
</html>
demo01_父与子通信
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<my-cart></my-cart>
</div>
<script>
Vue.component('my-cart',{
template:`
<my-header myTitle="购物车">
</my-header>
`
});
Vue.component('my-header',{
props:['myTitle'],
template:`
<h1>{{myTitle}}</h1>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo02_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<my-login></my-login>
</div>
<script>
Vue.component('my-input',{
props:['labelName','tips'],
template:`
<div>
{{labelName}}:
<input type="text"
:placeholder="tips"/>
</div>
`
})
Vue.component('my-button',{
props:['btnName'],
template:`<button>{{btnName}}</button>`
})
Vue.component('my-login',{
template:`
<form>
<my-input
tips="请输入用户名"
labelName="用户名">
</my-input>
<my-input
tips="请输入密码"
labelName="密码">
</my-input>
<my-button btnName="登录">
</my-button>
<my-button btnName="注册">
</my-button>
</form>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo03_子与父通信
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<parent></parent>
</div>
<script>
Vue.component('parent',{
data:function(){
return {
myValue:''
}
},
methods:{
rcvMsg:function(msg){
console.log('接收到数据了'+msg);
this.myValue = msg;
}
},
template:`
<div>
<h1>这是父组件</h1>
<p>
{{"子组件传来的数据是"+myValue}}
</p>
<hr/>
<son @toFather="rcvMsg"></son>
</div>
`
})
Vue.component('son',{
methods:{
handleClick:function(){
//触发事件
this.$emit('toFather',123)
}
},
template:`
<div>
<h1>这是子组件</h1>
<button @click="handleClick">
发送给父组件
</button>
</div>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo04_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<my-chatroom></my-chatroom>
</div>
<script>
Vue.component('my-user',{
props:['uname'],
data:function(){
return {userInput:''}
},
methods:{
sendToFather:function(){
//触发事件
var msg =
this.uname+":"+this.userInput;
this.$emit('sendEvent',msg);
this.userInput = "";
}
},
template:`
<div>
{{uname}}:
<input
type="text"
v-model="userInput"
placeholder="plz input"/>
<button @click="sendToFather">
发送
</button>
</div>
`
})
Vue.component('my-chatroom',{
data:function(){
return {
msgList:[]
}
},
methods:{
rcvMsg:function(msg){
console.log(msg);
this.msgList.push(msg);
}
},
template:`
<div>
<ul>
<li v-for="tmp in msgList">
{{tmp}}
</li>
</ul>
<my-user
@sendEvent="rcvMsg"
uname="lucy"></my-user>
<my-user
@sendEvent="rcvMsg"
uname="michael">
</my-user>
</div>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo05_ref
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<my-cart></my-cart>
</div>
<script>
Vue.component('my-header',{
data:function(){
return {
isUserLogin:true
}
},
template:`
<div>
<h1>这是页头</h1>
</div>
`
})
Vue.component('my-cart',{
data:function(){
return {
uLogin:false
}
},
mounted:function(){
//测试
console.log(this.$refs.header);
this.uLogin =
this.$refs.header.isUserLogin
},
template:`
<div>
<my-header ref="header">
</my-header>
<ul v-if="uLogin">
<li>test01</li>
<li>test02</li>
<li>test03</li>
</ul>
</div>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo06_parent
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<parent></parent>
</div>
<script>
Vue.component('parent',{
data:function(){
return {
myTreasure:'清朝年间的马桶'
}
},
template:`
<div>
<h1>这是父组件</h1>
<hr/>
<son></son>
</div>
`
})
Vue.component('son',{
mounted:function(){
console.log(
this.$parent.myTreasure);
},
template:`
<div>
<h1>这是子组件</h1>
</div>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo07_bus
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<xiong-da></xiong-da>
<xiong-er></xiong-er>
</div>
<script>
//创建一个Vue的实例 作为eventBus来去使用
var bus = new Vue();
//熊大（发送方 触发事件）
// --》
//熊二（接收方 绑定事件）
Vue.component('xiong-da',{
created:function(){
//绑定事件处理函数
bus.$on('toDa',function(msg){
console.log(
'熊二给熊大发的消息是'+msg);
})
},
methods:{
//定义一个方法，通知熊二
notifyEr:function(){
//触发事件
bus.$emit(
'toErEvent',
'快跑！光头强来了')
}
},
template:`
<div>
<h1>这是熊大</h1>
<button @click="notifyEr">
发现光头强
</button>
</div>
`
})
Vue.component('xiong-er',{
created:function(){
//通过js的方式绑定事件
bus.$on('toErEvent',function(msg){
console.log('熊二接收到事件了'+msg);
});
},
methods:{
replyXiongDa:function(){
//通过触发事件去传值
bus.$emit('toDa','怕啥!');
}
},
template:`
<div>
<h1>这是熊二</h1>
<button @click="replyXiongDa">
回复熊大
</button>
</div>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo08_组件
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<test-component></test-component>
</div>
<script
id="myContent"
type="text/x-template">
<div>
<p> it is a paragraph </p>
<h1> it is a header </h1>
</div>
</script>
<script>
Vue.component('test-component',{
template:'#myContent'
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
*************************DAY04*********************************
综合练习：
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<to-do-box></to-do-box>
</div>
<script>
//创建一个事件总线，用来完成某个组件对于事件的绑定和触发
var bus = new Vue();
//todoitem
Vue.component('to-do-item',{
props:['content','myIndex'],
methods:{
handleClick:function(){
//触发事件
this.$emit(
'deleteEvent',this.myIndex);
// this.$parent.list.splice(
// this.myIndex,1)
}
},
template:`
<li>
<button @click="handleClick">
delete
</button>
<span>{{content}}</span>
</li>
`
});
Vue.component('to-do-list',{
data:function(){
return {list:[]}
},
methods:{
deleteFromList:function(index){
console.log("todolist接收到todoitem所传递来的数据是"+index);
this.list.splice(index,1);
}
},
created:function(){
//绑定一个自定义的事件 处理函数
bus.$on('addEvent',(msg)=>{
console.log('todolist收到的todoinput传来的数据是'+msg);
//将todoinput传来的数据 保存在数组中
this.list.push(msg);
})
},
template:`
<ul>
<to-do-item
@deleteEvent="deleteFromList"
:content="tmp"
:myIndex="index"
:key="index"
v-for="(tmp,index) in list"></to-do-item>
</ul>
`
})
Vue.component('to-do-input',{
data:function(){
return {
uInput:''
}
},
methods:{
handleClick:function(){
//将input中用户输入的信息发给todolist
bus.$emit('addEvent',this.uInput)
}
},
template:`
<div>
<h2>待做事项列表</h2>
<input v-model="uInput"
type="text" placeholder="请输入"/>
<button @click="handleClick">add</button>
</div>
`
})
Vue.component('to-do-box',{
template:`
<div>
<to-do-input></to-do-input>
<to-do-list></to-do-list>
</div>
`
})
new Vue({
el:'#example',
components:{
'my-header':{
template:'<h1></h1>'
}
}
})
</script>
</body>
</html>
demo01
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<!--指定一个盛放代码片段的容器-->
<router-view></router-view>
</div>
<script>
var Login = Vue.component(
'login-component',
{
methods:{
handleClick:function(){
//跳转到注册页面
this.$router.push('/myRegister');
}
},
template:`
<div>
<h1>这是登录页面</h1>
<button @click="handleClick">
没有账号，去注册
</button>
<router-link to="/myRegister">
去注册
</router-link>
</div>
`
}
)
var Register = Vue.component('register-component',{
template:`
<h1>这是注册页面</h1>
`
})
//配置路由词典
const myRoutes = [
{path:'/myLogin',component:Login},
{path:'/myRegister',component:Register}
];
const myRouter = new VueRouter(
{
routes:myRoutes
}
);
new Vue({
el: '#example',
router:myRouter,
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo02_lianxi
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<!--指定一个容器-->
<router-view></router-view>
</div>
<script>
var Login = Vue.component('login-component',{
template:`
<div>
<h1>这是登录页面</h1>
<router-link to="/myMain">
登录到主页面
</router-link>
</div>
`
})
var Main = Vue.component('main-component',{
methods:{
logout:function(){
this.$router.push('/myLogin')
}
},
template:`
<div>
<h1>这是主页面</h1>
<button @click="logout">退出登录</button>
</div>
`
})
const myRoutes = [
{path:'/myLogin',component:Login},
{path:'/myMain',component:Main}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
el: '#example',
router:myRouter,
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo03_arg
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<!--指定容器-->
<router-view></router-view>
</div>
<script>
var List = Vue.component(
'list-component',
{
data:function(){
return {pList:[100,200,300]}
},
methods:{
jump:function(myIndex){
this.$router
.push('/myDetail/'+myIndex);
}
},
template:`
<ul>
<li v-for="(tmp,index) in pList">
<button @click="jump(index)">
{{tmp}}
</button>
</li>
</ul>
`
}
);
var Detail = Vue.component(
'detail-component',
{
data:function(){
return {myId:""}
},
created:function(){
//举例：现在在组件创建完毕之后去读取通过路由跳转传来的参数
this.myId =
this.$route.params.id;
},
template:`
<h1>这是详情页 {{myId}}</h1>
`
}
)
var NotFound = Vue.component(
'not-found',
{
template:`
<h1>404 page not found</h1>
`
}
)
const myRoutes = [
{path:'',component:List},
{path:'/myList',component:List},
{
path:'/myDetail/:id',
component:Detail
},
{path:'*',component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
el: '#example',
router:myRouter,
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo04
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<router-view></router-view>
</div>
<script>
var Check = Vue.component('check-component',{
data:function(){
return {price:100}
},
methods:{
jumpToPay:function(){
this.$router
.push('/myPay/'+this.price);
}
},
template:`
<div>
<h1>商品查看页面</h1>
<router-link
:to="'/myPay/'+price">
去支付
</router-link>
<button @click="jumpToPay">
去支付
</button>
</div>
`
})
var Pay = Vue.component('pay-component',{
data:function(){
return {
myPrice:""
}
},
created:function(){
this.myPrice =
this.$route.params.price
},
template:`
<div>
<h1>商品支付页面</h1>
<h1>{{"当前商品价格为"+myPrice}}</h1>
<router-link to="/mySend">
支付完成，去发货
</router-link>
</div>
`
})
var Send = Vue.component('send-component',{
methods:{
jumpToCheck:function(){
this.$router.push('/myCheck')
}
},
template:`
<div>
<h1>商品发货页面</h1>
<button @click="jumpToCheck">
查看商品
</button>
</div>
`
})
var NotFound = Vue.component(
'not-found',
{
template:`
<h1>404 page not found</h1>
`
}
)
new Vue({
el: '#example',
router:new VueRouter({
routes:[
{path:'',component:Check},
{path:'/myCheck',component:Check},
{
path:'/myPay/:price',
component:Pay
},
{path:'/mySend',component:Send},
{path:'*',component:NotFound}
]
}),
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo05_路由嵌套
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<title>Title</title>
</head>
<body>
<div id="example">
<router-view></router-view>
</div>
<script>
var Login = Vue.component(
'login-component',{
template:`
<div>
<h1>这是登录页面</h1>
</div>
`
})
var Mail = Vue.component(
'mail-component',{
methods:{
jump:function(desPath){
this.$router.push(desPath);
},
back:function(){
this.$router.go(-1);
}
},
template:`
<div>
<h1>这是邮箱主页面</h1>
<button @click="back">
返回
</button>
<button
@click="jump('/myInbox')">
收件箱
</button>
<button
@click="jump('/myOutbox')">
发件箱
</button>
<router-view></router-view>
</div>
`
}
)
var Inbox = Vue.component(
'Inbox-component',{
template:`
<ul>
<li>收件箱1</li>
<li>收件箱2</li>
<li>收件箱2</li>
</ul>
`
}
)
var Outbox = Vue.component(
'Outbox-component',{
template:`
<ul>
<li>发件箱1</li>
<li>发件箱2</li>
<li>发件箱3</li>
</ul>
`
}
)
const myRoutes = [
{path:'',component:Login},
{path:'/myLogin',component:Login},
{
path:'/myMail',
component:Mail,
children:[
{path:'',component:Inbox},
{path:'/myInbox',component:Inbox},
{path:'/myOutbox',component:Outbox}
]
}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
el: '#example',
router:myRouter,
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>
demo06_http
<wiz_code_mirror>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="js/vue-resource.js">
</script>
<title>Title</title>
</head>
<body>
<div id="example">
<test-component></test-component>
</div>
<script>
//希望在组件创建完毕之后，向服务器端发起请求
//将请求到的数据 保存在list数组
Vue.component('test-component',{
created:function(){
//发请求
this.$http
.get('http://jsonplaceholder.typicode.com/users')
.then((response)=>{
console.log(response.data);
this.list = response.data;
})
},
data:function(){
return {list:[]}
},
template:`
<ul>
<li v-for="tmp in list">
{{tmp.name}}
</li>
</ul>
`
})
new Vue({
el: '#example',
data: {
msg: 'VueJS is Awesome'
}
})
</script>
</body>
</html>