init
This commit is contained in:
785
Html-Vue/index.html
Normal file
785
Html-Vue/index.html
Normal file
@@ -0,0 +1,785 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user