VUE+Spingboot学习(1)

文章目录

  • 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简介

  1. JavaScript框架
  2. 简化Dom操作
  3. 响应式的数据操纵

2 第一个Vue程序

  1. 创建一个HTML文件,并且下载安装live Server插件,同步HTML里面的修改操作;
  2. 添加一个div标签,id要记住
    <div id="app">
        {{ message }}
    div>
  1. 复制一下开发环境版本
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  1. 用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>
  1. Vue中用到的数据定义在data中
  2. data中可以写复杂类型的数据
  3. 渲染复杂类型数据时,遵守js的语法即可

3 V-text

  1. 对于标签的v-text属性,如果没有大括号,标签内部的文字就会被全部替换。
<h2 v-text="message">h2>

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

    script>

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

  1. 如果想要输出“张”的话,就要使用{{}}
        <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>

输出结果:
VUE+Spingboot学习(1)_第1张图片

  • 还可以在

    ,将“message”写成“message+‘!’”,就可以输出感叹号了!
    VUE+Spingboot学习(1)_第2张图片

3.2

默认会替换所有的内容

4 v-html

你可能感兴趣的:(项目训练,vue.js,javascript,前端)