淘先锋技术网

首页 1 2 3 4 5 6 7

Vue.js

1.初识Vue,Hello Vue!

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app">
	  {{ message }} {{name}}
	</div>
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue!',
			name : "Vue"
		}
	});
	</script>
</body>
</html>

2.Vue列表显示

<body>
	<div id="app">
		<ul>
			<li v-for="item in message">
                {{ item }}
            </li>
		</ul>
	</div>
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			message: ['Hello Vue!','vue'],
		}
	});
	</script>
</body>

3.计数器

<body>
	<div id="app">
		<h3>当前计数 ：{{sum}}</h3>
		<!-- <button v-on:click="sum++">+</button>
		<button v-on:click="sum--">-</button> -->
		<button v-on:click="add">+</button>
		<button v-on:click="sub">-</button>
	</div>
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			sum: 0
		},
		methods:{//方法
			add: function(){
				console.log("++++");
				this.sum++
			},
			sub: function(){
				console.log("----");
				this.sum--
			}	
		}
	});
	</script>

4.mustache语法（双括号语法）插值操作

<body>
	<div id="app">
		<h2>{{xing}} {{ming}}</h2>
		<h2>{{xing + ' ' + ming}}</h2>
		<h2>{{xing}}今生</h2>
		<h2>{{sum * 2}}</h2>
	</div>
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			ming : '今生',
			xing : '李',
			sum : 100
		}
	});
	</script>
</body>

5.v-once指令

<body>
	<div id="app">
		<h2>{{message}}</h2>
		<h2 v-once>{{message}}</h2>   //当改变message值时页面不发生改变
	</div>
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			message : '哈哈哈'
		}
	});
	</script>
</body>

6.v-cloak（代码不执行不显示）     v-html（运行html代码）      v-pre（打啥显示啥）

<style>
	[v-cloak]{
		display: none;
	}
</style>
</head>
<body>
	<div id="app" v-cloak>  <!-- v-cloak代码未执行不显示 -->
		<h2>{{url}}</h2>
		<h2 v-html="url"></h2>
		<h2 v-text="message"></h2> <!--开发用不上 -->
		<h2 v-pre>{{message}}</h2> <!-- 直接展示 -->
	</div>
	<script type="text/javascript">
	setTimeout(function(){
	var app = new Vue({
		el: '#app',
		data: {
			url : '<a href="https://www.baidu.com" target="_blank" rel="external nofollow" >百度一下</a>',
			message : 'hhh',
			}
		})
	},1000);
	</script>
</body>

7.v-bind基本（动态绑定）

<body>
	<div id="app">  <!-- v-cloak代码未执行不显示 -->
		<img v-bind:src="url" />
		<a v-bind:href="baidu" target="_blank" rel="external nofollow" >百度</a>    <!-- ”:“ v-bind语法糖 -->
	</div>
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			url : 'https://cn.vuejs.org/images/logo.svg',
			baidu : 'https://www.baidu.com'
			}
		});
	</script>
</body>

8.v-bind较高级

<style>
	.active{
		color: red;
	}
</style>
</head>
<body>
	<div id="app">
		<h2 :class="{active : a , line : b}">{{message}}</h2>
		<button v-on:click="bian">按钮</button>
	</div>
	<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			message : 'nihaoa',
			active : 'active',
			a : true,
			b : false
			},
			methods:{
				bian : function(){
					this.a = !this.a
				}
			}
		});
	</script>
</body>

9.v-bind数组

<body>
<div id="app">
  <h2 :style="[findSize,findColor]">{{message}}</h2>
</div>
<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      message : 'hello',
	  findSize : {fontSize : '100px'},
	  findColor : {background : 'red'}
    }
  })
</script>
</body>

10.计算属性的使用

<body>
<div id="app">
  <h2>{{firstname}} {{lastname}}</h2>
  <h2>{{getname()}}</h2>
  <h2>{{name}}</h2>
</div>
<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      firstname : 'xiao',
	  lastname : 'ming'
    },
	computed:{
		name : function(){
			return this.firstname + ' ' + this.lastname
		}
	},
	methods:{
		getname : function(){
			return this.firstname + ' ' + this.lastname
		}
	}
  })
</script>
</body>

11.计算属性的复杂操作

<body>
<div id="app">
  <h2>总和为{{sum}}</h2>
</div>
<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      books : [
		  {name : 'qwe' , price : 99},
		  {name : 'www' , price : 100},
		  {name : 'wqq' , price : 10},
	  ]
    },
	computed:{
		sum : function(){
			let result = 0
			for(let i = 0 ; i <this.books.length ; i++){
				result += this.books[i].price
			}
			return result
		}
	}
  })
</script>
</body>

12.计算属性setter和getter，setter属性并不常用

<body>
<div id="app">
  <h2>{{fullname}}</h2>
</div>
<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      firstname : 'xiao',
	  lastname : 'ming'
    },
	computed:{
		fullname :{
		set : function(newValye){
			const names = newValye.split(' ');
			this.firstname = names[0];
			this.lastname = names[1];
		},
		get : function(){
			return this.firstname + ' ' + this.lastname
		},
		}
	}
  })
</script>
</body>

13.methods和computed的区别

<body>
<div id="app">
	<h2>{{firstname}} {{lastname}}</h2>
	<h2>{{fullname}}</h2>
	<h2>{{fullname}}</h2>
	<h2>{{fullname}}</h2>
	<!-- computed  计算属性只出现一次 -->
	<h2>{{getanme()}}</h2>
	<h2>{{getanme()}}</h2>
	<!-- methods 有几次出现几次 -->
</div>
<script type="text/javascript">
  var app = new Vue({
    el:"#app",
    data:{
      firstname : 'xiao',
	  lastname : 'ming'
    },
	methods:{
		getanme : function(){
			console.log('getname')
			return this.firstname + ' ' + this.lastname
		}
	},
	computed:{
		fullname :{
		set : function(newValye){
			const names = newValye.split(' ');
			this.firstname = names[0];
			this.lastname = names[1];
		},
		get : function(){
			console.log('fullname')
			return this.firstname + ' ' + this.lastname
		},
		}
	}
  })
</script>
</body>

14.ES5-ES6增强写法

<script>
const name = 'why';
const age = 18;
const gao = 180
// ES5
const obj = {
	name : name,
	age : age,
	gao : gao
}
// ES6
const obj1 = {
	name,
	age,
	gao
}
console.log(obj);
console.log(obj1);
// es5
// get : function(){
	
// }
// es6
// get(){
	
// }
</script>

15.v-on:click事件监听  语法糖 @click

<body>
<div id="app">
	<h2>{{sum}}</h2>
	<button @click="add">+</button>
	<button @click="jian">-</button>
</div>

<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		sum : 0
	},
	methods : {
		add(){
			this.sum++
		},
		jian(){
			this.sum--
		}
	}
});
</script>
</body>

16.v-on参数传递问题

<body>
<div id="app">
	<button @click="add('abc',$event)">按钮</button>
	<button @click="add1('abc')">按钮2</button>
	<button @click="add2">按钮3</button> <!-- //默认传参event -->
</div>

<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		sum : 123
	},
	methods : {
		add(abc, event){
			console.log(abc,event);
		},
		add1(abc){
			console.log(abc)
		},
		add2(abc){
			console.log(abc)
		}
	}
});
</script>
</body>

17.v-on修饰符使用

<body>
<div id="app">
	<!-- 1  .stop修饰符的使用 -->
	<div @click="divclick">
		div
		<button @click.stop="btnclick">按钮</button>  <!-- .stop 阻止冒泡（冒泡点击这个按钮div的也触发）-->
	</div>
	
	<!-- 2 .prevent修饰符，阻止默认的事件 -->
	<br />
	<form action="baidu">
		<input type="submit" value="提交" @click.prevent="subclick"/>
	</form>
	
	<!-- 3  监听键盘的某个键帽的点击 -->
	<input type="text" @keyup="keyup"/>
	
	<!-- 4  v-once 只点击一次好使 -->
	<button type="button" @click.once="btn1click()">按钮3</button>
</div>

<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		sum : 123
	},
	methods : {
		btnclick(){
			console.log("btnclick");
		},
		divclick(){
			console.log("divclick");
		},
		subclick(){
			console.log("subclick")
		},
		keyup(){
			console.log("keyup")
		},
		btn1click(){
			console.log("btn1click")
		}
	}
});
</script>
</body>

18.v-if  v-else的使用

<body>
<div id="app">
	<div v-if="isShow">
	<button>按钮3</button>
	</div>
	<div v-else>
		v-if为false显示我
	</div>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		isShow : true
	}
});
</script>
</body>

19.登录切换小案例

<body>
<div id="app">
	<span v-if="isUser">
		<label for="username">用户账号</label>
	<!-- key复用的作用，当没有可以时，用户输入文字点击切换邮箱后，输入的文字会带过去 -->
	<input type="text" id="username" placeholder="用户账户" key="username"/> 
	</span>
	<span v-else="">
	<label for="email">用户邮箱</label>
	<input type="text" id="email" placeholder="用户邮箱" key="email"/>
	</span>
	<button type="button" @click="btnclick">切换类型</button>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		isUser : true
	},
	methods:{
		btnclick(){
			this.isUser = ! this.isUser
		}
	}
});
</script>
</body>

20.v-for遍历数组和对象

<body> 
<div id="app">
	<ul><!-- 在使用的过程中没有使用索引值 -->
		<li v-for="item in names">{{item}}</li>
	</ul>
	<ul><!-- 在使用的过程中没有使用索引值 -->
		<li  v-for="item , index in names">{{index+1}} {{item}}</li>
	</ul>
	<ul> <!--在遍历对象时，如果只获得一个值，则获得的是value值 -->
		<li v-for="(value , key) in info">{{value}}--{{key}}</li>
	</ul>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		names : ['小红','小青','小俺','小兰','小风'],
		info : {
			name : '威威我',
			age : 18,
			height : 178
		}
	}
});
</script>
</body>

21.购物车小案例

<body>
		<div id="app">
			<div v-if="books.length">
			<table>
				<thead>
					<tr>
						<th></th>
						<th>书籍名称</th>
						<th>出版日期</th>
						<th>价格</th>
						<th>购买数量</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item , index) in books">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.date}}</td>
						<!-- <td>{{getprice(item.price)}}</td> -->
						<td>{{item.price | showPrice}}</td>
						<td>
						<button @click="jian(index)" :disabled="item.count <= 1">-</button>
						{{item.count}}
						<button @click="add(index)">+</button>
						<td>
							<button @click="del(index)">移除</button>
						</td>
						</td>
					</tr>
				</tbody>
			</table>
			<h2>总价格 : {{sum | showPrice}}</h2>
			</div>
			<h2 v-else>购物车为空</h2>
		</div>
		
		
	<script src="../vue.js"></script>	
	<script src="main.js"></script>	
	</body>

// const app = new Vue({
// 	el : '#app',
// 	data: {
// 		books: [
// 			{
// 				id : 1,
// 				name : 'java',
// 				date : 2000-01,
// 				price : 99.99,
// 				count : 1
// 			},
// 			{
// 				id : 2,
// 				name : 'c',
// 				date : 2000-02,
// 				price : 99.99,
// 				count : 1
// 			},
// 			{
// 				id : 3,
// 				name : 'c++',
// 				date : 2000-03,
// 				price : 89.99,
// 				count : 1
// 			},
// 			{
// 				id : 4,
// 				name : 'c#',
// 				date : 2000-05,
// 				price : 95.00,
// 				count : 1
// 			},
// 		]
// 	},
// 	 methods:{
// 	// 	getprice(price){
// 	// 		return '￥' + price.toFixed(2)
// 	// 	}
// 		add(index){
// 			this.books[index].count++
// 		},
// 		jian(index){
// 			this.books[index].count--
// 		},
// 		del(index){
// 			this.books.splice(index , 1)
// 		}
// 	 },
// 	 computed:{
// 		 sum(){
// 			 let sum = 0
// 			 for(let i = 0; i< this.books.length ;i++){
// 				 sum += this.books[i].price * this.books[i].count
// 			 }
// 			 return sum
// 		 }
// 	 },
// 	filters:{
// 		showPrice(price){
// 			return '￥' + price.toFixed(2)
// 		}
// 	}
// })


table {
	border: 1px solid #e9e9e9;
	border-collapse: collapse;
	border-spacing: 0;
}

th,td{
	padding: 8px 16px;
	border: 1px solid #E9E9E9;
	text-align: left;
}

th{
	background-color: #f7f7f7;
	color: #5c6b77;
	font-weight: 600;
}

22.JavaScript高阶函数使用  .filter   .map  .reduce

<body> 
<div id="app">
	<ul><!-- 在使用的过程中没有使用索引值 -->
		<li v-for="item in names">{{item}}</li>
	</ul>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		names : ['小红','小青','小兰','小风']
	}
});
const nums = [10,20,30,444,222,14,21,34]
let newnums = nums.filter(function(n){
		return n < 100
})
console.log(newnums);

let new1nums = newnums.map(function(n){
		return n * 2
})
console.log(new1nums);

let new2nums = new1nums.reduce(function(w,n){
	return w + n
},0)
console.log(new2nums);

// let sum = nums.filter(function(n){
// 	return n < 100
// }).map(function(n){
// 	return n * 2
// }).reduce(function(m,n){
// 	return m + n
// },0)
// console.log(sum);

let sum = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre +n);
console.log(sum);
</script>
</body>

 23.表单绑定v-model

<body> 
<div id="app">
	<input type="text" v-model="message "/>
	{{message}}
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong'
	}
});
</script>
</body>

24.v-mode和redio结合使用

<body> 
<div id="app">
	<label for="male"><!--name = "sex"-->
		<input type="radio"id="male" value="男" v-model="sex"/>男
	</label>
	<label for="fmale">
		<input type="radio"id="fmale" value="女" v-model="sex"/>女
	</label>
	<h2>您选择的性别是 : {{sex}}</h2>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong',
		sex : '男'
	}
});
</script>
</body>

25.v-mode和checkbox结合使用

<body> 
<div id="app">
	<!-- <label for="xieyi">
		<input type="checkbox" id="xieyi" value="男" v-model="tongyi"/>同意协议
	</label>
	<h2>您选额的是 ： {{tongyi}}</h2>
	<button :disabled="!tongyi">下一步</button> -->
	<br />
	<label for="xieyi">
		<input type="checkbox" value="足球" v-model="aihao"/>足球
		<input type="checkbox" value="篮球" v-model="aihao"/>篮球
		<input type="checkbox" value="乒乓球" v-model="aihao"/>乒乓球
		<input type="checkbox" value="羽毛球" v-model="aihao"/>羽毛球
	</label>
		<h2>您选择的爱好是 ： {{aihao}}</h2>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong',
		//tongyi : false,
		aihao : []
	}
});
</script>
</body>

26.v-mode结合select

<body> 
<div id="app" >
	<select name="abc" v-model="frult">
		<option value ="苹果" >苹果</option>
		<option value ="香蕉" >香蕉</option>
		<option value ="榴莲" >榴莲</option>
	</select>
	<h2>{{frult}}</h2>
	<!--按住CTRL键多选-->
	<select name="abcd" v-model="frults" multiple="multiple">
		<option value ="苹果" >苹果</option>
		<option value ="香蕉" >香蕉</option>
		<option value ="榴莲" >榴莲</option>
		<option value ="大梨" >大梨</option>
	</select>
	<h2>{{frults}}</h2>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong',
		frult : '香蕉',
		frults : []
	}
});
</script>
</body>

27.input中的值绑定

<body> 
<div id="app" >
<label v-for="item in frults" :for="item">
	<input type="checkbox" :value="item" :id="item" v-model="frult" />
	{{item}}
</label>
<br />
<h2>
您选择的是 ：{{frult}}
</h2>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong',
		frult : [],
		frults : ['香蕉','苹果','大梨','榴莲']
	}
});
</script>
</body>

28.v-mode修饰符的使用

<body> 
<div id="app" >
<input type="text" v-model.lazy="message" />
<h2>{{message}}</h2>
<input type="number" v-model.number="age" />
<h2>{{age}}{{typeof age}}</h2>
<input type="text" v-model.trim="name" />
<h2>{{name}}</h2>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong',
		age : 0,
		name: ''
	}
});
</script>
</body>

29.组件化的使用

<body> 
<div id="app" >
	<my-cpn></my-cpn>
	<my-cpn></my-cpn>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const cpnC = Vue.extend({
		template : '<div>,
		<h2>biaoti</h2>
		<p>nierong</p>
		<p>hhhhh</p>
		</div>'
	})
	Vue.component('my-cpn',cpnC)
	
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong'
	}
});
</script>
</body>

30.全局组件和局部组件

<body> 
<div id="app" >
	<cpn></cpn>
	<cpn></cpn>
</div>
<div id="app1">
	<cpn></cpn>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const cpnC = Vue.extend({
		template : '<div><h2>biaoti</h2><p>nierong</p><p>hhhhh</p></div>'
	})
	//Vue.component('cpn',cpnC)
	
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong'
	},
	components:{
		cpn : cpnC
	}
});
</script>
</body>

31.父组件和子组件的区别

<body> 
<div id="app" >
	<cpn2></cpn2>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
const cpnC1 = Vue.extend({
		template : '<div><h2>1111</h2><p>111</p><p>1111</p></div>'
	})
const cpnC2 = Vue.extend({
			template : '<div><h2>bdddddiaoti</h2><p>dddd</p><p>ddddd</p><cpn1></cpn1></div>',
			components:{
				cpn1 : cpnC1
			}
		})
	//Vue.component('cpn',cpnC)
	
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong'
	},
	components:{
		cpn2 : cpnC2,
		//cpn1 :cpnC1
	}
});
</script>
</body>

32.组件的语法糖形式

<body> 
<div id="app" >
	<cpn1></cpn1>
</div>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	Vue.component('cpn1',{
		template : '<div><h2>1111</h2><p>111</p><p>1111</p></div>'
	})
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong'
	}
});
</script>
</body>

33.组件模板抽离写法

<body> 
<div id="app" >
	<cpn1></cpn1>
</div>
<!-- <script type="text/x-template" id="cpn">
	<div>
		<h2>标题</h2>
		<p>内容</p>
	</div>
</script> -->

<template id="cpn">
	<div>
		<h2>标题</h2>
		<p>内容</p>
	</div>
</template>

<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script>
	Vue.component('cpn1',{
		template:'#cpn'
	})
const app = new Vue({
	el : "#app",
	data : {
		message : 'xiaohong'
	}
});
</script>
</body>

 34.父组件通信子组件（props）

<body> 
<div id="app">
	<cpn :cmovies="movies"></cpn>
</div>
<template id="cpn">
	<div>
		<p>{{cmovies}}</p>
	</div>
</template>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
const cpn = {
	template : '#cpn',
	props :['cmovies'],
	data(){
		return{
		}
	},
	methods:{
	}
}
const vm = new Vue({
	el : '#app',
	data:{
		message : 'nihao',
		movies : ['1','2','3']
	},
	components:{
		cpn
	}
})
</script>
</body>

35.子组件传递父组件（$emit）

<body> 
<div id="app">
	<cpn @itemclick="cpnclick"></cpn>
</div>
<template id="cpn">
	<div>
		<button v-for="item in categories" 
				@click="btnclick(item)">
				{{item.name}}
		</button>
	</div>
</template>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
const cpn = {
	template : '#cpn',
	data(){
		return{
			categories : [
				{id : '001',name : '小花'},
				{id : '002',name : '小lu'},
				{id : '003',name : '小lan'},
				{id : '004',name : '小zi'},
			]
		}
	},
	methods:{
		btnclick(item){
			this.$emit('itemclick',item)
		}
	}
}
const vm = new Vue({
	el : '#app',
	data:{
		message : 'nihao',
	},
	components:{
		cpn
	},
	methods:{
		cpnclick(item){
			console.log('cpnclick',item);
		}
	}
})
</script>
</body>

 36.父访问子组件$children$refs

body> 
<div id="app">
	<cpn ref="aaa"></cpn>
	<button @click="btnClick">按钮</button>
</div>

<template id="cpn">
	<div>
		我是子组件
	</div>
</template>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
const vm = new Vue({
	el : '#app',
	data:{
		message : 'nihao'
	},
	methods : {
		btnClick(){
			console.log(this.$refs.aaa.name);
		}
	},
	components:{
		cpn : {
			template: '#cpn',
			data(){
				return{
				name : '我是子组件的name'
				}
			},
			methods : {
				showMessage(){
					console.log('message')
				}
			}
		}
	}
})
</script>
</body>

 37.slot插槽的基本使用

<body> 
<div id="app">
	<cpn><h2>h2</h2></cpn>
	<cpn><i>i</i></cpn>
	<cpn></cpn>
</div>

<template id="cpn">
	<div>
		<h1>组件</h1>
		<slot><button>默认按钮</button></slot>
	</div>
</template>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
const vm = new Vue({
	el : '#app',
	components:{
		cpn : {
			template: '#cpn'
		}
	}
})
</script>
</body>

38.具名插槽的使用（插槽有名字了）

<body> 
<div id="app">
	<cpn></cpn>
	<br />
	<cpn><span slot="center">替换</span></cpn>
	<cpn><button slot="left">返回</button></cpn>
</div>

<template id="cpn">
	<div>
	<slot name="left"><span>左边</span></slot>
	<slot name="center"><span>中间</span></slot>
	<slot name="right"><span>右边</span></slot>
	</div>
</template>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
const vm = new Vue({
	el : '#app',
	components:{
		cpn : {
			template: '#cpn'
		}
	}
})
</script>
</body>

39.编译作用域的区别

<body> 
<div id="app">
	<cpn v-show="isShow"></cpn>
</div>

<template id="cpn">
	<div>
		<h2>我是子组件</h2>
		<button v-show="isShow">按钮</button>
	</div>
</template>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
const vm = new Vue({
	el : '#app',
	data :{
		message : 'nihao',
		isShow : true
	},
	components:{
		cpn : {
			template: '#cpn',
			data(){
				return{
				isShow : false,
				}
			}
		}
	}
})
</script>
</body>

40.作用于插槽的使用

<body> 
<div id="app">
	<cpn></cpn>
	<cpn>
		<template slot-scope="slot">
			<span>{{slot.data.join(' - ')}}</span>
		</template>
	</cpn>
</div>

<template id="cpn">
	<div>
		<slot :data="yuyan">
		<ul>
			<li v-for="item in yuyan">{{item}}</li>
		</ul>
		</slot>
	</div>
</template>
<script src="../vue.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
const vm = new Vue({
	el : '#app',
	data :{
		message : 'nihao'
	},
	components:{
		cpn : {
			template: '#cpn',
			data(){
				return{
						yuyan :['c','java','js']
				}
			},
			created(){
				this.yuyan.join(' - ')
			}
		}
	}
})
</script>
</body>