Vue框架

首先对于Vue有一个大致的了解。
Vue.js是一套构建用户界面的渐进式框架。目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue是一款MVVM的框架,绝大多数的操作都在VM对象中操作,并且支持数据双向绑定,所以操作和学习都比较简单。

那么首先来看下构造一个Vue项目所需要的准备吧

准备开发环境

HBuilder一款支持HTML5的Web开发IDE。主体是由Java编写,它基于Eclipse,兼容Eclipse的插件。其特点之一就是快,并且软件轻量方便,通过完整的语法提示和代码输入法、代码块等,能够提高开发效率。

HBuilder下载地址:http://www.dcloud.io/

下载或引入Vue

可以通过直接script引入,例如:(以下两者选一即可,第二个是明确了版本号的)

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

也可以前往官网下载(推荐使用开发版本):

https://cn.vuejs.org/v2/guide/installation.html

插件Vue Devtools

插件Vue Devtools是一个非常方便的浏览器工具,发开发中能有很大帮助的工具,下载地址:

https://github.com/vuejs/vue-devtools#vue-devtools

创建项目

首先点“文件”--->“新建”--->“项目”,在普通项目中选择Vue模板。这样初始的项目就创建好了。

Vue文件格式

在创建的项目中创建html文件,导入Vue.js并且输入如下内容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/vue.js"></script>
</head>
<body>
<div id="app"></div>

<script>
    var vm = new Vue({
        el:'#app',
        data:{},
        methods:{}
    })
</script>
</body>
</html>

script中所创建的就是vm对象,通过vm对象的el值绑定了id为“app”的div元素。
整个vm对象绝大多数属性都是以json赋予的,其中data是放置数据的地方,methods是放置方法的地方。

最后修改:2020 年 10 月 21 日 12 : 09 AM
如果觉得我的文章对你有用,请随意赞赏