个性化阅读
专注于IT技术分析

VueJS初次使用完全解析

接上一节:VueJS开发中的常见知识点和问题,Vue是一个JavaScript框架,用于构建用户界面,它主要集中于视图层,它的使用非常简单。因为Vue用于前端开发,所以需要处理相关的HTML、JavaScript和CSS,下面先从简单的使用开始。这里使用的版本是Vue 2.x,vue目前已经更新到3了,你也可以尝试使用新版本。

1、创建vue项目和引入vue

首先,在vscode中(或其它IDE)创建一个app.html文件,这里使用CDN引入,如下:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue.js</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    
</body>
</html>

2、使用vue和解析

在body中添加一个div,添加id为title,然后再div中添加h1标签,如下:

<body>
    <div id="title">
        <h1>{{message}}</h1>
    </div>
    <script>
        var vue = new Vue({
            el: "#title",
            data: {
                message: "第一个VueJS项目"
            }
        });
    </script>
</body>

这里创建vue实例只需要new一个Vue,里面传入一个对象,对象的第一个元素是el,该属性要求指定对应的html元素的唯一标识符,这里使用id,你也可以使用class,但是一般都是使用id。

第二个属性是data,该属性指定传给对应el的html元素的数据,上面message的数据对应h1标签中的{{message}},如果改变该值,对应的页面渲染也会跟着改变,如下:

Vue初次使用完全解析

在浏览器中打开console控制台,输入vue,可打印vue实例,该实例在以后的开发和调试中可能会经常遇到,如下图:

控制台输出vue实例
赞(0) 打赏
未经允许不得转载:srcmini » VueJS初次使用完全解析
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏