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

此时网页显示为

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

THE END