vue指令学习

作者: 杨康他兄弟 | 来源:发表于2019-11-19 21:19 被阅读0次

Vue-02：
v-on指令
vue-oneday学习指令
Vue实现前后端分离项目的初体验
Vue指令学习
vue指令学习
【vue学习】指令
【Vue】常用指令之v-html
【Vue】常用指令之v-bind
【Vue】常用指令之v-on

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/index.css" />
        <script type="text/javascript" src="js/vue.min.js" ></script>
    </head>
    
    <body>
        <div id="app">
            
            <!--使用 v-cloak 能够解决 插值表达式闪烁，只会替换自己的占位符，不会清空整个元素内容-->
            <h1 v-cloak>+++++++++{{msg}}============</h1>
            
            <!--默认v-text是没有闪烁问题的，且会覆盖原本的内容-->
            <h2 v-text="msg">===========</h2>
            
            <div>{{msg2}}</div>
            
            <div v-text="msg2"></div>
            
            <div v-html="msg2"></div>
            
            <!--v-bind 是vue中提供的用于绑定属性的指令，且v-bind中可以写合法的JS表达式-->
            <input type="button" value="按钮" v-bind:title="mytitle + '-fuck'" id="btn"/>
            
            <input type="button" value="按钮2" v-bind:title="mytitle + '-fuck'" v-on:click="show"/>
            
            <input type="button" value="按钮3" v-bind:title="mytitle + '-fuck'" v-on:mouseover="showmouse"/>
            
        </div>
        
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    msg:'123',
                    msg2:'<h1>哈哈，我是一个大大的H1</h1>',
                    mytitle:'这是自己定义的一个title'
                },
                methods:{
                //定义了当前vue实例所有可用的方法
                show:function(){
                    alert('NICE TO METT YOU!')
                },
                showmouse:function(){
                    alert('click me !')
                }
            }
            })
            
            //不建议直接操作DOM
            document.getElementById('btn').onclick = function(){
                alert('hello')
            }
        </script>
    </body>
</html>

v-text

v-html

v-bind

v-on：事件绑定机制