【VUE速成】1.第一个VUE应用

2019-8-15

引用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

链接：https://www.lovestu.com/vue01.html

文章版权归作者所有，未经允许请勿转载。

THE END