前端vue之类的框架不提倡手动操作DOM

vue基本代码

1. el:表示new的vue实例要控制的页面上的区域
2. data中存放的是el中要用到的数据
3. 页面中会直接显示msg中的内容

<script>
        to
    var pmm=vue({
        el:'#div1',
        data:{
            msg:123
        }
    })
</script>
<div id="div1">
    <p>{{msg}}</p>
</div>

vue简单指令

1. v-cloak使用它能够解决插值表达式中的闪烁问题，在慢速加载页面时不会看到{{msg}}

<style>
   [ v-cloak]{
       display:none;
   }
</style>

<p v-cloak>
    {{msg}}
</p>

2. v-text显示效果与使用{{msg}}相同，但是它默认没有闪烁问题

<p v-text="msg"></p>

3. v-html可以直接插入一个htm标签

<p v-html="msg2"></p>

msg2:'<h2>Test</h2>';

4. v-bind绑定属性，v-bind可以被简写为 ：（+要绑定的属性）

<input type="button" value="按钮" v-bind:title="mytitle" />

data:{
       mytitle:'自定义title'
    }

点击效果

5. methods，是和el与data同级，属性定义了当前vue实例 所有可用方法

methods:{
         show:function(){
         alert("click")
                    }
                }

6. v-on事件绑定机制，可以简写为 @

<input type="button" value="按钮" v-on:click="show" />

跑马灯效果实例

1. 给开始和结束按钮绑定一个点击事件

<div id="div2">
            <input type="button" value="开始" @click="start">
            <input type="button" value="停止" @click="stop">
            <h4>{{msg}}</h4>
        </div>

2. 使用substring来截取字符串，并设置一个定时器来让其按照一定的间隔不间断的截取字符

<script>
            var dm=new Vue({
                el:"#div2",
                data:{
                    msg:'自动，环绕',
                    intervalId:null
                },
                methods:{
                    start(){
                    
                    if(this.intervalId !=null) return;//使开关不会重复开启定时器
                    
                        
                        this.intervalId=setInterval(()=>{// ()=>可以使内部的this指向外部的this
                        
                            
                            var first=this.msg.substring(0,1)
                            //获取第一个字符
                            var last=this.msg.substring(1)
                            //获取到后面的所有字符
                            this.msg=last+first
                            //重新拼接得到的字符串,并赋值给this.msg
                        
                    },400)
                    //构建一个定时器,实现自动化
                    },
                    
                stop(){
                    clearInterval(this.intervalId)
                    this.intervalId=null;
                    //每当清除定时器,需要重新把id置为null
                }   
                //停止定时器
                }
                
            })
        </script>

3. 在这个new Vue内部中想要获取data的属性或者调用methods中的方法都要通过this来访问
4. 在vue的实例中，会监听自己data中的数据变化，只要数据发生变化，就会自动把最新的数据从data中同步到页面中去
   
   点击开始时文字开始环绕，点击停止时停止