VueJS简明教程(一)之基本使用方法

最新推荐文章于 2025-03-12 10:04:18 发布

置顶

秦洛1023

最新推荐文章于 2025-03-12 10:04:18 发布

阅读量1w

点赞数 44

CC 4.0 BY-SA版权

分类专栏： JS 文章标签：教程 VUE Javascript 前端

本文链接：https://blog.youkuaiyun.com/true1023/article/details/80674764

简介：这是一篇超级简单的入门文章

如果说是JQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的任何事情JQuery都可以做，但无论是代码量还是流程规范性都是前者较优。

Vue.js的官方中文教程其实也是一个不错的教程，不过相比于一次性把所有概念掌握，我更倾向于先会用，之后再在实际应用中把未涉及到的知识点逐步补全。

就像开车，不是非要知道发动机的工作原理才能上路的，甚至你可能一辈子也不用知道。

好了，开始吧

准备

首先，以下几点希望你已经知道或者做到了:

你会用html+css+javascript 写一些网页
你知道什么是DOM和BOM(Browser Object Model)
你知道Vue.js是一个框架而不是一个新语言
你会用百度或者Google其中之一去查找答案

接着，我会围绕以下几个Vue.js的基本（核心）使用方法逐个做测试和使用说明：

新建vue对象
数据绑定
事件绑定
表单控件绑定

最后，根据上面的知识点结合起来写出我们的第一个vuejs前端页面

新建Vue对象

引用vue.js
在桌面建立一个 Vue.html文件, 然后引入 vue.js的CDN地址 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

新建Vue实例
在Vue.html中插入一个id为firstVue的<div>

<div id="firstVue"></div>

在Vue.html中插入下面js代码:

<script type="text/javascript">
    var myVue = new Vue({
        el:"#firstVue"
    })
</script>

然后整个代码看起来是这样的:

<!DOCTYPE html>
<html>
<head>
    <title>Vue Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="firstVue">
    </div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#firstVue"
    })
</script>
</html>