785 lines
20 KiB
HTML
785 lines
20 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<script src="https://unpkg.com/vue@next"></script>
|
||
|
|
|
||
|
|
<!-- <style>
|
||
|
|
|
||
|
|
.red {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
.green {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style> -->
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="root"></div>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
// ----------------------------------------------------------------------------------------------------------------------------------------------
|
||
|
|
// Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// content:'hello world'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// methods:{
|
||
|
|
// handleBtnClick(){
|
||
|
|
// const newContent=this.content.split("").reverse().join('');
|
||
|
|
// this.content=newContent;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`
|
||
|
|
// <div>
|
||
|
|
// {{content}}
|
||
|
|
// <button v-on:click="handleBtnClick">反转</button>
|
||
|
|
// </div>
|
||
|
|
// `
|
||
|
|
// }).mount('#root');
|
||
|
|
// ---------------------------------------------------------------------------------------------------------------------------------------------------
|
||
|
|
// Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return{
|
||
|
|
// num:1
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// mounted(){
|
||
|
|
// setInterval(()=>{
|
||
|
|
// this.num++;
|
||
|
|
// },1000)
|
||
|
|
// },
|
||
|
|
// template:'<h2>{{num}}</h2>'
|
||
|
|
// }).mount('#root');
|
||
|
|
|
||
|
|
// Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {show:true}
|
||
|
|
// },
|
||
|
|
// methods:{
|
||
|
|
// handleBtnClick(){
|
||
|
|
// this.show=!this.show;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`
|
||
|
|
// <div>
|
||
|
|
// <sapn v-if="show">hello world</span>
|
||
|
|
// <button v-on:click="handleBtnClick">显示/隐藏</button>
|
||
|
|
// </div>
|
||
|
|
// `
|
||
|
|
// }).mount('#root');
|
||
|
|
|
||
|
|
// ---------------------------------------------------------------------------------------------------------------------------------------------------
|
||
|
|
// const app=Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// inputValue: '',
|
||
|
|
// list:[]
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// methods:{
|
||
|
|
// handleAddItem(){
|
||
|
|
// this.list.push(this.inputValue);
|
||
|
|
// this.inputValue='';
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`
|
||
|
|
// <div>
|
||
|
|
// <input v-model ="inputValue"/>
|
||
|
|
// <button
|
||
|
|
// v-on:click="handleAddItem"
|
||
|
|
// v-bind:title="inputValue" >
|
||
|
|
// 增加</button>
|
||
|
|
// <ul>
|
||
|
|
// <todo-item v-for="(item, index) of list"
|
||
|
|
// v-bind:content="item"
|
||
|
|
// v-bind:index="index" />
|
||
|
|
// </ul>
|
||
|
|
// </div>
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
|
||
|
|
// app.component('todo-item',{
|
||
|
|
// props:['content','index'],
|
||
|
|
// template:'<li>{{index}} -- {{content}}</li>'
|
||
|
|
// });
|
||
|
|
// app.mount("#root");
|
||
|
|
|
||
|
|
// -----------------------------------------------------------------------------------------------------------------------------------------------
|
||
|
|
|
||
|
|
//createApp 表示创建一个Vue引用 ,存储到app变量中
|
||
|
|
//传入的参数表示, 这个应用最外层的组件,应该如何展示
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data (){
|
||
|
|
// return {
|
||
|
|
// message:'hello Vue'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: "<div>{{message}}</div>"
|
||
|
|
// });
|
||
|
|
// //vm代表就是vue应用的根组件
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
//生命周期函数.在某一时刻自动执行的函数
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data (){
|
||
|
|
// return {
|
||
|
|
// message:'hello Vue'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// // mounted(){
|
||
|
|
// // alert('click');
|
||
|
|
// // },
|
||
|
|
|
||
|
|
// //在实列生成之前自动执行的函数
|
||
|
|
// beforeCreate(){
|
||
|
|
// console.log('beforCreate');
|
||
|
|
// },
|
||
|
|
// //在实列生成之后自动执行的函数
|
||
|
|
// created(){
|
||
|
|
// console.log('create');
|
||
|
|
// },
|
||
|
|
// //在逐渐内容被渲染到页面之前立即自动执行的函数
|
||
|
|
// beforeMount(){
|
||
|
|
// console.log(document.getElementById('root').innerHTML,'beforeMount'),
|
||
|
|
// console.log('beforeMount');
|
||
|
|
// },
|
||
|
|
// //在组件内容被渲染到页面之后自动化执行的函数
|
||
|
|
// mounted(){
|
||
|
|
// console.log('mounted');
|
||
|
|
// },
|
||
|
|
// //当 data 中二点数据发生变化时会立即自动执行的函数
|
||
|
|
// beforeUpate(){
|
||
|
|
// console.log('beforeUpate');
|
||
|
|
// },
|
||
|
|
// //当 data 中的数据发生变化,同时页面完成更新后,会自动执行的函数
|
||
|
|
// update(){
|
||
|
|
// console.log('updata');
|
||
|
|
// },
|
||
|
|
// //当 Vue应用失效时 自动执行的函数
|
||
|
|
// beoforeUnmount(){
|
||
|
|
// console.log('beforeUnmount');
|
||
|
|
// },
|
||
|
|
// //当Vue应用失效时,且dom 完全销毁之后,自动执行的函数
|
||
|
|
// unmounted(){
|
||
|
|
|
||
|
|
// },
|
||
|
|
// template: "<div>{{message}}</div>"
|
||
|
|
// });
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data (){
|
||
|
|
// return {
|
||
|
|
// message:'hello Vue',
|
||
|
|
// show:true,
|
||
|
|
// name:'title',
|
||
|
|
// event:'mouseenter' //动态参数
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// methods:{
|
||
|
|
// handleClick (){
|
||
|
|
// alert('click');
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
|
||
|
|
// template: `<form action = "https://www.baidu.com" @click.prevent='handleClick'>
|
||
|
|
// <button type="submit">提交</button>
|
||
|
|
// </form>
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//data & methods & computed & watcher
|
||
|
|
//computed 和watcher都实现的功能,建议使用computed,因为有缓存
|
||
|
|
//computed 和watcher都实现的功能,建议使用computed 因为更加简洁
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data (){
|
||
|
|
// return {
|
||
|
|
// message:'hello Vue',
|
||
|
|
// count:2,
|
||
|
|
// price:5,
|
||
|
|
// newTotal :10, }
|
||
|
|
// },
|
||
|
|
// watch:{
|
||
|
|
// //price发生变化时,函数会执行
|
||
|
|
// price(current,prev){
|
||
|
|
// this.newTotal*this.count;
|
||
|
|
// // setInterval(()=>{
|
||
|
|
// // console.log('price changed');
|
||
|
|
// // },3000)
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// computed:{
|
||
|
|
|
||
|
|
// //当计算属性依赖的内容发生变化时,才会重新执行计算
|
||
|
|
// total(){
|
||
|
|
// return Date.now() +this.count;
|
||
|
|
// //return this.count * this.price
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// methods:{
|
||
|
|
// formatString(string){
|
||
|
|
// return string.toUpperCase();
|
||
|
|
// },
|
||
|
|
// //只有页面重新渲染时,才会重新计算
|
||
|
|
// getTotal(){
|
||
|
|
// return Date.now();
|
||
|
|
// //return this.count*this.price;
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// {{message}} {{total}}
|
||
|
|
// </div>
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// classString:'red',
|
||
|
|
// classObject:{red:false,green:true},
|
||
|
|
// calssArry:['red','green',{brown:true}],
|
||
|
|
// styleString:'color:yellow',
|
||
|
|
// styleObject:{
|
||
|
|
// color:'orange',
|
||
|
|
// background:'yellow'
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div :style="styleObject">
|
||
|
|
// hello Vue!
|
||
|
|
// <demo class="green"/>
|
||
|
|
// </div>
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
|
||
|
|
// app.component('demo',{
|
||
|
|
// template:`<div :class='$attrs.class'> one</div>
|
||
|
|
// <div> two</div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//条件编码
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// show:true,
|
||
|
|
// conditionOne:true,
|
||
|
|
// conditionTwo:true
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div v-if="show">hello Vue!</div>
|
||
|
|
// <div v-if="conditionOne">if!</div>
|
||
|
|
// <div v-else-if="conditionTwo">elseif</div>
|
||
|
|
// <div v-show="show">bye Vue!</div>
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//列表循环渲染
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// listArray:['dell','lee','teacher'],
|
||
|
|
// listObject:{
|
||
|
|
// firstName:'dell',
|
||
|
|
// lastNmae:"lee",
|
||
|
|
// job:'teacher',
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// methods:{
|
||
|
|
// handleAddbtnClick (){
|
||
|
|
// //使用数组的变更函数 push .pop ,shift,unshift .splice.sort.reverse
|
||
|
|
|
||
|
|
// // this.listArray.push('ha')
|
||
|
|
// // this.listArray.pop();
|
||
|
|
// // this.listArray.shift();
|
||
|
|
// // this.listArray.unshift("ha");
|
||
|
|
// // this.listArray.reverse();
|
||
|
|
|
||
|
|
// //直接替换数组
|
||
|
|
// // this.listArray=['bey','world']
|
||
|
|
// // this.listArray=['bey'].concat(['world']);
|
||
|
|
// // this.listArray=['bey','wolrd'].filter(item=>item==='bey');
|
||
|
|
|
||
|
|
// //直接更新数组的内容
|
||
|
|
// // this.listArray[1]='hello'
|
||
|
|
|
||
|
|
|
||
|
|
// //对象
|
||
|
|
// // this.listObject.age=100;
|
||
|
|
// // this.listObject.sex='male';
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <template
|
||
|
|
// v-for="(value,key,index) in listObject" :key="index" >
|
||
|
|
// <div v-if="key!=='lastNmae'">
|
||
|
|
// {{value}}--{{key}}
|
||
|
|
// </div>
|
||
|
|
// </template>
|
||
|
|
// </div>
|
||
|
|
// <div v-for="item in 10">{{item}}</div>
|
||
|
|
// <button @click="handleAddbtnClick"> 新增</button>
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//event , (多)$event
|
||
|
|
//事件修饰符:stop prevent,capture, self, once ,passive
|
||
|
|
//按键修饰符:enter,tab,delete,esc,up,down,left,right
|
||
|
|
//鼠标修饰符:left,right,middle
|
||
|
|
//精确修饰符:exact
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// methods:{
|
||
|
|
// handleKeyDown(){
|
||
|
|
// console.log('keydown');
|
||
|
|
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <input @keydown.enter="handleKeyDown"/>
|
||
|
|
// </div>
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//input textarea, checkbox ,select
|
||
|
|
//修饰符 lazy(额外触发) number(类型转换) trim(取出空格)
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// message:' hello ',
|
||
|
|
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// {{ message}}
|
||
|
|
// <input v-model.trim='message' />
|
||
|
|
// </div>
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//组件深入
|
||
|
|
//组件具备复用性
|
||
|
|
//全局组件,只要定义了,处处可以使用,性能不高,但是使用起来简单
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
|
||
|
|
// <counter-parent/>
|
||
|
|
// <counter/>
|
||
|
|
// <counter/>
|
||
|
|
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
// app.component('counter-parent',{
|
||
|
|
|
||
|
|
// template:`<counter />`
|
||
|
|
// })
|
||
|
|
// app.component('counter',{
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// counter:1
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`<div @click="counter+=1">{{counter}}</div>`
|
||
|
|
// })
|
||
|
|
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//组件传值 (props)
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data (){
|
||
|
|
// return {
|
||
|
|
// number: 1234,
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <test :content="number"/>
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
// //类型校验:string boolean,array,object ,function ,symbol ,require (必填),default(默认值)
|
||
|
|
// app.component('test',{
|
||
|
|
// props:{
|
||
|
|
// content:{
|
||
|
|
// type:Number,
|
||
|
|
// validator:function(value){
|
||
|
|
// return value<1000;
|
||
|
|
// },
|
||
|
|
// default:function (){
|
||
|
|
// return 789;
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
|
||
|
|
// template:`
|
||
|
|
// <div > {{content}}</div>
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//v-bind="params"
|
||
|
|
//属性传的时候,使用content-abc 这种命名,接受的时候使用 contentAbc (驼峰法)命名
|
||
|
|
//单项数据流的概念:子组件可以使用父组件传递过来的数据 ,但是不能修改传递过来的的数据
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// num:1
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <counter :count="num"/>
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
// app.component('counter',{
|
||
|
|
// props:
|
||
|
|
// ['count'],
|
||
|
|
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// myCount:this.count,
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`
|
||
|
|
// <div @click="myCount+=1">{{myCount}}</div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
|
||
|
|
// })
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//non-prop 属性
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <counter style="color:red;"/>
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// });
|
||
|
|
// app.component('counter',{
|
||
|
|
// // inheritAttrs: false,
|
||
|
|
// template:`
|
||
|
|
// <div >counter</div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
|
||
|
|
// })
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//slot 插槽
|
||
|
|
//子模板里调用的数据属性,使用的都是子模板日的数据
|
||
|
|
//父模板里调用的数据属性,使用的都是父模板日的数据
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// text:'submit'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`
|
||
|
|
// <myform>
|
||
|
|
// <div>{{text}}</div>
|
||
|
|
// </myform>
|
||
|
|
// <myform>
|
||
|
|
// <button>{{text}}</button>
|
||
|
|
// </myform>
|
||
|
|
// <myform>
|
||
|
|
|
||
|
|
// </myform>
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
// app.component("test",{
|
||
|
|
// template:`<div>submit</div>`
|
||
|
|
// })
|
||
|
|
|
||
|
|
|
||
|
|
// app.component("myform",{
|
||
|
|
// methods :{
|
||
|
|
// handleClick(){
|
||
|
|
// alert(123) }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <input />
|
||
|
|
// <span @click="handleClick">
|
||
|
|
// <slot>default value</slot>
|
||
|
|
// </span>
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// })
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//具名插槽
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// text:'submit'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`
|
||
|
|
// <layout>
|
||
|
|
// <template v-slot:header>
|
||
|
|
// <div>header</div>
|
||
|
|
// </template>
|
||
|
|
// <template v-slot:footer>
|
||
|
|
// <div>footer</div>
|
||
|
|
// </template>
|
||
|
|
|
||
|
|
// </layout>
|
||
|
|
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
|
||
|
|
// app.component("layout",{
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <slot name="header"></slot>
|
||
|
|
// <div>content</div>
|
||
|
|
// <slot name="footer"></slot>
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// })
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//作用域插槽
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// text:'submit'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template:`
|
||
|
|
// <list v-slot="{item}">
|
||
|
|
// <span>{{item}}</sapn>
|
||
|
|
|
||
|
|
// </list>
|
||
|
|
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
|
||
|
|
// app.component('list',{
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// list:[1,2,3]
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <slot v-for="item in list" :item="item"/>
|
||
|
|
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// })
|
||
|
|
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//动态组件
|
||
|
|
//动态组件:根据数据的变化,结合compoent 这个标签,来随时动态切换组件的显示
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// data(){
|
||
|
|
// return {
|
||
|
|
// currentItem:'input-item'
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// methods:{
|
||
|
|
// handleClick(){
|
||
|
|
// if(this.currentItem==='input-item'){
|
||
|
|
// this.currentItem='common-item';
|
||
|
|
// }else {{
|
||
|
|
// this.currentItem='input-item';
|
||
|
|
// }}
|
||
|
|
// }
|
||
|
|
// },
|
||
|
|
// //<keep-alive> 缓存数据
|
||
|
|
// template:`
|
||
|
|
// <keep-alive>
|
||
|
|
// <component :is="currentItem" />
|
||
|
|
// </keep-alive>
|
||
|
|
// <button @click="handleClick">切换</button>
|
||
|
|
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
|
||
|
|
// app.component('input-item',{
|
||
|
|
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <input />
|
||
|
|
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// })
|
||
|
|
|
||
|
|
|
||
|
|
// app.component('common-item',{
|
||
|
|
|
||
|
|
// template: `
|
||
|
|
// <div>
|
||
|
|
// <div>hello Vue</div>
|
||
|
|
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
// })
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// const AsyncCommonItem = Vue.defineAsyncComponent(()=>{
|
||
|
|
// return new Promise(()=>{
|
||
|
|
|
||
|
|
// })
|
||
|
|
// })
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//异步组件:异步执行某些组件的逻辑,叫做异步组件
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// //<keep-alive> 缓存数据
|
||
|
|
// template:`
|
||
|
|
// <div>
|
||
|
|
// <common-item />
|
||
|
|
// <async-common-item />
|
||
|
|
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
// app.component('common-item',{
|
||
|
|
|
||
|
|
// template: `
|
||
|
|
// <div>hello Vue</div>
|
||
|
|
// `
|
||
|
|
// })
|
||
|
|
|
||
|
|
// app.component('async-common-item',Vue.defineAsyncComponent(()=>{
|
||
|
|
// return new Promise((resolve,reject)=>{
|
||
|
|
// setTimeout(()=>{
|
||
|
|
// resolve({
|
||
|
|
// template:`<div>this is an async component</div>`
|
||
|
|
// })
|
||
|
|
|
||
|
|
// },4000)
|
||
|
|
|
||
|
|
// })
|
||
|
|
|
||
|
|
// }))
|
||
|
|
|
||
|
|
|
||
|
|
// const vm = app.mount('#root');
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
// const app = Vue.createApp({
|
||
|
|
// //<keep-alive> 缓存数据
|
||
|
|
// template:`
|
||
|
|
// <div>
|
||
|
|
// <common-item />
|
||
|
|
// <async-common-item />
|
||
|
|
|
||
|
|
// </div>
|
||
|
|
|
||
|
|
// `
|
||
|
|
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</html>
|