vue 小小基础总结

  指令与模板：

特点：
         就是v开头的特殊属性  她的值预期为javascript单行指令

                               可以渲染实例的值
                                   v-text=“msg”

                                  数学运算：
                                   v-text=“2+3”；
                                       使用js表达式
                                  v-text=“msg.length”

                                        如果是文本需要加单引号
                                     v-text=“我在中国，‘+msg“

                              指令是联系模板与vue实例的桥梁

 vue的实例：

var vm =new Vue（{。。。}）

vm就是new Vue创建的实例

       前端基本常用的 四个框架的单词

1.vue    2.react 3.angular    4.jquery

文本渲染指令：
  {{}}

v-text
文本渲染指令

v-html
html文本渲染指令

条件渲染指令： 

v-if
v-else
v-else-if
v-show：隐藏元素以css的方式

频繁切换用v-show少量切换用v-if

遍历指令：
字符串,数字，列表，对象进行遍历

 v-for:

<p v-for="(item ,index) in list" v-key="item">{{index+1}}-{item{}}</p>

list" v-key="item">{{index+1}}-{item{}}</p>

item遍历的元素（自定义的名称）
index遍历的下标（键名）
list 被遍历的数据

v-bind:key  值必须是唯一
          为了让vue更好的优化渲染列表

属性绑定：
 
    v-bind:title="msg"

    :title="msg"
     属性绑定简写形式

    :class :id :disabled

    事件：

v-on:click="num++"
                  事件指令

            @click=“num++”
               事件绑定简写

  
            事件的参数：

            @click=“sayNum”
             默认传入事件对象

              @click =“sayNum(3)”
                传入实参3
               
              @click="sayNum($event,3)"
                 传入事件对象，和参数3

       
           事件修饰符：

   .stop阻止事件冒泡
                                 
      .prevent阻止默认事件

         .once 只响应一次
                          
                            .enter 回车
                                 .up 上
                             .down 下
                           .space空格
                              .esc 取消
                            .del删除
                                  ...,

                   按键修饰符：
                     keydown,keyup

           
            系统修饰符：
              
                        .ctrl
                         .shift
                      ...

                鼠标修饰符：
                        .left
                         .right
                         .middle
                        

  
              表单：

                         v-model="num"
                         把num的数据和表单的值绑定在一起

                      单行，多行

                     1个默认值
                          选中为true
                         未选中为false

           多选：    多个值，绑定的数组动态添加/移除当前元素的value值

                    单选：
                            下拉：select
       
             
                       表单修饰符：
                 
                                 .lazy:chang事件触发数据更新
                           
                                 .number:强制转换为数字

                        v-model=“mum”  :value="num"
                               简写：                  @input="num=$event.target.value" 
                                       

                           vue操作：让指令联接 数据与dom
                                            业务操作数据，实现自动更新dom

                           computed计算  ：  从现有数据计算出新的数据（只读）

                                               computed：{

                                                 “total”:  function(){

                                                     return   xxxx

                                                }

   computed：{

                                                 “total”:  function(){

                                                     return   xxxx

                                                }

                                           }

                                           }

                   
                                       watch监听：   监听数据的变化执行回调函数

                                                         

                watch:{

                                                                "obj":{

                                                                   handler(nval){

                                                                        //执行回调函数

                                                                        }，

                                                                      deep:true

                                                                        }

                                                                   }

                        class:

                  文本：

                  :class="active"

               没有加单引号的active是一个变量不是字符串

                 对象：

         ：class=“{‘active’：flag}”

      数组：

    ：class=“list”

style：

          

   ：style=“{color:'red'，fontSize:'24px'}”

              css属性驼峰式写法

高阶数组：

 filter：过滤

forEach：遍历

 map：映射

 
                       String： 1.检测字符串indexOf   字符串转数组split   去空白trim      切片slice
                                    

                       Array: 1.添加：push   unshift       删除：shift   pop   splice
                                      过滤：filter      遍历：forEeach       检测：indexOf     映射：map                                                                                    

                                    JSON：转字符串：stringify      转js对象  parse