Vue简单入门

最新推荐文章于 2021-04-30 16:11:25 发布

陈适时

最新推荐文章于 2021-04-30 16:11:25 发布

阅读量116

点赞数 2

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_47966295/article/details/112974675

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Vue简单入门

Vue.js是一套构建用户界面的渐进式框架。

Vue 只关注视图层，采用自底向上增量开发的设计。

学习Vue之前需要了解的知识：

Html
Css
JavaScript
Ajax

导入vue

导入vue有很多种方式包括

1、js文件引入：

可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入

2、使用CDN方法引入（二选一即可，入门建议使用开发环境版本）：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Hello World！

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

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
      	<!-- 渲染data中的message（插值）-->
        {{ message }} 
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",//挂载点，这里挂载至id为app的div
            data: {
                message: "Hello World"
            }
        })
    </script>
</body>

</html>

运行结果：

message的数据

挂载点可以为父级元素，子元素也可以渲染Vue实例化对象的数据、方法等等

这里挂载至父级元素id为app的<div>上，并将数据渲染在子元素<p>内，且修改上述例子message的值时，页面也会同步进行数据改变：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
      	<!-- 渲染data中的message（插值）-->
        <p>{{ message }}</p>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello Vue"
            }
        })
    </script>
</body>

</html>

运行结果：

message

v-text指令

利用v-text指令可以进行数据绑定到标签上，但是无论标签内数据是什么都会被覆盖

例如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app" v-text="age">
      	<!-- 已渲染data中的message（插值），但由于在div中使用了v-text指令，message被覆盖-->
        {{ message }}
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "Hello World",
                age: 14
            }
        })
    </script>
</body>

</html>

运行结果：

在这里插入图片描述

后续还会接着有更新哈，有兴趣的可以一起来学习，初学者做个记录，有错误的地方麻烦大神指教。

陈适时

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue简单入门

Vue简单入门Vue.js是一套构建用户界面的渐进式框架。Vue 只关注视图层，采用自底向上增量开发的设计。学习Vue之前需要了解的知识：HtmlCssJavaScriptAjax导入vue导入vue有很多种方式包括1、js文件引入：可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入2、使用CDN方法引入（二选一即可，入门建议使用开发环境版本）：&lt
复制链接

扫一扫