vue入门--week1

vue学习笔记，比较基础。

mvc 和mvvc的区别

• mvc是后端概念：model、view、controller
• mvvc是前端概念： Model、View、ViewModel

最简单的vue代码段

  

      
{{ msg }}
  
  

vue对象属性

• el：指定vue对象要控制的区域。
• data：data对象定义了控制区域中要用到的数据。
• methods: 自定义方法。

vue指令

v-clock

• 用于解决屏幕闪动的问题。
• 如果网络较慢，网页还在加载vue.js，导致vue来不及渲染，这时页面展示的就是源代码。

    {{ msg }}

v-text 和 v-html

• v-text用vue对象中的值覆盖元素内容
• v-html区别于v-text的是：v-html绑会将内容解析为html，而v-text仅解析为普通文本。

      
========


var vm = new Vue({
          el: "#app",
          data: {
              msg: 'i have a gift'
}});

v-bind

• 元素属性可用v-bind绑定vue对象的属性
• v-bind:arrtribute 可以缩写为 :attribute

    

        
    
    
    var vm = new Vue({
            el: "#app",
            data: {
                msg: 'i have a gift'
            }
    });

style属性绑定

可以把样式定义在vue对象中,用v-bind:style引用

    
    
    
    
    

        

            我很帅！！
        
    

class属性绑定

类似style属性绑定

v-on

- v-on 提供事件绑定
- v-on:event 可以缩写为 @event

    

        
    
    var vm = new Vue({
            el: "#app",
            methods: {
                alert: function () {
                    alert("哈哈哈哈哈");
                }
            }
    });

v-model

双向数据绑定

 

     
     

     
 
 
 var vm = new Vue({
         el:"#app",
         data:{
             msg:"我好帅哦"
         }
 });

v-for

• 遍历原生类型数组
• 遍历对象数组
• 遍历对象的属性和值

    

        
索引{{i}}, 值{{item}}
        
 第{{i}}个user的id是{{user.id}},name是{{user.name}}
        
 user对象的属性{{key}}的值是{{val}}
        
这是第{{count}}个数字
 
    

v-if 和 v-show

- v-if： 用删除和创建dom元素的方法实现
- v-show： 用 display:none 属性实现

    

        
        
        
天空很蓝
        
        
天空很蓝蓝蓝
    

事件修饰符

默认行为冒泡,可以有下面选项

• .stop 阻止冒泡
• .prevent 阻止元素的默认行为
• .capature 事件捕获,不是太清楚。
• .self 仅当事件发生在元素自身时有效
• .once 绑定的事件只执行一次

写在最后

• 后端开发一枚，学前端是为了能够做更好玩的事情。
• 前端的学习笔记都放在这个仓库：https://github.com/pepper-0611/qianduan
• 在找工作的同学可以找我内推(看个人介绍)