vue笔记 day1

===九月复习了一下html5+css3的新属性，复习了js原生和jQuery，看了视频后没怎么做笔记orz。。。===

===十月开始了，这次准备认真，超认真看10days的vue视频，不是说一共看10days，而是10个部分，无论大大小小都记录下来===

 

今天day1.

以下代码都是copy自黑马程序员的教程code，如有侵犯请联系作者删除。

  
  
  
  
  



  

    
    
++++++++ {{ msg }} ----------
    
==================
    
    

    
{{msg2}}
    

    
1212112

    
    
    
    

    
    


    
  


  

  

对vue的认识：

（1）首先，vue是一个框架，优点是可以实现数据双向绑定，让程序员只关注view界面，这篇文章有提到vue.js的优点：Vue.js介绍以及优缺点，我觉得学习完vue.js后才可以更有体会地回答什么是vue.js的优点这个问题。

（2）vue编码 如下图所示

a. 先new一个Vue（{ ... }）对象

b. 赋值给变量vm

c. Vue对象的第一个关键部分：el，表示要控制的区域

d. Vue对象的第二个关键部分：data，用花括号包含多个数据，其变量在dom中直接用指令引用

e. Vue对象的第三个关键部分：methods，用花括号包含多个函数方法，在dom中通过绑定事件调用

（3）dom中如何使用data和methods

{{msg2}}

1212112

   

 

data：可以用{{}}直接指令，也可以用v-text，v-html，当前后需要其他文本的时候用+++++{{}}++++在双括号前后添加；

        此外，用v-bind绑定属性，可以在属性值中放入变量（js格式），便会被解析，可以简写为：

        v-bind：titile=“msg+‘other string or json-data’ ”

        :title="msg"

methods：用v-on绑定事件，简写为@

       v-on：click=“method name”  

       @click="method name"

(4)避免闪烁问题，如果不处理，直接{{msg}}, html页面加载过程中会先显示{{msg}},加载后才会导入数据，肉眼可见。

a. 默认 v-text 是没有闪烁问题的，但是用插值表达式的时候 ，必须用双花括号

b. 使用 v-cloak 能够解决 插值表达式闪烁的问题 

/*dom*/

++++++++ dafd{{ msg }} ----------


/*需要添加style样式*/

（5）事件修饰符，stop，prevent。。

（6）v-model双向绑定

当修改表单中的元素的值（v的值），那么在vue对象数据的值（M的值）也会发生实时改变

  

    
{{ msg }}

    
    

    
    
    
    
  

  

（7）绑定class类样式

四种方法，都需要 v-bind做数据绑定

  

    

    
    

    
    

    
    

    
    
这是一个很大很大的H1，大到你无法想象！！！


  

  

（8）绑定style行内样式

  

    
    

    
这是一个h1
  

  

（9）v-for

a。v-for循环普通数组，遍历时有两个值：val，索引。

  

    

    
索引值：{{i}} --- 每一项：{{item}}

  

  

b。v-for循环对象数组（在a的基础上，用item.id,  item.name 形式来表示，遍历时有个两值：val，索引。其中val可以再深入取值）

  

    
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
  

  

c。v-for循环对象，此时遍历的是一个对象，对象中有多个键值对，遍历时有三个值：val，key，索引。

  

    
    
值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}
  

  

d。迭代数字

  

    
    
    
这是第 {{ count }} 次循环
  

  

e。v-for循环中key的使用

  


    

      Id:
        
      

      Name:
        
      

      
    

    
    
    
    
 //这里的key
      {{item.id}} --- {{item.name}}
    
  

  

（10）v-if，v-show

  


    
    

    
    

    
    

    
    
    
这是用v-if控制的元素
    
这是用v-show控制的元素