02指令的学习

最新推荐文章于 2022-11-15 19:13:23 发布

李滇滇

最新推荐文章于 2022-11-15 19:13:23 发布

阅读量249

点赞数

文章标签： vue.js html5 css html javascript

本文链接：https://blog.csdn.net/qq_44772261/article/details/107369758

版权

指令的学习，基本代码如下。

1.v-cloak能够解决插值表达似式闪烁问题
2.默认 v-text 是没有闪烁问题的，只会覆盖元素中
原本的内容，但是插值表达式只会替换自己的占位符，不回将整个元素内容清空
3.v-html也会覆盖所有内容，但是会将msp下的内容以html的形式输出
4.v-bind:是vue中，提供给的用于绑定属性的指令
5. v-on:事件绑定机制也等同于@

实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
        <p v-cloak>-----{{msg}}++++++</p><!-- v-cloak能够解决插值表达似式闪烁问题 -->
        
        
        <h4 v-text='msg'>========</h4><!--默认 v-text 是没有闪烁问题的，只会覆盖元素中
        原本的内容，但是插值表达式只会替换自己的占位符，不回将整个元素内容清空 -->
        
        
        <div v-html='msg2'></div>
        <!--v-html也会覆盖所有内容，但是会将msp下的内容以html的形式输出-->


        <!-- v-bind:是vue中，提供给的用于绑定属性的指令 -->
        <input type="button" value="按钮"  v-bind:title='mytitle'>
        <!-- v-bind等同于  ： -->·
        <input type="button" value="按钮"  :title="mytitle+'123'" id="btn">

        <!-- v-on:事件绑定机制 也等同于@-->
        <input type="button" value="按钮"  v-on:click="show" >
        <input type="button" value="按钮" @click="show">
    </div>
    <script src="./js/vue.js v2.6.11.js"></script>
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'123',
            msg2:'<h1>这是h1下的文字</h1>',
            mytitle:'这是一个自己定义的标题'
        },
        methods:{//这个methods属性中定义了vue当前所有的可能用到的方法
            show:function(){
                alert('hello');
            }
        }
    })



    // document.getElementById('btn').οnclick=function(){
    //     alert('Hello');
    // }
</script>
</html>

实现效果如下：
在这里插入图片描述

李滇滇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02指令的学习

指令的学习，基本代码如下。1.v-cloak能够解决插值表达似式闪烁问题2.默认 v-text 是没有闪烁问题的，只会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不回将整个元素内容清空3.v-html也会覆盖所有内容，但是会将msp下的内容以html的形式输出4.v-bind:是vue中，提供给的用于绑定属性的指令5. v-on:事件绑定机制也等同于@实现如下：<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫