Vue review

  • 参考网址
    https://www.cnblogs.com/songhaixing/p/14706979.html

  • 三种获取data里面的值的方法

......
<body>
    <div id="container">
        {{msg}}
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#container',
            data:{
                msg:'测试信息'
            }
        })
    </script>
</body>
......

- vm.$data.msg='年后'
- vm._data.msg='年后'
- vm.msg='年后'

  • 文本指令

    • v-html: 渲染html标签(默认是不会渲染html标签的)

    • v-text: 原生展示js变量的内容,不会进行html解析

    • v-show: 放入布尔值;真,显示标签;假,不显示标签

    • v-if: 放入布尔值;真,显示标签;假,不显示标签

  • v-show 与 v-if 的区别

- v-show(比较懒) : 当值为 false 时, 标签还存在, 只是不显示, 因为设置了 display:none 属性

- v-if : 直接进行的 DOM 操作, 对标签进行删除或插入
  • v-html示例
......
<body>
    <div id="container">
        <!--可以简写成: <h3 v-html="link"></h3> 即无需再写插值语法-->
        <h3 v-html="link">{{link}}</h3> <!--成功渲染-->
        <h3>{{link}}</h3> <!--不会被渲染-->
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#container',
            data:{
                link:'<a href="http://www.baidu.com">摆渡一下</a>'
            }
        })
    </script>
</body>
  • v-text演示
......
<div id="container">
    <h3 v-html="link">{{link}}</h3> <!--会解析html-->
    <h3 v-text="link"></h3> <!--不会解析html-->
    <h3 v-text="content"></h3> <!--显示content文本-->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el:'#container',
        data:{
            link:'<a href="http://www.baidu.com">摆渡一下</a>',
            content:"人面不知何处去,桃花依旧笑春风"
        }
    })
</script>
  • v-show演示
......
<body>
    <div id="container">
        <button type="button" @click="showMsg">{{btnContent}}</button>
        <h3 v-show="isShow">{{msg}}</h3> <!--关注之处-->
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el:'#container',
            data:{
                isShow:true, // 设置默认值
                msg:"人面不知何处去,桃花依旧笑春风",
                btnContent:'隐藏'
            },
            methods:{
                showMsg(){
                    this.msg = !this.msg
                    if(!this.msg){
                        this.btnContent = '显示'
                        this.msg = ''
                    }else{
                        this.btnContent = '隐藏'
                        this.msg = "人面不知何处去,桃花依旧笑春风"
                    }
                    
                }
            }
        })
    </script>
</body>
......
  • 把上述demo小改一下,变成如下方式,一模一样的效果
    只不过Dom结构有所不一样

<h3 v-if="isShow">{{msg}}</h3>