从零开肝Vue2.0(day02)

1. 条件渲染

v-show and v-if
	当v-show 和 v-if 里面的条件判定为真的话，就渲染对应的标签容器等（就是在页面中显示出来）
	当v-show 和 v-if 里面的条件判定为假的话，就会隐藏起来
	样例代码如下：
	       <div id="app">
            <p v-show="true">这是v-show的标签</p>
            <p v-show="a">这是v-show的标签</p>
            <p v-show="1 === 1">这是v-show的标签</p>
            <p v-if="true">这是v-show的标签</p>
            <p v-if="a">这是v-show的标签</p>
            <p v-if="1 === 1">这是v-show的标签</p>
        </div>
    <script>
        const  vm = new Vue({
            data:{
                a : false
            },
        })
        vm.$mount('#app')
    </script>
注：：v-show 和 v-if 的区别  如下图所示

当 使用 v-show 渲染时，如果隐藏起来，会默认在style后加上 display : none ，如 1 所示
当 使用 v-if 渲染时， 如果隐藏起来，整个结构都会消失 ， 如 2 所示
v-else-if  and v-else
	这两个加上v-if可以看做是 java 或者 c语言 JS 等里面的判断语句，v-else-if ， v-else 需要和
	v-if 连用（中间不能被打断）， 如下所示：
	    <div id="app">
            <p v-if="a === 1">这是v-show的标签</p>
            <p v-else-if="a === 2">if - else 判断</p>
            <p v-else>else 判断</p>
        </div>
    <script>
        const  vm = new Vue({
            data:{
                a : 3
            },
        })
        vm.$mount('#app')
    </script>

2. 列表渲染

v-for的使用
      <div id="app">
            <ul>
                <li v-for="s in student">{{s.name}}</li>//使用v-for遍历数组
            </ul>

            <ul>
                <li v-for="m in message">{{m}}</li>//使用v-for遍历对象中的所有属性
            </ul>

            <ul>
                <li v-for="s in str">{{s}}</li>//使用v-for遍历字符串
            </ul>
        </div>
    <script>
        const  vm = new Vue({
            data:{
                student :[
                    {id : 1 ,name : 'test'},
                    {id : 2 , name : 'test02'},
                    {id : 3 , name : 'test03'}
                ],
                message: {
                    id: 4,
                    name: 'test04',
                    sex: '男'
                },
                str : 'abcdefg'
            },
        })
        vm.$mount('#app')
    </script>
    以下面这个代码为例进行分析
    <li v-for="s in student">{{s.name}}</li>
    s 是形参，可自己命名， s in student 的意思为 在student数组中的一个成员s 
    {{s.name}} 相当于 取出student中的一个成员的一个name属性
    v-for 可以定义两个形参 如下所示
    <li v-for="(s,i) in student">{{s.name}}--{{i}}</li>
    固定的第一个参数为取出的student中的成员，第二个参数为取出的下标，如果只写一个参数，默认是
    student中的成员

渲染后的页面如下

3. key

key 一般用在 v-for中
key 存在于虚拟DOM 中，算是vue内部的，最后并不会放到标签中
当数据改变的时候，vue会根据新数据生成新的虚拟的DOM，然后将现在的DOM和旧的DOM比较
如果新的DOM和旧的DOM 对比的时候有相同的key则 比较其内容是否变化，如果没变则仍使用之前的DOM 
如果发生变化，则会生成新的真实的DOM 将 之前的页面中的替换掉
如果新的DOM和旧的DOM 对比的时候没有相同的key则直接生成一个真实的DOM到页面
一般情况下，如果只是用v-for来遍历所有的属性，不需要加key Vue会默认将index作为key
如果要对数据进行破坏顺序的操作，如：插入一个新的数据，中间删除一个数据等，都会将顺序破坏
这样就需要一个唯一的属性来标识数据中的成员，
  <li v-for="s in student" :key="s.id">{{s.name}}</li>
      

4. v-model

v-model 获取各种表单的value 方法 如下代码所示
	    <div id="app">
       账号 <input type="text" v-model="username">
        密码<input type="password" v-model="password">
        年龄<input type="text" v-model="age">
        //单选这里需要加上value，通过v-model来绑定sex，value不可以省
        性别<input type="radio" v-model="sex" value="男">男
        <input type="radio" v-model="sex" value="女">女
        //同上单选框，且复选框这里对应的hobby需要定义成数组来存储
        爱好<input type="checkbox" v-model="hobby" value="抽烟">抽烟
        <input type="checkbox" v-model="hobby" value="喝酒">喝酒
        <input type="checkbox" v-model="hobby" value="烫头">烫头
        地址<select v-model="address">
            <option value="">--请选择--</option>
            <option value="北">北</option>
            <option value="上">上</option>
            <option value="广">广</option>
            <option value="深">深</option>
        </select>
        信息<textarea v-model="text">
        </textarea>
    </div>
    <script>
        const vm = new Vue({
            el : '#app',
            data:{
                username: '',
                password: '',
                age : '',
                sex : '',
                hobby : [],
                address :'',
                text :'',

            },
        })
    </script>
  v-model 的修饰符：
  	lazy: 失去焦点后再收集数据
  	如： <input type="text" v-model.lazy="username">
  	加上lazy后，vue会先等你输入完毕，失去在input中的光标后，再收集数据,不加的话就会边输入收集边
  	number : 将输入的字符串都转化为数字
  	如：<input type="text" v-model.number="age">
  	因为输入到文本框中的数据都会被转化为字符串的形式，加上number后，文本框只识别数字，
  	且会将有效的字符串转化为数字,（注：：当出现除数字以外的字符后，只会识别前面出现的
  	数字，后面再出现就识别不了）
  	trim : 将输入的首部和尾部的空格过滤掉
  	<input type="text" v-model.trim="username">
  	去空格

5. v-text 和 v-html

       <p v-text="name"></p> 几乎等同于<p>{{name}}</p>  
       只不过，{{name}}相对来说更灵活一些，使用{{name}}可以在标签里进行一些拼接
       如 ：<p>名字是：{{name}}</p> 
       而使用v-text 会直接覆盖掉标签里面的所有内容，只显示v-text的内容
       v-html 的作用和 v-text 也类似，但是 v-html可以渲染标签，比如
       str = '<h>h标签</h>'
       <div v-html="str"></div> 会直接将str中的<h>标签渲染到页面，
       而 v-text只会将其作为字符串来处理

6. v-clock

	一个特殊的属性，他会在Vue加载的时候自己消失。
	作用：当一些网络过慢的时候，如果加载过慢，导致Vue还没有渲染页面，那么就会出现一堆没有
	加载的标识符 比如 {{name}}，没有被加载就会显示到页面上，如下图：

而将 v-clock 配合 CSS样式来使用，就可以防止未加载完成的标识符等显示在页面上
    <style>
        [v-clock]{
            display: none;
        }
    </style>
    加上这段CSS样式后，就会在Vue未加载之前，不显示含有v-clock的标签，容器等，
    而当Vue加载完成后，v-clock会自动消失，这样CSS样式不起作用，就会加载出
    Vue渲染后的页面

7. v-once 和 v-pre

<p v-once>{{num}}</p>
v-once 绑定的标签等，仅仅在第一次变化的时候动态加载一次，随后就变成静态的，无论值怎么改变，都不会
对他造成影响
<p v-pre>{{num}}</p>
v-pre 加上后Vue会跳过对他的解析，也就是说，他不在受Vue的控制，如上代码，就会直接在页面上输出
{{num}} ， 而不会在去找的num在渲染到页面上