Vue篇/第二 基本指令 v - html // v -text // v-bind

基本指令 在开标签中书写  

 　　v-html 解析html相关语法 

　　在变量的内容 是一段甚至一大段带有标签的字符串时使用v-html     

　　 

 <!-- //由于{{}}只能输出变量 ，有时候需要插入标签怎么办，
//可以使用v-html  -->
    <div id="myapp">
        {{ooxx}}
        <div v-html="message"></div>
        <!-- //把message值 也就是H3标签插入当前div -->
    </div>
 
    <script>
        var myapp = new Vue({
            el: "#myapp",
            data: {
                ooxx: '普通的显示hello vue.js ',
                message: "<h1>h1标签的显示i am not gay</h1>",
            }
        })
    </script>

 

 

vue在渲染的过程中 如何 解决 快速刷新 出现 {{}} 的问题

 第一种方式： v-text 直接输出文本 没有{{}} 就解决了闪屏问题

【v-text会覆盖使用标签内的内容】

 <div id="app">

        <div v-text='info'>哈哈哈哈哈哈</div>

　　【这个标签的内容会被info的内容覆盖】

 

        <div>

            <span>我的名字是：{{userInfo.name}}</span>

             <span>我的年龄是： {{userInfo.age}}</span>

         </div>

        <div>

                我的名字是：<span v-text='userInfo.name'></span>

        </div>

 

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{//实际上写项目的时候  这个data赋值的内容 大都来自于接口（动态的）

              

                info:'<h2>采菊东篱下</h2>',

                title:'',//这个值是通过接口调取的

 

                userInfo:{

                    name:'张大大',

                    age:5

                }

            }

        })

    </script>

  第一种方式： v-cloak 专门解决闪屏问题

全局解决用法：
这是页面
<div id='app' v-cloak>
容器内容
</div>
css样式：
[v-cloak]{
display:none
}

v-bind

 <!--        动态数据绑定                v-bind: 可以简写成 ：       -->

 

<div id="app">
        <div>
            <img v-bind:src="imgUrl" alt="">
　　　　没有简化的
        </div>
        <div>
            <img :src="headUrl" alt="">
　　　　简化后的
        </div>
        <div>
            <a v-bind:href="url">去购物</a>
        </div>
        <div>
            <a :href="urlDetail" :title="name" > title是规定元素的工具提示文本（tooltip text）   去学习</a>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{//实际上写项目的时候  这个data赋值的内容 大都来自于接口（动态的）
                imgUrl:'http://img4.imgtn.bdimg.com/it/u=3599075280,1682155658&fm=11&gp=0.jpg',

                headUrl:'http://img1.imgtn.bdimg.com/it/u=1847821041,2132076028&fm=11&gp=0.jpg',

                url:'http://www.jd.com',

                urlDetail:'http://xue.ujiuye.com',
                
                name:'穿云箭'
            }
        })
    </script>