0

Blog My Life

 2 years ago
source link: http://blog.colorccm.com/2021/07/20/it/vue/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Blog My Life

Vue学习笔记

发表于2021-07-20|更新于2021-08-29|it
阅读量:12
  • 官网地址
    https://cn.vuejs.org/
  • 范例
    <!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元素

      • methods

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

      • beforeCreate
      • created
      • beforeMount
      • mounted
      • beforeUpdate
      • update
      • beforeDestory
      • destoryed
  • mustache语法结构
    {{ key }}
  • v-once
    仅更新一次数据
    <h2 v-once>{{message}}</h2>
  • v-html
    如果原数据是html格式的，可以直接解析后再进行展示
    <h2 v-html="url"></h2>
    const app = new Vue({
        el: '#app', //挂载需要进行管理的元素
        data: {// 定义数据
            message: "hello",
            url: "<a href='http://blog.colorccm.com'>blog</a>"
        },
        methods:{
        }
    })
  • v-text
    直接显示原数据
    <h2 v-text="message"></h2>
  • v-pre
    直接显示插值表达式，不进行解析
    <h2 v-pre>{{message}}</h2>
  • v-cloak
    斗篷，在还没有渲染的时候使用指定的样式遮盖
    <!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的属性中
    <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
    循环列表中的内容再进行遍历展示
    <li v-for="item in movies">{{item}}</li>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello',
            movies: ['海王', '海贼王', '速度与激情']
        }
    })
  • v-on
    事件响应

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK