vue 学习 2

模板语法
mustache 语法支持js
用法：
内容：必须加 { { js语法 } }
属性：属性中属性值可以直接写js语法，并且属性值中的数据相当于全局变量（不加 { { } } ）

		js的支持性
		数据类型：
		基本类型：number string null undefine boolean
		引用类型：Object 
		null 和 undefined 不会显示，其他数据都支持，会显示
		
		mustache 语法中不写流程控制
		for
		if
		while
		do...while
		mustache语法中支持三元表达式，同样也支持运算符 
		短路原则也是支持的

指令
指令是用来操作DOM的
操作数据控制DOM，需要依赖指令
因为指令是直接绑定在dom上的

v-html 转义输出，可以解析xml数据
v-text: 非转义输出无法解析xml类型数据
v-bind 将数据和属性进行单向数据绑定：将vue中数据复制给属性值

		<img v-bind:src = "src" />
		
		简写格式：<img :src="src" alt="">

条件渲染

v-if的单路分支效果和 v-show 一样

v-if vs v-show 有何区别呢？
v-if控制的元素的存在与否
v-show控制的事元素的display: none 属性

项目中如何选择哪一个？
频繁切换用 v-show
如果不是很频繁的切换，那我们用 v-if

v-for 指令
    <h3> 数组 </h3>
    <ul>
        <li v-for = "(item,index) in arr" :key = " index ">
            {{ item }} -- index{{ index }}
        </li>
    </ul>
    <h3> 对象 </h3>
    <ul>
        <li v-for = "(item,key,index) of obj" :key = "index">
            {{ item }} -- {{ key }} -- {{ index }}
        </li>
    </ul>
    <h3> json </h3>
    <ul>
        <li v-for = "item in json" :key = "item.id">
             商品名称： {{ item.shop_name }} 
             商品价格： {{ item.price }} 
        </li>
    </ul>

<h3> 循环嵌套 </h3>

<ul>
    <li v-for = "item in lists" :key = "item.id">
        <h3>  商品类型： {{ item.shop_name }} </h3>
        <ul>
            <li v-for = "item in item.type" :key = "item.id">
                <p> 制造商： {{ item.maker }} </p>
            </li>
            <!-- <li v-for = "ele in item.type" :key = "ele.id">
<p> 制造商： {{ ele.maker }} </p>
</li> -->
        </ul>
    </li>
</ul>

<h3> 循环number / string  </h3>

<p v-for = "item in 10"> {{ item }} </p>
<p v-for = "item in 'abc'"> {{ item }} </p>

总结：

1. 列表渲染参数可以写三个，分别为 item key index
2. 列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识 ,
   1. 思考: 这是为什么？
   2. 这个key最好是id,因为id唯一？思考： 为什么不能是index
3. 循环嵌套式，参数名称是可以一致的
4. in / of 都可以使用

事件处理器
v-on
key的重要性
给列表渲染的每一层Vdom添加一个唯一标识，以便diff算法进行同层级比较
扩展： 理解key

表单控件绑定
v-model
双向数据绑定
VM 改变 V随之改变
V改变， VM也随之改变
v-model只用于表单
理由： v-model默认绑定value属性
技巧： 看到表单直接 v-model