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

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

本月创作热力图

最新评论
fei8080@163.com
fei8080@163.com
4月30日
很好
Mr.C
Mr.C
4月12日
个人建议,下个版本考虑将下载地址加密(防止采集)
Felix
Felix
4月1日
你好我想请教一下,为什么我php和redis都安装了,还是连接不上,一直显示未安装,旧插件文件也清理了
Mike
Mike
4月1日
当前页跳转一个页面,然后回退上一页,顶部进度条会缓慢加载,并且加载不完
评论于留言建议
Mike
Mike
4月1日
文章页划到最底部,侧边栏中切换作者发言会溢出
评论于留言建议