vue 笔记2

数据渲染：

v-html=""渲染：

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">
    <div v-html="mess"></div>
</div>
<script>
    new Vue({        
        el: '.app',
        data: {
            mess: '<h1>hello,word</h1>'
        }     
    });
</script>

v-text="":渲染：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">
    <div v-text="mess"></div>
</div>
<script>
    new Vue({        
        el: '.app',
        data: {
            mess: 'hello,word'
        }     
    });
</script>

v-html和v-text的区别？

v-html能解析代码v-tetx不能解析代码

数据绑定：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">
    <!-- 解析HTML标签 -->
    <p v-html="name"></p>
    <!-- 看作文本，输出字符串 -->
    <p v-text="name"></p>
    <!-- 等于text 输入文本 -->
    <p>{{name}}</p>
    <!-- v-model双向绑定 -->
    <input type="text" v-model="name">
    <br> 姓名：{{name}}


</div>
<script>
    new Vue({        
        el: '.app',
        data: {
            name: ''
        }     
    });
</script>

属性指令：

v-bind:

渲染图片路径：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">
    <img src="https://alifei05.cfp.cn/creative/vcg/veer/800water/veer-163970114.jpg" alt="">//html写法
    <img v-bind:src="img" alt="">//vue写法
    <img :src="img" alt="">//vuejianxie

</div>
<script>
    new Vue({        
        el: '.app',
        data: {
            //图片路径
            img: 'https://alifei05.cfp.cn/creative/vcg/veer/800water/veer-163970114.jpg',
        }
    });
</script>

渲染css样式：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">

    <div :class="boxstyle[1]">{{name}}</div>

</div>
<script>
    new Vue({        
        el: '.app',
        data: {
            //把css样式封装成数组
            boxstyle: ['pink', 'blue'],
            name: 'hello,world'
        }
    });
</script>
<style>
    .pink {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    
    .blue {
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>

多种css样式渲染：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">

    <div :style="bluestyle">{{name}}</div>
    <span :style="pinkstyle">{{name}}</span>

</div>
<script>
    new Vue({        
        el: '.app',
        data: {
            //渲染css样式
            bluestyle: 'width:100px;height:100px; background: skyblue;',
            pinkstyle: {
                width: '200px',
                height: '200px',
                background: 'pink',
                display: 'block',

            },
            name: 'hello,world'
        }
    });
</script>

条件指令：

v-if=""：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">
  //判断随机数大于0.5输出hello小于输出world
    <div v-if="Math.random()>0.5">hello</div>
    <div v-else>world</div>

</div>

 v-show"":

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="app">
            //判断a==1   true显示false不显示
    <div v-show="a==0">
        wo shi a
    </div>
    <div v-show="a==1">
        my is bbb
    </div>


</div>
<script>
    new Vue({        
        el: '.app',
        data: {
            a: 1,
            b: 2,
            name: 'hello,world'
        },


    });
</script>

v-if和v-show的区别？

v-if:

• v-if指令的作用：根据表达式的真假切换元素的显示状态
• v-if = "表达式"
• 本质是通过操纵dom元素来进行切换显示
• 表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移

• v-show:
• v-show指令的作用是：根据真假值切换元素的显示状态,是响应式的
• 1.语法表达v-show = " 表达式 "
  2.原理是修改元素的的CSS属性(display)来决定实现显示还是隐藏
  3.指令后面的内容最终都会解析为布尔值
  4.值为真(true)的时候元素显示，值为假(false)的时候元素隐藏
  5.数据改变之后呢对应的元素的显示状态也是会同步更新的
   
• v-show是元素始终被渲染到HTML，当不满足条件时会被隐藏，满足就显示。
• 是通过修改元素css属性（display）来操作显示和隐藏的

v-if是满足条件的会渲染到html中，不满足条件的不会渲染到html中的，是通过操纵dom元素操作切换显示和隐藏

应用：v-if需要操作dom元素，有更高的切换消耗，v-show只是修改元素的的CSS属性有更高的初始渲染消耗，如果需要非常频繁的切换，建议使用v-show较好，如果在运行时条件很少改变，则使用v-if较好