vue-不用脚手架
作者:互联网
1.vue.js就是MVVM中的ViewModel层的实现者
2.用html引入vue:
1.新建一个项目文件夹“第一个Vue应用程序” 2.在文件夹下新建一个index.html
3.index.htm内容:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!--引入vue.js--> <title>第一个Vue应用程序</title> </head> <body> <!--MVVM中,view层只能通过viewmodel来对接model,即只能展示viewmodel中的内容,不能直接展示model中的内容--> <!--view展示层--> <div id="app"> {{ message }} <!--显示data中的数据--> </div> <!--viewmodel脚本控制层--> <script> //Vue(),就是viewModel层的内容 var app = new Vue({ el: '#app', //el为element的缩写,挂载元素 data: { //这个data,就是model层,即数据内容 message: 'Hello Vue!' } }) </script> </body> </html>
4.在浏览器中访问这个index.html的文件路径,即可展示内容
5.展示数据绑定的内容:
1.打开浏览器访问index.html 2.按F12,开始调试 3.在控制台输入:app.message='Hello!' 4.按回车键 5.页面中“Hello Vue!”变为“Hello!” 6.即为数据绑定
6.Edge浏览器安装Vue.js devtools插件:https://blog.csdn.net/sinat_31213021/article/details/120036139
7.安装了插件后,在打开VUE项目后,按F12 ,就可以找到Vue,然后在Root->data->Message中编辑Message的数据
8.
标签:index,vue,message,html,不用,app,Vue,脚手架,Hello 来源: https://www.cnblogs.com/jingzaixin/p/16462490.html