【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管理员

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

本月创作热力图

最新评论
吴彦祖
吴彦祖
3月14日
很期待优秀的主题作品qiang
xxx
xxx
3月14日
密码是多少
西风
西风
3月7日
暂时不需要也能跑
Kevin
Kevin
3月6日
请教,小网站,1000ip不到,小主机,2c4g,到底 redis 还是 macached 合适啊
hfloke
hfloke
3月1日
新版本安装更新后,页面有问题哦