Vue初体验

<body>
    <div id="app">
        <h1>{{message}}</h1>
        <h2>{{name}}</h2>
    </div>

    <script src="./vue.js"></script>
    <script>
        // let变量 / const常量
        // 编程范式：声明式编程
        const app = new Vue({
            el: '#app', // 挂载管理元素
            data: { // 定义数据
                message: 'wdnmd',
                name: 'test'
            }
        })
    </script>
</body>

列表展示

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <ul>
            <li v-for="item in list">{{item}}</li>
        </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: '电影列表',
                list: ['战狼', '战狼2', '战狼3', '战狼4']
            }
        })
    </script>
</body>

计数器

methods：Vue 对象中定义方法
@click：又可以写成 v-on:click ，点击事件

<body>
    <div id="app">
        <h2>当前数为：{{num}}</h2>
        <button @click="add()">+</button>
        <button @click="pdd()">-</button>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                add() {
                    this.num++;
                },
                pdd() {
                    this.num--;
                }
            },
        })
    </script>
</body>

Vue 实例传入的 options

options 需要掌握的选项
1. el：
  
  类型：string | HTMLElement
  
  作用：决定 Vue 实例管理哪一个 DOM 对象
2. data：
  
  类型：Object | Fuction （组件当中 data 必须是一个函数）
  
  作用：Vue 实例对应的数据对象
3. methods：
  
  类型：{[key:string] : Fuction}
  
  作用：定义属于 Vue 的一些方法，可以在其他地方调用，也可以在指令中使用

Mustache

Mustache 语法也就是 {{}}，将数据插入到 HTML 页面中需要

v-once

表示元素或者组件只渲染一次，不会随着数据改版而改变

<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h1 v-once>{{name}}</h1>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: '小明'
            }
        })

        app.name = '小红';
    </script>
</body>

结果：

小红

小明

v-html

解析 HTML 内容并渲染

<body>
    <div id="app">
        <h1>{{html}}</h1>
        <h1 v-html="html"></h1>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                html: '<a href="https://baidu.com">test</a>'
            }
        })
    </script>
</body>

v-text

将数据显示在页面中，接收的值为 string 类型

<body>
    <div id="app">
        <h1>{{text}}，Vue</h1>
        <h1 v-text="text"></h1>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                text: '你好'
            }
        })
    </script>
</body>

v-pre

跳过元素的编译过程，显示原本内容

<body>
    <div id="app">
        <h1>{{text}}</h1>
        <h1 v-pre>{{text}}</h1>
    </div>

    <script src="./vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                text: '你好'
            }
        })
    </script>
</body>

结果：

你好

v-cloak

解析之前不显示元素内容

<head>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <h1>{{text}}</h1>
    </div>

    <script src="./vue.js"></script>
    <script>
        setTimeout(function () {
            const app = new Vue({
                el: '#app',
                data: {
                    text: '你好'
                }
            })
        }, 1000);
    </script>
</body>

声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 N0tssss' Note
本文地址: Vue