万象更新 Html5 - vue.js: vue 模板语法基础(MVVM, 插值, 指令等)

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - vue.js: vue 模板语法基础(MVVM, 插值, 指令等)

示例如下:

vue\basic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue 模板语法基础(MVVM, 插值, 指令等)</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>

    <style>
        .class1 {
            font-size: 36px;
        }
        .class2 {
            color: red;
        }
        .class3 {
            background: blue;
        }

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

<!--
    下面的 html 介绍了 vue 的模板语法(Template Syntax)的基础,vue.js 会将你的模板语法渲染为最终的 html(也可以称之为编译)
    vue 是 MVVM(Model-View-ViewModel)模式的,大部分场景是单向绑定,即 vm 变了 v 就会变
-->

<!--
    如果 vue.js 加载慢,那么就会先显示未经 vue 渲染的 html,等到 vue.js 加载完后再显示 vue 渲染后的 html,为了避免这种情况,可以通过如下方式解决
    1、在 vue 的根元素上加 v-cloak 指令,然后 css 中加这句 [v-cloak] { display: none; }
    2、如果你是通过路由挂载的,那么就不会出现此情况
-->
<div id="root" v-cloak>

    <!--插值(interpolation)方式,在 {{ }} 内调用 vue 中定义的属性-->
    <div>{{ myMessage }}</div>
    <!--插值(interpolation)方式,在 {{ }} 内调用 vue 中定义的方法-->
    <div>{{ getMessage() }}</div>
    <!--可以使用简单的表达式-->
    <div>{{ myBool ? myMessage.split('').join(',') : "" }}</div>
    <!--可以和对象的属性绑定-->
    <div>{{ myObject.name }} {{ myObject.age }}</div>

    <!--指令(directive)方式,就是以下这些在元素上声明 v-xxx 的方式-->
    <!--
        v-pre 指令: 禁止 vue 渲染
    -->
    <div v-pre>{{ myMessage }}</div>

    <!--
        v-pre 指令: 禁止 vue 渲染
        v-text 指令: 文本方式显示
        v-html 指令: html 方式显示
        v-once 指令: 只渲染一次(正常来说 vm 变了 v 就会变,如果用了 v-once 指令则 v 只渲染一次,之后 v 不会再随 vm 的变化而变化)
    -->
    <div v-text="myMessage"></div>
    <div v-html="myMessage"></div>
    <div v-once>{{ myMessage }}</div>

    <!--在指令中可以使用简单的表达式-->
    <div v-html="myMessage + '_xyz'"></div>

    <!--
        v-bind 指令: 将 html 元素的指定的属性绑定到 vue 中定义的属性或方法(v-bind: 可以简写为 :)
    -->
    <!--style 属性与 vue 中定义的 myStyle 属性绑定-->
    <div v-bind:style="myStyle">abc</div>
    <!--style 属性与 vue 中定义的 getStyle() 方法绑定-->
    <div v-bind:style="getStyle()">abc</div>
    <!--支持简单的表达式-->
    <div :style="'color:' + myColor">abc</div>
    <!--style 属性支持 key/value 的方式绑定-->
    <div :style="{ color: myColor, fontSize: '48px' }">abc</div>

    <!--class 属性支持与多个 vue 中定义的属性绑定,下面这句的结果是 class="class1 class2 class3"-->
    <div class="class1" :class="[myClass2, myClass3]">abc</div>
    <!--class 属性支持 key/value 的方式绑定(value 为 true 则渲染,value 为 false 则舍弃),下面这句的结果是 class="class2 class3"-->
    <div :class="{'class1':!myBool, 'class2':myBool, 'class3':true}">abc</div>
    <!--class 属性支持与 vue 中定义的 key/value 类型的属性绑定(value 为 true 则渲染,value 为 false 则舍弃),下面这句的结果是 class="class2 class3"-->
    <div :class="myClass">abc</div>

    <!--
        v-model 指令: 双向绑定(详见: directive/vmodel.html)
    -->
    <input v-model="myMessage">

    <!--
        v-on 指令: 事件处理,v-on: 可以简写为 @(详见: directive/von.html)
    -->
    <!--click 事件会调用 vue 中定义的 updateMessage() 方法-->
    <br>
    <button @click="updateMessage()">调用 vue 中定义的 updateMessage() 方法</button>

    <!--click 事件会调用 js 中定义的 updateMessage() 方法-->
    <br>
    <button onclick="updateMessage()">调用 js 中定义的 updateMessage() 方法</button>

</div>

<script>

    // 定义一个根组件选项
    const option = {

        // 在 vue 中定义属性,它会存储在组件实例的 $data 中
        data() {
            return {
                myMessage: "hello: vue",
                myObject: {
                    name: "wanglei",
                    age: 40
                },
                myStyle: "color: orange",
                myColor: "red",
                myClass2: "class2",
                myClass3: "class3",
                myClass: {
                    'class1': false,
                    'class2': true,
                    'class3': true && 1 === 1
                },
                myBool: true
            }
        },
        // 在 vue 中定义方法(其他还有 computed, watch 等,参见 option.html)
        methods: {
            updateMessage() {
                // this 指向的是当前组件实例
                var random = Math.floor(Math.random() * 100);
                this.myMessage = "hello: " + random;
            },
            getMessage() {
                return this.myMessage;
            },
            getStyle() {
                return this.myStyle;
            }
        }
    };

    // Vue.createApp() - 创建一个 vue 实例(需要指定根组件选项)
    //   mount() - 挂载指定的 html 节点(此节点将被 vue 渲染),并返回根组件的实例
    const vm = Vue.createApp(option).mount('#root');

    function updateMessage() {
        // 在 js 中调用 vue 中定义的方法(vm 是根组件实例)
        var message1 = vm.getMessage();

        // 在 js 中获取 vue 中定义的属性(注: $data 可以省略)
        // vue 暴露在外的属性或方法一般都是 $ 开头的
        var message2 = vm.$data.myMessage;

        // 在 js 中设置 vue 中定义的属性
        var random = Math.floor(Math.random() * 100);
        vm.myMessage = "<span style='color: red'>hello: " + random + "</span>";
    }
</script>
</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

posted @ 2024-09-24 11:06  webabcd  阅读(13)  评论(0编辑  收藏  举报