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>

结果:

你好

{{text}}

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>
说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...