【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>

此时网页显示为

大家好,我是渣渣辉,大家好,我是古天落

上一篇 layui 获取select值和文本
下一篇 【VUE速成】2.模板语法
目录
applek

applek管理员

个人说明在个人中心里面设置

本月创作热力图

少
多
最新评论
hui
hui
8月19日
能否支持微信第三方登录啊?
Fiee
Fiee
7月21日
我网站基本上都装了,速度确实有所提升,还免费。我不喜欢白嫖,加你QQ没同意,网站也没有打赏通道 想支持一下的。
小超
小超
7月9日
下个版本考虑将下载地址加密(防止采集)
Lvtu
Lvtu
7月4日
qiang厉害
评论于留言建议
chinacnd
chinacnd
6月26日
这个主题是怎么做到加载速度那么快的?