Vue学习笔记

vue

基础信息

  • 官网地址
    https://cn.vuejs.org/
  • 范例
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
            <h2>{{message}}</h2> <!-- 赋值数据 -->
        </div>
        <script src="../js/vue.js"></script>
        <script>
            const app = new Vue({
                el: '#app', //挂载需要进行管理的元素
                data: {// 定义数据
                    message: 'Hello chibao'
                }
            })
        </script>
    </body>
    </html>
    • Vue的options
      • el

      需要挂载的el元素

      • data

      数据集

      • methods

      各种方法

      • 钩子方法

      Vue生命周期中的各个钩子方法

      • beforeCreate
      • created
      • beforeMount
      • mounted
      • beforeUpdate
      • update
      • beforeDestory
      • destoryed

      基本语法

  • mustache语法结构
    {{ key }}
  • v-once
    仅更新一次数据
    1
    <h2 v-once>{{message}}</h2>
  • v-html
    如果原数据是html格式的，可以直接解析后再进行展示
    1
    <h2 v-html="url"></h2>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    const app = new Vue({
        el: '#app', //挂载需要进行管理的元素
        data: {// 定义数据
            message: "hello",
            url: "<a href='http://blog.colorccm.com'>blog</a>"
        },
        methods:{
        }
    })
  • v-text
    直接显示原数据
    1
    <h2 v-text="message"></h2>
  • v-pre
    直接显示插值表达式，不进行解析
    1
    <h2 v-pre>{{message}}</h2>
  • v-cloak
    斗篷，在还没有渲染的时候使用指定的样式遮盖
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <h2 >{{message}}</h2>
        </div>
        <script src="../js/vue.js"></script>
        <script>
            setTimeout(function(){
                const app = new Vue({
                    el: '#app', //挂载需要进行管理的元素
                    data: {// 定义数据
                        message: "hello"
                    }
                })
            }, 1000)
        </script>
    </body>
    </html>
  • v-bind
    将数据绑定到dom的属性中
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <div id="app">
        <img v-bind:src="imgurl" alt="">
        <img :src="imgurl" alt=""><!--简写-->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app', //挂载需要进行管理的元素
            data: {// 定义数据
                imgurl: "https://cn.vuejs.org/images/logo.svg"
            },
            methods:{
            }
        })
    </script>
  • v-for
    循环列表中的内容再进行遍历展示
    1
    <li v-for="item in movies">{{item}}</li>
    1
    2
    3
    4
    5
    6
    7
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello',
            movies: ['海王', '海贼王', '速度与激情']
        }
    })
  • v-on
    事件响应
it
#it #coding #vue
Vue学习笔记
http://blog.colorccm.com/2021/07/20/it/vue/
作者
Chibao Chan
发布于
2021年7月20日
许可协议