vuejs的初步使用

vue的构成

指令（操作dom元素）
组件（vue实例中的属性）

mustauch 语法糖 {{ }} 模板语法 支持js语法
模板语法 window中的一些方法不能用 alert console.log
if要以三元运算表达式使用
方法要使用匿名函数（模板语法中只能使用一句语句） （使用定义好的函数要写在methods属性中）
指令：
v-

循环渲染 v-for

    v-for= "item in arr"//arr为组件data中的属性
        {{ item }}//数组中的内容
    展示v-for中的索引
       v-for = "(item,key) in arr"
       {{ key }}
      
        对象的v-for最多可以有三个参数
        v-for = "(item,key,value) in obj"
        item:obj的值
        key：obj的属性值
        value：循环时的 i 值
        
        v-for 出现嵌套使用时，两个v-for的(item，key,value)命名可以一样，因为它们是相互独立的，外面的v-for的值不会进入里面的v-for中
        <u>v-for 可以循环数字或字符</u>
        
        v-for 底层：
            function v-for(arg){
                   //把arg处理成数组
                   for(var i =0;i<data.length;i++){
                        
                   }
            }

条件渲染

v-if 操作的dom元素的是否存在 true/false

    v-if = '"f" 单路分支
    
    <p v-if = "f">多路分支
        true
    </p>
    <p v-else-if = "boolean">
        v-else-if
    </p>
    <p v-else>
        false
    </p>

v-show 操作的dom元素的display属性 true/false

v-if vs v-show

性能：
    如果条件为假，v-show有较高的初始渲染开销
    如果频繁的进行切换   v-show有较高的初始渲染开销
                                v-if有更高的初始渲染开销