Vue.js教程（一）：基本使用

最新推荐文章于 2024-03-05 10:04:33 发布

杨景文Blog

最新推荐文章于 2024-03-05 10:04:33 发布

阅读量427

点赞数 2

分类专栏：前端技术文章标签： Vue js

本文链接：https://blog.csdn.net/muyi_amen/article/details/84104889

版权

前端技术专栏收录该内容

9 篇文章 3 订阅

订阅专栏

vue.js是一套渐进式Javascript框架。是一个小巧好用的框架。

简介

Vue既然是一个js框架，那么基本上js能做的事情它都能做。Vue跟大多数js框架类似，都是优化js对DOM的操作。什么是DOM操作呢？看下面：

<div id="app"></div>

如果想通过JS动态设置div的内容。纯JS的操作如下：

document.getElementById("app").innerHTML='Hello JS！';

以上就是一段简单的JS进行DOM操作的例子。Vue.js主要就是让DOM操作变得更简单和高效、灵活。

基本使用

如果Vue同样要完成以上js的案例。配置和使用如下：
第一步：引用Vue.js框架

<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

第二步：html准备

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

说明：以上{{ message }}就是vue语法，此处的{{ message }}可以理解为一个占位变量，等待Vue给其赋值。

第三步：Vue激活

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

</script>

说明：
el：表示待操作的标签所对应的ID。
data：是Vue的变量定义区域。以上代码中Vue定义了一个变量名为message。此变量会自动注入到第二步中的占位变量所在的位置。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

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

</script>
</body>
</html>

杨景文Blog

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js教程（一）：基本使用

vue.js是一套渐进式Javascript框架。是一个小巧好用的框架。简介Vue既然是一个js框架，那么基本上js能做的事情它都能做。Vue跟大多数js框架类似，都是优化js对DOM的操作。什么是DOM操作呢？看下面：&lt;div id="app"&gt;&lt;/div&gt;如果想通过JS动态设置div的内容。纯JS的操作如下：document.getElementById...
复制链接

扫一扫