做的好点的外贸网站,电子商务网站开发的背景,wordpress下拉菜单联动,中国建设银行的网站.VUE3和VUE2
上一篇文章中#xff0c;我们对VUE3进行了一个初步的认识了解#xff0c;本篇文章我们来进一步学习一下#xff0c;顺便看一下VUE2的写法VUE3是否能做到兼容#x1f600;。
一、新建组件
我们在components中新建一个组件#xff0c;名称为Peron#xff0c;…VUE3和VUE2
上一篇文章中我们对VUE3进行了一个初步的认识了解本篇文章我们来进一步学习一下顺便看一下VUE2的写法VUE3是否能做到兼容。
一、新建组件
我们在components中新建一个组件名称为Peron后缀为vue。 二、编写组件
我们先把基础的结构写出来
html交互脚本样式美化
templatediv /div
/templatescript langts //注意要添加tsexport default{name:}
/scriptstyle/style三、添加内容
data和methods都是VUE2的写法但是并没有报错
templatediv classpersonh1姓名{{ name }}/h1h2年龄{{ age }}/h2!-- h3电话{{ tel }}/h3 --button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickshowTel查看联系方式/button/div
/templatescript langtsexport default{name:Person,data() {return {name:落满樱花的羊,age:23,tel:1300000000}},methods:{changeName(){this.nameluomanyinghuadeyang }, changeAge(){this.age1},showTel(){alert(this.tel)}}}
/scriptstyle.person{background-color: #b3f4f7;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button{margin: 0 5px;}
/style四、注册控件
因为程序运行打开的主页面是App.vue所以要在App.vue中引入次控件并注册。
template!--html 结构--div classapph1你好/h1Person//div
/templatescript langts//脚本 交互import Person from ./components/Person.vue //引入组件export default{//暴露 默认暴露name:APP, //组件的名字components:{Person} //注册组件}
/scriptstyle/*样式 美化 */.app{background-color: #d6f5fb;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
/style五、运行调试 我们可以看到自定义控件套用在了原本的你好的控件里面。修改名字按钮触发修改事件。修改年龄按钮触发名字1。查看联系方式显示电话号码。
六、插件工具
我们在上图中看到了F12调试中有VUE 的插件这个插件是免费的下载好配置一下就可以了。 在百度搜索极简插件然后搜索VUE下载到桌面解压会看到这个文件。 然后在浏览器找到插件管理插件打开开发者模式把这个拖拽进去就可以了再次F12的时候就可以查看了。
