VUE一些基本指令

什么是vue？

​vue是一款友好的、多用途的且高性能的js框架，一款构建用户界面的渐进式框架，它可以帮你创建可维护性和可测试性更强的代码库。Vue只关注视图层， 采用自底向上增量开发的设计。（转载）

什么是渐进式？

简单来说就是你可以吧vue当成插件使用也可以当成库使用，也可以当成框架使用。

下面我们来说一说vue的一些简单的指令。

vue指令

1.插值表达式
html部分

 <div id="div">
 		//一些基本的数据类型
 		//number
        {{123}} <br />
        //string
        {{"憨憨敬礼"}}<br />
        // boolean
        {{true}} <br />
        // Array
        {{[1,2,1,2,111]}}<br /> 
        // Object 注意使用对象时边要用空格隔开
        {{ {a:1,B:2} }} <br />
        //单向数据绑定
        {{name}} <br />
        {{age}} <br />
        {{arr[0]}} {{arr[3]}} {{arr["length"]}} <br />
        {{obj.name}} <br />
        //运算
        {{arr[0]+arr[1]}}
        //三元表达式
        {{ 20>10?"ok":"no" }}
    </div>

js部分

var vm = new Vue({
            el: "#div",
            data: {
                name: "张三",
                html: "<h1>这是一个h1标签</h1>",
                age: 19,
                arr: [1, 2, 1, 222],
                obj: {
                    name: "张三",
                    age: "19",
                },
                color: "red",
                pink: "pink",
                yellow: "yellow",
                green: "green",
                red: "red"
            }
        });

效果展示

简单的指令
html代码：

<!-- 1.v-pre  跳过该元素及其子元素的后面的渲染，显示的初始值{{}}-->
    <div v-pre>
        <div>
            {{ name }}
        </div>
    </div>

    <!-- 2.v-cloak 跳过第一次渲染,只让他渲染第二次 -->
    <div v-cloak>{{ name }}</div>

    <!-- 3.v-once 只会渲染一次-->
    <div v-once>{{ name }}</div>
    <div>{{ name }}</div>

    <!-- 4.v-html 相当于innerHTML 但是这个很少用，他要求这个html片段一定是被处理过的，值得被信任的，因为能够被信任代码很少，而且这个安全性太低-->
    <div v-html="dom"></div>
    <!-- 5.v-text 相当于innerText -->
    <div v-text="text"></div>
    <!-- 6.v-if 控制元素是否存在 -->
    <div v-if="flag">
        <div>true</div>
    </div>
    <div v-else>
        <div>false</div>
    </div>
    <!-- v-else v-else-if 跟原生js语法相同，一组必须是连续的，中间不能有插足者-->

    <!--模板可以减少dom的渲染次数 -->
    <template v-if="flag">
        <div>2</div>
        <div>1</div>
        <div>3</div>
    </template>

    <!-- 9.v-show -->
    <!-- v-show和v-if的区别 
        1.v-show是控制样式display:none,v-if是直接控制元素的是否存在
        2.v-if如果初始条件为flase则连编译都没有
        3.v-sho不支持template标签
    -->
    <div v-show="flag">
        <div>true</div>
    </div>
    </div>

css样式

 [v-cloak] {
            background-color: green;
        }

js代码

 var vm = new Vue({
            el: "#div",
            data: {
                name: "张三",
                html: "<h1>这是一个h1标签</h1>",
                age: 19,
                text: "憨憨敬礼",
                flag: true,
                arr: [1, 2, 1, 222],
                obj: {
                    name: "张三",
                    age: "19",
                },
                color: "red",
                pink: "pink",
                yellow: "yellow",
                green: "green",
                red: "red"
            }
        });