本篇文章带大家来通过静态HTML体验一下vue.js的具体使用。

首先通过script标签引入vue.js,此时有两种方式:官方下载vue.js到本地,然后在项目中引入;另外一种方式直接使用cdn引入。

官网下载地址:https://cn.vuejs.org/

开发环境cdn对应引入:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境cdn对应引入:

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

本实例采用本地引入vue.js文件。

对应的html文件的head部分代码如下:

<head>
    <meta charset="UTF-8">
    <title>第一个Vue项目</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
    <script src="js/vue.js"></script>
</head>

其中,vue.js位于html同级目录的js目录下。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。

下面先来定义具体的模板语法,比如我们在某个div内要输入一条message,message的内容为“Hello Vue!”。那么,div和message的使用如下:

<div id="app">
    {{message}}
</div>

如果只是单纯的上面代码,页面展示时只会显示{{message}},而并没有具体的内容展示。此时就需要使用vue来进行初始化操作。

<script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue!"
            }
        })
</script>

在上面的js代码中,首先创建了Vue对象,在创建的过程中通过el绑定了我们上面定义的id为app的div,此时Vue的数据和id为app的div(DOM)已经建立了动态绑定关系,此时所有的内容都是响应式的。

紧接着下面的data属性,便指定了message的值,那么此时打开浏览器,将显示“Hello Vue!”。

至此,关于Vue的第一个示例便完成了。

此时在打开页面中选择“检查”或F12,便可调出页面检查工具,以Chrome为例,显示如下:

Vue集成使用入门,第一个vue项目插图

上图中定位到了Console控制台,我们在>后面输入app.message,看看对应的值是什么。

Vue集成使用入门,第一个vue项目插图(1)

可以看到,当输入app.message时提示值为“Hello Vue!”正是我们在js中定义的message的值,也是页面div中显示的message的值。

此时,在console中对app.message重新赋值:

Vue集成使用入门,第一个vue项目插图(2)

通过等号赋值并回车,会看到输出了“Hello World”,同时会看到页面中原来的“Hello Vue!”也变为了”Hello World”了。也就是说,验证了DOM和Vue之间的动态绑定关系,及响应式的对应关系。



Vue集成使用入门,第一个vue项目插图(3)

关注公众号:程序新视界,一个让你软实力、硬技术同步提升的平台

除非注明,否则均为程序新视界原创文章,转载必须以链接形式标明本文链接

本文链接:http://www.choupangxia.com/2020/04/18/first-vue/