vuejs--基本指令1

本文链接： https://blog.csdn.net/RyleeLouth/article/details/102711614

vuejs的下载

1，可以通过复制官网链接cdn，链接最新版本的vue（最新的稳定版）
2，通过nodejs，在其包管理器npm或者yarn进行下载
3，直接去github上面下载源码

代码托管平台

码云 gitee
gitlab（一个产品，完全类似GitHub或者gitee，是一个可以在企业内部运行的代码托管平台）（商业公司更愿意使用 svn 作为版本控制器）
coding.net（深圳一家公司做的代码的托管平台）

vue指令

v-for 遍历数组，对象

1，v-for 是些在最小的循环单元里面的
2，v-for=’’ "引号里面其实是一个for in循环
3，v-for 可以遍历数组和对象

<body>
<ul>
    <li v-for="item in arr">{{ item }}</li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:'ul',
        data:{
            arr:[1,2,3,4]
        }
    })
</script>
</body>

v-html 转译html原文

1，如果是直接在插值表达式里面书写html代码，那么vue不会进行转译，为了防止xss攻击，
2，在需要转译的地方加上v-html=" "，引号里面是html代码或者模型变量，vue就会对html代码进行转译，但是这个方法使用要慎重，要确保你的html代码是安全的
3

<body>
<div>
    <p >
        {{ html}}//<p>hello</p>
    </p>
    <p v-html="html"></p>//hello
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "div",
        data: {
            html: "<p>hello</p>"
        }
    })

</script>
</body>

v-text 设置元素的innerText作为模型变量的值

1， < p>{{ title }}< /p>有页面闪烁问题：如果网络差，或者用户电脑配置差，用户会看到插值表达式
2，用v-text可以完美的解决页面闪烁问题，因为这种方式在标签内没有插值表达式
3，但是如果标签之间还有别的内容的话，就会覆盖，用拼接的方式将标签里面原有的东西放在v-text里面就可以解决
4，但是这里要注意一个问题，拼接的时候，外面是单引号，里面要双引号，外面双，里面就要单

<body>
<div>
    <!--页面闪烁问题：如果网络差，或者用户电脑配置差，用户会看到插值表达式-->
    <p>{{ title }}</p>
    <!--用v-text可以完美的解决页面闪烁问题，因为这种方式在标签内没有插值表达式-->
    <p v-text="title"></p>
    <!--但是如果标签之间还有别的内容的话，就会覆盖，-->
    <!--解决方法如下，用拼接的方式将标签里面原有的东西放在v-text里面-->
    <!--但是这里要注意一个问题，拼接的时候，外面是单引号，里面要双引号，外面双，里面就要单-->
    <p v-text="'内容：'+title"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "div",
        data: {
            title: "hello vue!"
        }
    })

</script>
</body>

v-cloak 解决页面闪烁问题

不希望出现闪烁的标签设置 v-cloak属性
设置 style 样式，使用该属性选择器：display:none
当执行完毕后,vuejs 会把所有有 v-cloak指令移除

css：

<style>
    [v-cloak]{
        display: none;
    }
</style>

html：在标签上加上v-cloak属性

<p v-cloak>
    {{title}}
</p>

js：这里没有需要修改的地方

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "p",
        data: {
            title: "hello vue!"
        }
    })

</script>

v-if 删除和添加节点

1，true时显示，false时隐藏

<body>
<div>
<p v-if="true">//显示
    {{title1}}
</p>
<p v-if=" false ">{{ title2}}</p>//隐藏
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "div",
        data: {
            title1: "hello if!",
            title2:"hello else"
        }
    })

</script>
</body>

v-if 和 v-else

1,当v-if 为true时，v-else为false，当v-if为true时，v-else 为 false

<body>
<div>
<p v-if="true">//显示
    {{title1}}
</p>
<p v-else>{{ title2}}</p>//隐藏
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "div",
        data: {
            title1: "hello if!",
            title2:"hello else"
        }
    })

</script>
</body>

结果如下，v-if和v-else是将元素移除或者添加
在这里插入图片描述

v-show 控制display属性，显示与否

当true时，display：block,当false时，display：none

<body>
<div>
    <p v-show="true"> {{ title1 }} </p>
    <p v-show="false"> {{ title2 }} </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "div",
        data: {
            title1: "hello true",
            title2:"hello false"
        }
    })
</script>
</body>

结果如下：v-show是控制display的属性值，但是元素还存在
在这里插入图片描述

v-if 和v-show该如何取舍？

v-if：只能实现一次的显示和隐藏
v-show：可以实现多次显示与隐藏
看你的业务需求如何，合理选择指令

v-pre 不会解析vuejs语法，原封不动的输出

<body>
    <p v-pre> {{ title }} </p><!-- 输出{{ title }}-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "p",
        data: {
            title: "hello true",
            title2:"hello false"
        }
    })
</script>
</body>