vue基础

最新推荐文章于 2024-07-11 10:59:33 发布

回首＆逝去～

最新推荐文章于 2024-07-11 10:59:33 发布

阅读量246

点赞数 2

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

本文链接：https://blog.csdn.net/qq_43957263/article/details/121719792

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

摘要

由于最近一段时间实习在公司一直在做小程序，很少有时间再敲vue；所以我准备接下来一段时间复习一下vue；巩固下自己以前的知识。

1、尝试vue

首先，和学习jQuery之类的一样，我们要先引入vue.js代码。在引入vue.js之后，我们要开始创建一个vue对象。接下来我们先用一个最开始的hello world代码来举例：

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

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

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

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

</html>

结论：

首先我们先给页面一个div，id为app；然后引入vue.js文件；然后就像我们上面说的一样，来创建一个vue实例对象。

这里面的 el 是指挂载；意思就是我们创建的vue对象将会挂载到哪个标签上。具体的挂载范围我们接下来再讲。

date是用来存放我们的数据的，在date中的数据，我们都可以使用{{date中的变量名}}这种方式来渲染到我们挂载的标签上。

结果：

2、el的挂载范围

我们还是先看代码，根据代码来解释：

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

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

<body>
    {{ message }}
    <!--只能作用在选中作用域及其子范围-->
    <div id="app" class="app">
        {{ message }}
        <span>{{ message }}</span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            // el: ".app",//可以
            // el: "div",//可以
            // el: "body",//不可以挂载到body或html标签上
            data: {
                message: "hello Vue!"
            }
        });
    </script>
</body>

</html>

结论：

首先el后面可以跟最常用的类选择器，id选择器还有标签名。但是需要注意的是，不能挂载到body和html标签上

范围：只能作用在挂载的标签以及其子标签中。

结果：

3、data的数据类型

代码：

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

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

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>数据：{{ school }} 名字：{{ school.name }} 编号：{{ school.num }}</p>
        <p>{{ id }} {{ id[0] }} {{ id[1] }} {{ id[2] }} {{ id[3] }}</p>
    </div>


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

    <script>
        var app = new Vue({
            el: "#app",
            //data可以用多种数据类型
            data: {
                message: "hello ",
                school: {
                    name: "12#433",
                    num: "123456"
                },
                id: [1, 2, 3, 4]
            },
        });
    </script>
</body>

</html>

结论：

基本包含js中所有的数据类型（函数除外）

结果：

结语：

今天主要和大家分享下vue学习的起步知识，最基础的东西。或许这些东西在以后学习完脚手架之后太长时间不看就直接忘记了。但是通过我近20的实习来看，有时候最基础的东西才是最重要的，我们要经常回顾基础，才能走得更远。

回首＆逝去～

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue基础

摘要由于最近一段时间实习在公司一直在做小程序，很少有时间再敲vue；所以我准备接下来一段时间复习一下vue；巩固下自己以前的知识。1、尝试vue 首先，和学习jQuery之类的一样，我们要先引入vue.js代码。在引入vue.js之后，我们要开始创建一个vue对象。接下来我们先用一个最开始的hello world代码来举例：<!DOCTYPE html><html lang="en"><head> <me...
复制链接

扫一扫