vue学习第一天笔记

VUE

• 下载和安装
  • vue官网
  • npm下载vue模块：npm install vue
  • 下载完后使用里面的vue.js文件即可；
• vue.js 是MVVM框架
  • 数据可以影响视图，视图也可以影响数据；
• 体验vue.js
  • 模板渲染；在视图中用{{msg}}来引入msg的属性值到页面中，可以通过app.msg="xx"重新赋值，此时页面也会实时更新；

   
   
   
       
       
   
   
   
  
       {{msg}}
   
   
   
   
   
  

  • 动态操作DOM属性：通过定义数据，来实时改变DOM中标签元素的属性值；
    • 使用：v-bind:属性名="动态数据"
    • 在webstorm中使用v-bind会报红，所以可以删除它只写冒号后面的代码：如：:属性名="动态数据"
  • 条件判断：通过判断数据的布尔值，进而来控制元素的显示和隐藏；
    • 使用：v-if:"动态数据"
    • 如：v-if:"bok"；指的是判断bok的值，如果为true,则显示该元素，为false，则不显示该元素；
  • 循环：数据和对象的遍历
    • 使用：v-for="(item,index) in 数据数组名或对象名"
    • 其中：
      • 1)如果遍历数组：item获取的是数组中的每个元素，index获取的数组中元素的索引值；
      • 2)如果遍历对象：item获取的是对象中的属性值，index获取的对象中的属性名；
  • 事件：
    • 使用：v-on:事件名="数据"
    • 在webstorm中会报红，所以需要使用@事件名="数据";
    • 如果赋值给事件为函数，函数在应用中必须写在methods中，数据写在data中；

     
     
     
         
         
     
     
     
    
         
    {{msg}}
         顺序
     
     
     
     
     
    

  • 双向数据绑定
    • 表单数据和应用数据的联系，通过v-model来设置表单标签，当表单中输入内容时，可以改变应用中的数据；
    • 如果一个标签想要只赋值一次应用数据，则可以使用v-once，这样只会赋值一次数据，数据变化后，它不会再改变；

     
     
     
         
         
     
     
     
    
         
    {{msg}}
         
         
         
         
    {{msg}}
     
     
     
     
     
    

  • 自定义组件
    • 注册组件：通过Vue.component("timet",{template:"
    • xxxxx
    " });
    • 注册组件名和template模板
    • 使用时，直接使用标签即可；
    • 父级组件传递数据给子级组件；
      • 父级组件设置自定义属性，来向子级传递数据，设置自定义属性用v-bind:属性名="数据值";
      • 子级组件在Vue.component中通过props来获取属性名，即props:["属性名"],则属性名就代表传递来的数据值；

  • 表达式和v-html
    • 表达式：{{}}
      • 可以进行设置数据值，如{{msg}}；
      • 可以进行赋值，如{{msg=200}},此时应用中的msg数据也会变化；
      • 可以使用三目(三元表达式)，如{{bok?333:444}},即条件判断成立与否，得到的值不同；
    • v-html：设置在标签上，代表将数据值，以标签的形式插入到该标签中；

     
     
     
         
         
     
     
     
    
         
         {{msg}} {{msg=444}} {{bok?666:777}}
         
         
    
         
         
    {{glt}}
     
     
     
     
     
    

  • v-if和v-show
    • v-if:判断数据值的布尔值，如果为true,则该元素显示，否则，删除该标签节点；相当于removeChild()；
    • v-show:判断数据值的布尔值，如果为true,则该元素显示，否则，该元素隐藏，不会删除该标签节点；相当于display:none;
    • 如果频繁切换显示或隐藏，就用v-show；判断数据是否存在，就用v-if；

购物车实例

• 思路：
  • 下载bootstrap模块，构建静态页面，命令：npm install bootstrap@3;规定版本，否则，一些css样式不能使用；
  • 引入bootstrap.css文件；
  • 构建静态页面，在信息区域，通过在应用区域data内设置ary数组数据，在页面中通过v-for来遍历ary数据，拿到item数据每一项元素，和index，索引值；
  • 删除功能：通过点击表格中的删除按钮，来触发deleteOne函数，函数中删除对应的ary中的数据，进而页面中删除；
    • 重要：通过v-for遍历数组时，拿到每个数组元素的索引index，通过点击事件设置时，将index作为参数传给deleteOne函数，函数内拿到索引值，通过splice就可以删除此项；
  • 删除全部功能：点击删除全部按钮，触发deleteAll函数，将ary赋值为空数组；
    • 为了实现，当删除全部后，让删除全部一行也删除或隐藏，可以在tr上设置v-if或v-show，判断ary的长度是否为0，若为0，则赋值为true，进而该行就隐藏或删除；
  • 增加功能：点击按钮触发addOne函数，函数内将数据插入到ary中；
    • 重点：在输入内容的表单上，设置v-model="xxx"，这样就实现了表单输入数据和应用数据的同步，需注意的是，在应用data中一定要设置shopname和shopprice为空，否则，会报错；
    • 当输入内容后，shopname和shopprice的值就会实时更新，输入完毕后，点击按钮，然后将两个值以对象的形式，插入到数组中；数据增加后，将两个值赋值为空；即重置；
    • 筛选：
      • 当点击按钮后，必须判断shopname和shopprice值是否均存在，如果不存在，则不能提交；
      • 存在的情况下，可以对输入的shopname值进行判断，然后进行一系列的操作；
  • 重置功能：点击重置按钮，然后将shopname和shopprice值赋值为空；
• 代码：

 
 
 
     
     
     
     
 
 
 

     

         

             

                 
购物车
                 

                     
商品名称
                     
商品价格
                     
操作
                 
                 

                     
{{item.name}}
                     
{{item.price}}
                     
删除
                 
                 

                     
删除全部
                 
             
         
         

             

                 

                     商品名称
                     
                 
                 

                     商品价格
                     
                 
                 

                     
                     
                 
             
         
     
 
 
 
 
 

知识

vue学习大纲1-基础，事件和数据交互