vue基础操作--指令

vue基础操作–指令

mustache语法的支持性

前端的数据类型可以分为基本类型和引用类型

基本类型：number、string、boolean、null、undefined

引用类型：object

那么vue中mustache语法对其他类型的支持性也是很好的。

那么vue中mustache语法对其他类型的支持性也是很好的。以上类型都可以支持

对流程控制（判断、循环）的支持性都是很好的

    <div id="app">
        <p> 数字: {{num}}</p>
        <p> 字符串: {{string}}</p>
        <p> 空对象: {{null}}</p>
        <p> undefined: {{unde}}</p>
        <p> 对象: {{obj.name}}</p>
        <p> 数组: {{arr[1]}}</p>
        <p> 语法： {{ null?1:2 }} </p>
        <p> 语法： {{ null && 1 || 2 }} </p>
    </div>

Vue指令

Vue.js的指令是以v-开头的，借鉴了angular1.0，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令作为元素的属性，指令会为绑定的目标元素添加一些特殊的行为
在这里介绍一些自带的vue指令

数据展示指令

        <h1>数据展示</h1>
        <p> {{info}}</p>
        <p v-html = "xml"></p>
        <p v-text = "info"></p>

1、直接使用mustache语法可以直接展示数据

2、使用指令 v-html 可以解析xml数据如

<span>心里有月亮</span>

3、使用指令 v-text 和mustache语法一直可以直接展示数据，也有一些不同：

​ v-text 和 {{}} 结果是一样的，但是{{}} 有个短暂的{{}} 显示

条件渲染指令

<h1>条件渲染</h1>
        <h2>单路分支</h2>
        <p v-if = "flag">眼里有星星</p>
        <h2>双路分支</h2>
        <p v-if = 'flag'>眼里有星星</p>
        <p v-else>心里有月亮</p>
        <h2>多路分支</h2>
        <p v-if = "type === 'A'">眼里有星星</p>
        <p v-else if = "type === 'B'" >心中有月亮</p>
        <p v-else>身上有阳光</p>

单路分支，结果看指令接受到的数据的真假，若为false,该标签不会渲染

双路分支、多路分支同上

条件展示

<p v-show = "show_flag">  眼里有星星 </p>

条件展示也是根据指令接受的结果来展示该元素，但和条件分支有一定的不同：

1.条件展示为假的时候，标签的不会不渲染，只是标签的display属性为none

2.而条件分支是不渲染，两者有很大的区别

故在开发项目中，用到的多的DOM元素用条件展示指令v-show ,用到不多的元素用条件分支显示

列表渲染

列表渲染在正常开发的用处很大，在这里这事了一些基本的用法

  <h1>列表渲染</h1>
<h3>数字</h3>
<ul>
    <li v-for='item of 10'>
        {{ item }}
    </li>
</ul>
<h3>字符</h3>
<ul>
    <li v-for='item of info'>
        {{ item }}
    </li>
</ul>
<h3>数组</h3>
<ul>
    <li v-for='item of arr'>
        {{ item }}
    </li>
</ul>
<h3>对象</h3>
<ul>
    <li v-for='item in obj'>
        {{ item }}
    </li>
</ul>
<h4> 对象渲染 </h4>
<ul>
    <li v-for="(item,key,index) in obj ">
        <p> value: {{ item }} </p>
        <p> key: {{ key }} </p>
        <p> index: {{ index }}</p>
    </li>
</ul>
<h3>json</h3>
<ul>
    <li v-for='item in jsonData'>
        {{ item.task  }}
    </li>
</ul>
<!-- 正常开发的json数据都是有很多重嵌套的，这里双重嵌套的情况 -->
<h3>两层数据</h3>
<ul>
    <li v-for='item in nestData'>
        <h4>{{ item.name  }}</h4>
        <ul>
            <li v-for='ele in item.floor'>
                {{ ele.name  }}
            </li>
        </ul>
    </li>
</ul>  

单项绑定

用单项绑定数据，可以将数据赋给已有的属性，如未设置单项绑定的指令就不能连接到正确的路径

<h3>单项数据绑定</h3>
<img v-bind:src="img" alt="">  
<!-- 也可简写为 -->
<img :src="img" alt="">

双向绑定

vue的双向绑定可以通过表单元素的value值与数据进行交互，两方有一方改变另外一方也会有相同的改变

        <h3> 双向数据绑定 </h3>
        <!-- 仅仅是使用在表单元素身上    form   input  checkbox ... -->
        <input type="text" v-model = "info">
        <p>{{info}}</p>

阻止预编译

v-pre可以用来阻止预编译，有v-pre指令的标签内部的内容不会被编译，会原样输出

        <h3> v-pre </h3>
        <p v-pre>{{ info}}</p> 

在这里标签内的结果并不是info代表的字符串而是{{info}}

渲染一次

v-onece指令只渲染元素和组件一次，之后的渲染都会跳过

<h3> v-onece</h3>
<p v-once>{{info}}</p>
<p>{{info}}</p>
<input type="text" v-model="info" name="">

瞬时样式

在v-cloak指令上加载样式，如下所示，在页面加载过程中，就不会出现源代码的这种状况，在页面加载完成后，样式就会移出，是解决屏幕闪动的一个解决办法

        <h3> v-cloak</h3>
        <p v-cloak>{{ info }}</p>

样式

    [v-cloak]{
    display: none;