- vue- cli：vue脚手架- - - 》创建vue项目- - - 》构建vue项目- - 》工具链跟之前一样- vite ：https: // cn. vitejs. dev/ - npm create vue@latest // 或者- npm create vite@latest一路选择即可- vue- cli跟之前一样- vite 创建的：npm install npm run dev- 冷启动- 热加载- 按需编译
对象. changeName( 'lin' ) . printName( ) . showAge( ) class Person : def changeName ( self, name) : self. name= namereturn selfdef printName ( self) : print ( self. name) return selfsetup的两个注意点
在beforeCreate之前执行一次，this是undefined。
props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
context：上下文对象
attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this. $attrs。
slots: 收到的插槽内容, 相当于 this. $slots。
emit: 分发自定义事件的函数, 相当于 this. $emit。setup执行是在beforeCreate，没有this对象，以后不要用this了如果写setup函数，想接收父组件自定义属性传入的值，需要export default { setup( props) { console. log( props. msg) } , props: [ 'msg' ] } 如果是vue3的最新写法，想接收父组件自定义属性传入的值，需要< script setup> defineProps( [ 'msg' ] ) < / script>
< template> < divclass = " home" > < p> </ p> < p> </ p> < button@click = " handleClick" > </ button> </ div> </ template> < script>
export default { setup ( ) { const name = 'lqz' let age = 19 const showInfo = ( ) => { alert ( ` 姓名是： ${ name} ,年龄是： ${ age} ` ) } return { name, age, showInfo} } ,
}
</ script> < template> < divclass = " home" > < p> </ p> < p> </ p> < button@click = " handleAdd" > </ button> < button@click = " handleChangeName" > </ button> </ div> </ template> < script>
import { ref} from 'vue' export default { setup ( ) { let name = ref ( 'lin' ) let age = ref ( 19 ) const handleAdd = ( ) => { age. value += 1 console. log ( typeof age) } const handleChangeName = ( ) => { name. value = '彭于晏' } return { name, age, handleAdd, handleChangeName} }
}
</ script> < template> < divclass = " home" > < p> </ p> < p> </ p> < p> </ p> < button@click = " addAge" > </ button> < br> < br> < button@click = " changeHobby" > </ button> < hr> < HelloWorldmsg = " asdfasdfasdfasdf" > </ HelloWorld> </ div> </ template> < script>
import { reactive, ref} from 'vue' export default { setup ( props ) { let hobby = ref ( '篮球' ) let obj = ref ( { age : 99 , hobby : '保龄球' } ) const changeHobby = ( ) => { console. log ( obj) obj. value. hobby = '足球' } let data = reactive ( { name : '彭于晏' , age : 19 } ) const addAge = ( ) => { console. log ( typeof data) console. log ( data) data. age++ } return { hobby, data, addAge, obj, changeHobby} } }
</ script> < div> </ div> 1. 官网https : / / element-plus.org / 2. 安装npm install element- plus -- save
3. 使用import { xxx } from 'element-plus'
< template> < divclass = " home" > < inputtype = " text" v-model = " name.firstName" > < inputtype = " text" v-model = " name.lastName" > < br> < inputtype = " text" v-model = " fullName" > < button@click = " age++" > </ button> </ div> </ template> < script> import { computed, watch, reactive, ref, watchEffect} from 'vue' export default { name : 'HomeView' , setup ( ) { let name = reactive ( { firstName : 'lin' , lastName : 'dj' } ) let fullName = computed ( { get ( ) { return name. firstName + '-' + name. lastName} , set ( value) { const nameArr = value. split ( '-' ) name. firstName = nameArr[ 0 ] name. lastName = nameArr[ 1 ] } } ) let age = ref ( 19 ) watch ( age, ( newValue, oldValue ) => { console. log ( oldValue) console. log ( newValue) } ) watch ( ( ) => name. firstName, ( newValue, oldValue ) => { console. log ( oldValue) console. log ( newValue) } ) watchEffect ( ( ) => { const x1 = age. valueconst x2 = name. firstNameconsole. log ( 'watchEffect配置的回调执行了' ) } ) return { name, fullName, age} }
}
</ script> - 想把生命周期写下setup函数中- 把生命周期写在配置项中beforeDestroy改名为 beforeUnmountdestroyed改名为 unmountedbeforeCreatecreatedbeforeMount mountedbeforeUpdateupdatedbeforeUnmount unmounted< template> < divclass = " home" > < h1> </ h1> </ div> </ template> < script>
import axios from 'axios' import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted
} from "vue" ; export default { setup ( ) { console. log ( '我是beforeCreate, 我和setup函数融合了' ) let name = ref ( 'lin' ) console. log ( '我是Created, 我也和setup函数融合了' ) axios. get ( 'http://localhost:8080/' ) . then ( res => { name. value = res. data. name} ) let t = setInterval ( ( ) => { console. log ( 'lin' ) } , 3000 ) onBeforeMount ( ( ) => { console. log ( '挂载了' ) } ) onMounted ( ( ) => { console. log ( '挂载完成了' ) } ) onBeforeUpdate ( ( ) => { console. log ( '更新数据' ) } ) onUpdated ( ( ) => { console. log ( '数据更新完成' ) } ) onBeforeUnmount ( ( ) => { console. log ( '在组件卸载之前执行的操作' ) clearInterval ( t) t = null } ) onUnmounted ( ( ) => { console. log ( '组件卸载完成' ) } ) return { } } }
</ script> < template> < divclass = " home" > < h1> </ h1> </ div> </ template> < script> import { reactive, toRefs} from "vue" ; export default { setup ( ) { let data = reactive ( { name : 'lin' , age : 20 } ) return { ... toRefs ( data) } }
let data = { 'name' : 'lin' , age : 19 }
let dict= { ... data, hobby : '篮球' } console. log ( dict) </ script>
< script setup>
定义变量
写函数
不用return ，在html中直接使用
< / script>
import HelloWorld from "../components/HelloWorld.vue" ;
在html中直接用：< HelloWorld msg= "hello" > < / HelloWorld> < script setup> defineProps( { msg: { type : String, required: true} } ) < / script>
< template> < hello-worldmsg = " hello" > </ hello-world> < p> < button@click = " changeName" > </ button> </ p> </ template> < scriptsetup >
import HelloWorld from "../components/HelloWorld.vue"
import { ref} from 'vue' let name = ref ( 'lin' ) let changeName = ( ) => { name. value = '彭于晏'
} </ script> 
】STL大法--栈和队列深度剖析优先级队列适配器原理)
使用)
