spring-boot学习之(前端)vue了解及配置_springboot+vue配置-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_80364740/article/details/142964847

1.前端环境准备

2.Vue框架入门

vue配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
    <script src="https://unpkg.com/vue@3/dist/vue.esm-browser.js"></script>  
    <script src="https://unpkg.com/vue@3"></script>  
</head>
<body>  
    <div id="app">
        <p>message:{{ message }} </p>
        <p>true:{{ true ? 'flase':'true'}} </p>
        <p>姓名：{{username}}</p>
        <p>user.username:{{user.username}}</p>
        <p>{{desc}}</p>
        <p v-html="desc"></p>
        <a :href="http">vue</a>
        <input type="text" :placeholder="inputValue">
        <h3>count的值为：{{count}}</h3>
        <button v-on:click="addCount">+1</button>
        <button @click="count += 1">+1</button>

        <ul>
<li v-for="(user,i) in userList">搜引是:{{i}},姓名是：{{user.name}}</li>

        </ul>
    </div>




    <script>
        const vm={
            data:function(){
                return{
                    message:'Hello vue!!!',
                    username:'zhangsan',
                    count:10,
                    desc:'<a href="https://cn.vuejs.org/guide/quick-start.html">VUE</a>',
                    http:"'https://cn.vuejs.org/guide/quick-start.html",
                    inputValue:"请输入内容",
                    user:{
                      username:'lisi',
                    },
                    userList:[
                      {id:1,name:'a'},
                      {id:2,name:'b'},
                      {id:3,name:'c'},
                      {id:4,name:'d'}
                    ],
                }
            },
            methods:{
              addCount(){
                this.count++;
                console.log(this.count);
              },
            },

        }
        const app=Vue.createApp(vm);
        app.mount('#app')
      </script>


        <!-- <script>
            const { createApp, ref } = Vue
        
            createApp({
              setup() {
                const message = ref('Hello vue!!!');
                const username = ref('zhangsan');
                const desc = ref('https://cn.vuejs.org/guide/quick-start.html');
                return {
                  message,username,desc
                }
              }
            }).mount('#app')
          </script> -->


    
</body>
</html>

3.Vue快速人门

视频：9.Vue组件化开发_哔哩哔哩_bilibili

专心学习vue：04_Vue开发前的准备_哔哩哔哩_bilibili

对应的有用的视频里面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>  
    <script src="https://unpkg.com/vue@3/dist/vue.esm-browser.js"></script>  
    <script src="https://unpkg.com/vue@3"></script>  
</head>
<body>  
    <div id="app">
        <p>message:{{ message }} </p>
        <p>true:{{ true ? 'flase':'true'}} </p>
        <p>姓名：{{username}}</p>
        <p>user.username:{{user.username}}</p>
        <p>{{desc}}</p>
        <p v-html="desc"></p>
        <a :href="http">vue</a>
        <input type="text" :placeholder="inputValue">
        <h3>count的值为：{{count}}</h3>
        <button v-on:click="addCount">+1</button>
        <button @click="count += 1">+1</button>

        <ul>
<li v-for="(user,i) in userList">搜引是:{{i}},姓名是：{{user.name}}</li>

        </ul>
    </div>




    <script>
        const vm={
            data:function(){
                return{
                    message:'Hello vue!!!',
                    username:'zhangsan',
                    count:10,
                    desc:'<a href="https://cn.vuejs.org/guide/quick-start.html">VUE</a>',
                    http:"'https://cn.vuejs.org/guide/quick-start.html",
                    inputValue:"请输入内容",
                    user:{
                      username:'lisi',
                    },
                    userList:[
                      {id:1,name:'a'},
                      {id:2,name:'b'},
                      {id:3,name:'c'},
                      {id:4,name:'d'}
                    ],
                }
            },
            methods:{
              addCount(){
                this.count++;
                console.log(this.count);
              },
            },

        }
        const app=Vue.createApp(vm);
        app.mount('#app')
      </script>


        <!-- <script>
            const { createApp, ref } = Vue
        
            createApp({
              setup() {
                const message = ref('Hello vue!!!');
                const username = ref('zhangsan');
                const desc = ref('https://cn.vuejs.org/guide/quick-start.html');
                return {
                  message,username,desc
                }
              }
            }).mount('#app')
          </script> -->


    
</body>
</html>