Vue创建第一个程序
2021/6/7 14:21:22
本文主要是介绍Vue创建第一个程序,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1、首先创建一个.html文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title第一个程序</title> </head> <body> </body> </html>
2、引入Vue.js
<script src="https://lib.baomitu.com/vue/3.0.11/vue.cjs.min.js"></script>
3、创建一个Vue实例
<script type="text/javascript"> var vm = new Vue({ el:"#app", /*Model:数据*/ data:{ message:"hello,Firstvue!" } }); </script>
4、视图层模板
<!--视图层--> <div id="app"> {{message}} </div>
- 这里要注意的是:id="app"是与3中el:"#app",相绑定
- {{message}}是从3中的data中取出来的值,(数据绑定和el表达式一样)
5、全部的代码为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个程序</title> <script src="https://lib.baomitu.com/vue/3.0.11/vue.cjs.min.js"></script>//如果不能导入请换其他的CDN,可自行网上搜索 CDN Vue </head> <body> <div id="app"> {{message}} </div> <script type="text/javascript"> var vm = new Vue({ el:"#app", data:{ message:"hello,Firstvue!" } }); </script> </body> </html>
这样我们就可以进行第一次测试了,通过data传递的是json数据,当然我们可以在浏览器按F12,通过控制台输入vm.message=‘你想输入的内容’,然后点击回车
就可以让页面发生变化了
这篇关于Vue创建第一个程序的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南