1. Vue的基础代码

<!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>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
     <!--用 Vue new出来的实例会控制这个元素-->
     <!-- Vue 实例所控制的区域就是 MVVM 的V-->
     <!--new 出来的vm就是MVVM 中的VM  ,其中的调度这-->
    <div id="app">
        <P>{{msg}}</P>   
    </div>
        
    <script>
        //2.创建一个Vue实例
        //当我们带入包之后,在浏览器内存中就多了一个Vue构造函数
        var vm =new Vue(
            {
                el:'#app',  //表示我们这new的这个Vue要控制的区域
                // MVVM 中的M  用来保存数据
                data :{
                    msg:'欢迎学习Vue'  //通过Vue的指令,直接把数据渲染到页面上,不在手动操作DON元素
                }
            }
        )

            

    </script>
</body>
</html>

  

2. c-cloak、c-text、c-html介绍.
<!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>Document</title>
    <style>
        /* 解决闪烁问题 */
        [v-cloak] {   
            display:none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p v-cloak>1111{{msg}}1111</p>  <!-- 不会覆盖元素中的内容 -->
        <h4 v-text="msg">123123</h4>   <!-- 会覆盖元素中的123123 -->
        <p v-cloak>1111{{msg2}}1111</p>  <!-- 不会覆盖元素中的内容 , 只会当做是一个文本-->
        <h4 v-text="msg2">123123</h4>   <!-- 会覆盖元素中的123123 ,只会当做是一个文本 -->
        <h1 v-html="msg2"></h1>  <!--会当做是一个html的标签输出-->
        
        <!--v-bind: 吧mytitle当做一个变量,用于绑定Vue中提供与绑定属性的指令 可以直接写成:  也可以在其中写入合法的js表达式-->

        <input type="button" value="按钮" v-bind:title="mytitle" v-on:click="show"> <!--可以直接把v-on:写成@-->
    </div>
    
    <script src="lib/vue.js"></script>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'123',
                msg2:'<h1>我是一个H1</h1>',
                mytitle: '这是一个自己定义的title'
            },
            methods:{  //在这个属性中定义了当前Vue实例所有可用的方法
                show:function(){
                    alert('HELLO')
                }
            }
        })
    </script>
</body>
</html>

  3. 走马灯页面效果

<!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>Document</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <!-- 要控制的元素-->
    <div id="app">
        <input type="button" value="嘚瑟起来" @click="start">
        <input type="button" value="停" @click="stop">
        <h1>{{ msg }}</h1>
    </div>
    
    <script>
        
        var vm =new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育,别浪--',
                intervalid:null
            },
            methods:{
                start(){
                    if(this.intervalid!=null) return;
                    /*  =>  使内部的this指向外部的vn的this*/
                    this.intervalid = setInterval(() =>{
                        //console.log(this.msg)   /*在VM实例中想要获取data上的数据或者想要调用methods中的方法,必须通过this. 来获取或调用*/
                        var st =this.msg.substring(0,1)
                        var end =this.msg.substring(1)
                        this.msg =end + st
                        },400)
                    
                    
                    
                    
                    //注意:vm实例会检讨自己身上的data中的所有数据的改变,只要数据变化就会自动把数据更新倒也没上去
                },
                stop(){
                    clearInterval(this.intervalid)
                    this.intervalid =null
                }
                

            }
        })
        

    </script>
    
</body>
</html>

  4. 事件修饰符的使用

<!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>Document</title>
    <script src="lib/vue.js"></script>

    <style>
        .inner{
            height: 150px;
            background-color: blue
        }
    </style>

</head>
<body>
    <div id ="app">
        <div class="inner" @click.self="bivHandler">
            <!--可以连接到一起使用-->
        <!-- <div class="inner" @click.onec="bivHandler"> .once 只触发一次事件-->
        <!-- <div class="inner" @click.self="bivHandler"> .selt 只有点击当前元素才会触发事件-->
        <!-- <div class="inner" @click.capture="bivHandler"> .capture 实现捕获事件的触发机制  -->  .

            <!-- <a href="https://123.sogou.com/?121033" @click.prevent="LinkClick">搜搜</a>  阻止默认行为 -->

            <!-- <input type="button" value ="使劲戳" @click.stop="btnHandler">  .stop 修饰符 阻止冒泡 -->

            <input type="button" value ="使劲戳" @click="btnHandler">
            <h4>{{msg}}</h4>
            <input type="text" value ="使劲戳" @click="btnHandler" v-model="msg">  <!--v-model  数据双向绑定 互相改变 ,不加model的只能从代码改变页面无法逆向改变-->

        </div>
    </div>

<script>
    var vn=new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        methods:{
            bivHandler(){
                console.log("这是DIV")
            },
            btnHandler(){
                console.log("这是button")
            },
            LinkClick(){
                console.log("这是a")
            }
        }
    })

</script>

</body>
</html>