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

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

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

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

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

好了,开始吧

准备

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

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

接着,我会围绕以下几个Vue.js的基本(核心)使用方法逐个做测试和使用说明:

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

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

新建Vue对象

  1. 引用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>
  1. 新建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>

解释一下代码

js变量 myVue 就是Vue创建的一个对象,可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象, 这个对象就是myVue

el是Vue的保留字,用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器,告诉Vue要实例化ID=“firstVue”的这个标签。

至此,Vue.js框架在html页面

评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值