VUE+Spingboot学习（1）

山外小楼听夜雨.

已于 2022-01-22 21:41:27 修改

阅读量7.2k

点赞数

分类专栏：项目训练文章标签： vue.js javascript 前端

于 2022-01-22 15:09:30 首次发布

本文链接：https://blog.csdn.net/weixin_42521185/article/details/122636240

版权

项目训练专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

1 开发工具
- vue简介
2 第一个Vue程序
- 2.1 完成代码
- 2.2 el挂载点
3 data：数据对象
3 V-text
- 3.1 完整的代码
- 3.2
4 v-html

写在前面：研一的项目需求，就是完成独立的前后端开发。

1 开发工具

VS code 和 Live Server（插件：浏览器实时预览）

vue简介

JavaScript框架
简化Dom操作
响应式的数据操纵

2 第一个Vue程序

创建一个HTML文件，并且下载安装live Server插件，同步HTML里面的修改操作；
添加一个div标签，id要记住

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

复制一下开发环境版本

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

用js方法，将数据传上去

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

这里的#是id选择器。标签内部可以选择，但是标签外部不能选择
. 是class选择器
div也可以
【一般是选择使用id选择器】

2.1 完成代码

【这里的代码是完整的body代码。直接复制粘贴就OK】

<body>
    <div id="app">
        {{ message }}
    </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>

2.2 el挂载点

            el: "#app"   id选择器
            或者是
             el: ".app", 类选择器
             或者是
               el: "div",  div选择器

3 data：数据对象

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好小黑!",
                school: {
                    name: "黑马程序员",
                    mobile: "15965245633"
                },
                campus: ["北京校区", "上海校区", "广州校区", "深圳校区"]
            }
        })

    </script>

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js的语法即可

3 V-text

对于标签的v-text属性，如果没有大括号，标签内部的文字就会被全部替换。

<h2 v-text="message">张</h2>

。。。省略一下
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "可可爱爱"
            }
        })

    </script>

这里输出的只有“可可爱爱”

如果想要输出“张”的话，就要使用{{}}

        <h1>张{{ message }}</h1>

3.1 完整的代码

<body>
    <div id="app">
        <h2 v-text="message">张</h2>

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

    </script>

</body>

输出结果：
在这里插入图片描述

还可以在<h2 v-text="message">张</h2>，将“message”写成“message+‘！’”，就可以输出感叹号了!

3.2

默认会替换所有的内容

4 v-html

山外小楼听夜雨.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE+Spingboot学习（1）

文章目录1 开发工具vue简介2 第一个Vue程序2.1 完成代码2.2 el挂载点3 data：数据对象写在前面：研一的项目需求，就是完成独立的前后端开发。1 开发工具VS code 和 Live Server（插件：浏览器实时预览）vue简介JavaScript框架简化Dom操作响应式的数据操纵2 第一个Vue程序创建一个HTML文件，并且下载安装live Server插件，同步HTML里面的修改操作；添加一个div标签，id要记住 <div id="app"&
复制链接

扫一扫