v-cloak

最新推荐文章于 2023-10-21 18:41:30 发布

轻尘×

最新推荐文章于 2023-10-21 18:41:30 发布

阅读量129

点赞数

分类专栏： vue-js

本文链接：https://blog.csdn.net/leisure_life/article/details/83899138

版权

vue-js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X_UA-Compatible" content="ie=edge">
    <title>vue 入门</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <!--1 导入vue.js库-->
    <script src="./lib/vue.js"></script>
</head>

<body>

    <div id="app">
        <!--插值表达式，只会替换自己的占位符，不会把整个元素清空-->
        <p v-cloak>--------{{msg}}-------</p>
        <!--会将整个元素原有值清空-->
        <h4 v-text="msg">--------------------</h4>
        <!--将msg的内容按html样式输出-->
        <h5 v-html="msg"></h5>
        <!--v-bind:xxx用于绑定属性的指令，会将引号内的内容当做js脚本执行
        简写模式 ::title="btTitle + 'aaa' "
        -->
        <input type="button" value="v-bind:" v-bind:title="btTitle + 'aaa' " />

        <input type="button" value="冒号:" :title="btTitle + 'bbb' " />
        <!--Vue中提供了v-on事件绑定机制
        缩写是@
        -->
        <input type="button" value="v-on:click" :title="btTitle + 'bbb' " v-on:click="show" />
        <input type="button" value="@" :title="btTitle + 'bbb' " @click="show" />
        <input type="button" value="v-on:mouseover" :title="btTitle + 'bbb' " v-on:mouseover="show" />
    </div>
    <script src="./lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'test',
                btTitle: "我是一个按钮"
            },
            methods: {   //定义当前Vue实例的所有方法
                show: function () {
                    alert('hello')
                }
            }

        })

    </script>
</body>

</html>

轻尘×

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-cloak

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
复制链接

扫一扫