使用vue3构建helloworld程序
在html页面中引入vue3
首先我们打开IDE并且新建一个HTML文件,命名为helloworld.html,然后在代码编辑页面输入!,会自动的生成html模板。然后,我们将vue3引入到项目当中,引入的方式如下:
在head标签当中写入script标签,<script src="https://unpkg.com/vue@next"></script>
这样vue3就在我们的项目当中成功的引入了
创建一个vue实例并将它挂载到div上面
- 创建一个div,并给它命名“mydiv”
<div id="mydiv"></div>
2.创建一个vue实例,命名为myvue
const myvue=Vue.createApp({
template: "<div>hello</div>";})
3.将创建的vue实例挂载到mydiv上
const mount=myvue.mount("#mydiv");
编写setup函数
setup函数介绍
setup函数是vue3当中的入口函数,所以学习vue3是从setup函数的学习开始的,另外它也是vue3当中的新的生命周期函数,用来代替vue2当中的beforeCreate和created
setup函数的写法
在vue2当中,数据定义在data当中而方法定义在method中,而在vue3当中,数据和方法统一定义在setup函数当中,setup函数接受两个参数,第一个参数props(用来接收从父组件传递过来的属性),第二个参数context,setup函数最终以对象的形式返回这些数据和方法,这样,这些数据和方法就能够给template来使用了
const myvue=Vue.creatApp({
template:'<div>hello</div>',
setup(props,context){
//在这里定义数据和方法
return {
//在这里返回给template使用的数据和方法;}
}})
例如,我们再setup当中定义一个数据来让template使用
const myview=Vue.createApp({
template:'<div> {{ neme }}</div>',
setup(props,context){
return{ name:'bill';}
}
})
此外,我们还可以在setup当中定义一个handdleclick方法,并且在div中绑定该方法
const myview=Vue.createApp({
tempalte:'<div @click='handleclick'> {{ name }}</div>'
setup(props,context){
return {
name:'bill',
handleclick:()=>{
alert('helloworld');}}}
})
总结
本篇博客主要介绍了通过vue3创建一个helloworld程序,以及介绍了如何在项目当中引入vue3,最后还有setup函数的介绍与使用