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

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

本月创作热力图

少
多
最新评论
卢温白
卢温白
10月10日
咨询 AeroCore 主题: 1、能否制作两套独立归档模板,分别分配给两个父栏目,各自下属全部子分类?一套分类网格一行 10 个卡片,另一套分类列表一行仅显
评论于关于本站
卢温白
卢温白
10月10日
咨询 CoreNext 主题: 1、能否制作两套独立归档模板,分别分配给两个父栏目,各自下属全部子分类?一套分类网格一行 10 个卡片,另一套分类列表一行仅显
评论于留言建议
jo
jo
10月9日
为什么后台不能更新主题,提示已经最新版。当前版本1.4.9,我看网站显示版本都到1.5.2了
Tom
Tom
10月8日
AeroCore 的按需加载确实做得好,Vite 构建后的首屏比之前 CoreNext 快不少。不过上面 Mike 说的进度条问题我这边也能稳定复现:从留言页点
评论于留言建议
Shaw
Shaw
10月2日
需要邀请码注册功能,有了马上下单