前端框架Vue指令

最新推荐文章于 2024-09-14 15:26:51 发布

字符传送门

最新推荐文章于 2024-09-14 15:26:51 发布

阅读量66

点赞数

分类专栏： Javaweb 文章标签： vue js html java javascript

本文链接：https://blog.csdn.net/qq_42351519/article/details/114219758

版权

Javaweb 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

v-clock v-text v-html

v-clock 用来解决网络不好的闪烁问题
v-html 用来使元素内部的结果显示为HTML结果
v-text 默认解决闪烁问题的指令
v-bind:绑定一个元素属性的指令
v-on:事件绑定机制

Vue中的基本代码块

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>初识VUE</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p  v-cloak>{{ msg }}</p>
        <div v-text="msg2"></div>
        <div v-html="msg3"></div>
        <input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show">
    </div>
    <script>
        //v-cloak 解决传值表达式闪烁问题
        //创建VUE的实例
        var vm =  new Vue({
            el:'#app',//表示控制哪个区域
            data:{
                //存放的el中用到的数据
                msg:'欢迎学习Vue',
                msg2:'您好',
                msg3:'<h1>html</h1>',
                mytitle:'这是我的标题'
            },
            methods:{//对象属性 在该属性中定义当前实例可以使用的所有的方法
                show:function () {
                    alert('hello')
                }
            }
        });
    </script>
</body>
</html>

v-bind只能实现数据的单向绑定从M绑定到V

v-model实现数据的双向绑定

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-model实现数据的双向绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<div id="app">
 <h3>{{msg}}</h3>
    <input type="text" v-model="msg" style="width: 100%">
</div>
<script>
    //v-cloak 解决传值表达式闪烁问题
    //创建VUE的实例
    var vm =  new Vue({
        el:'#app',//表示控制哪个区域
        data:{
            //存放的el中用到的数据
            msg:'大家都是好学生，爱敲代码，爱学习，简直是完美，没瑕疵 ',
        },
        methods:{//对象属性 在该属性中定义当前实例可以使用的所有的方法
        }
    });
</script>
</body>
</html>