【VUE速成】1.第一个VUE应用
引用VUE,可以使用CDN或者本地方法引入即可。
引入Vue.js
打开地址:https://www.bootcdn.cn/vue/
选一个版本,min为压缩版本js,引用到网页
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
或者直接下载下来本地引用也行。
创建第一个VUE应用
使用vue很简单
在文档末尾,body之前写script标签,声明Vue类
<script type="text/javascript"> new Vue({ } }) </script>
通过el属性绑定一个文档标签,例如绑定一个id为main的div,此时什么都没有,但是已经绑定完成。在下面的div中已经可以使用数据了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue.min.js"></script> </head> <body> <div id="main"> </div> </body> <script type="text/javascript"> new Vue({ el: '#main', }) </script> </html>
添加data属性到vue方法里面。数据名称自己随意命名即可,内容类型可以为文本或者数字。
<script type="text/javascript"> new Vue({ el: '#main', data: { msg: '大家好,我是渣渣辉', msg2: '大家好,我是古天落' } }) </script>
在标签中引用内容,使用双大括号包裹数据名称的方法引用
<div id="main"> {{msg}} </div>
这个时候,浏览网页,会显示为:
大家好,我是渣渣辉
使用两个数据
<div id="main"> {{msg}},{{msg2}} </div>
此时网页显示为
大家好,我是渣渣辉,大家好,我是古天落
版权声明:
作者:applek
链接:http://www.lovestu.com/vue01.html
文章版权归作者所有,未经允许请勿转载。
THE END