Vue的基本代码与简单指令

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

vue基本代码

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

    
{{msg}}

---

vue简单指令

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

    {{msg}}

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

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

msg2:'
Test
';

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

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

点击效果

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

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

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

---

跑马灯效果实例

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

            
            
            
{{msg}}
        

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

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

   点击开始时文字开始环绕，点击停止时停止

---