横冲直撞vue(第三篇)：vue中template的三种写法、v-bind、v-on、更新元素的指令v-text与v-html、条件渲染指令v-if 与v-show、v-for

一、vue中template的三种写法

 

第一种(字符串模板写法):

直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写.

　　

第二种（使用script元素）HTML5标准之前的写法

 

​
    
  new Vue({
            el: "#app",
            
            data: {
                message: 'HTML5标准之前的写法，存在一定弊端（可自行google）\
                          之后HTML5发布的template元素弥补了此方式的缺点'
            },
            template: '#tem',
        })

　　

通过使用

　　

​

v-bind:class='xxx'：xxx为表达式结果的类型，除了字符串外，还可以是对象或数组；

　　语法：v-bind:属性名="常量 || 变量名 || 对象 || 数组"。

　　简写形式：属性名='变量名.....'

　　v-bind 进行属性绑定所有的属性都可以进行绑定，注意只要使用了v-bind后面的字符串一定是数据属性的值。

常见的使用方式

v-bind:src="imageSrc"  可以缩写： :src="imgaeSrc"
​
​
:class="{ red: isRed }"  或  :class="[classA, classB]" 
​
​
:style="{ fontSize: size + 'px' }"  或 :style="[styleObjectA, styleObjectB]"
​

　　

​
 绑定一个有属性的对象，比如：v-bind="{ id: someProp, 'other-attr': otherProp }"

1、绑定字符串

    

        
        
我是一个三级标题
        
    
    
    

　　

显示效果

 

当鼠标悬停在h3标签几秒之后，会显示值“页面加载于”。悬浮在图片上会显示time的值。

v-bind的简便写法（只写冒号“:”不写v-bind）：

``

　　

 

2、数组语法

　我们可以把一个数组传给v-bind:class,以应用一个 class 列表：

 

    

        
数组绑定class
    
    
    

​

 

显示效果

　如果你也想根据条件切换列表中的 class，可以用三元表达式：

`
`

　　

　　这样写将始终添加 errorClass，但是只有在 isActive 是 true时才添加 activeClass。

　　不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

`
`

　　

 

 

三、v-on

动态地绑定一个或多个特性，或一个组件 prop 到表达式；其作用和v-bind类似。注意：如果用在普通元素上时，只能监听 原生 DOM 事件；但是如果用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

    

    
    
    
    
    

​

　　

显示效果

 

示例二

    

    
    
    
    
    
    

​

　　

v-on 接收一个需要调用的方法名称，上面例子里的show就是自己定义的方法的名称。在vue中所有的事件都声明在methods中。

　注意：v-on有简便写法，可以直接用@替代

`切换`

　　

v-on 与v-bind结合切换加载class

    


    

        

         
        切换颜色
    
​


​

　　

页面显示效果如下

 

 

四、更新元素的指令v-text与v-html

1、v-text

　　v-text等价于 {{}} ，实现原理：innerText。

　　更新元素的 textContent(**innerText**)。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。v-text不能出来html标签

　　

显示效果如下所示：

 

 

2、v-html

　　v-html实现原理是js中的innerHTML方法。v-html可以处理标签的替换

　　更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

　　

　显示效果如下所示：

 

使用v-html需要注意：

　　1）在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

　　2）在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局 ​ ​

​

v-if 控制的元素

v-show 控制的元素

　　

​

效果

 

　如上图所示，v-if和v-show的不同就是：带有v-show的元素始终会被渲染并保留在DOM中，v-show只是简单地切换元素的CSS属性display。

3、v-if 与 v-show 的区别

　　v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

　　相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

　　一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

4、v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

  Now you see me


  Now you don't

　　

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

 

5、v-else-if

2.1.0 新增

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

  A


  B


  C


  Not A/B/C

　　

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

 

 

 

六、v-for

基于数据渲染一个列表，类似于JS中的遍历。其数据类型可以是 Array | Object | number | string。

该指令之值，必须使用特定的语法(item, index) in items, 为当前遍历元素提供别名。 v-for的优先级别高于v-if之类的其他指令。

一个对象的 v-for 你也可以用 v-for 通过一个对象的属性来迭代。

// 遍历obj中每个key对应的value

    
{{value}}

​
// 遍历obj的value和key

    
{{value}}

​
// 遍历obj的value、key和索引

    
{{value}}

 

　　

1、v-for遍历普通数组

v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。

  

    
​
    
索引值：{{i}} --- 每一项：{{item}}
​
  
  
  

　　

​

页面显示效果如下：

 

 

 

 

2、v-for遍历对象数组

 

  

    
Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}
  
  
  

​

　　

​

页面显示效果如下

3、v-for遍历对象

  

    
    
值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}
  
  
  

　　

​

页面显示效果如下

4、v-for迭代数字

  

    
    
    
这是第 {{ count }} 次循环
  
  
  

　　

页面显示效果如下

5、v-for中key的作用：为什么使用v-for时必须添加唯一的key属性

key的作用：

  key是为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key属性。

举个例子

没有加key的情况：

    

        

            
            添加
        
        

            

                ID：{{item.id}} -------name：{{item.name}}
            
        
    

　　

​

没有加key的时候，当我选中第二个“nicholas2号”后，再添加nicholas4号时：

则会出现问题：选中的变成了“nicholas1号”，位置依旧是第二个，很显然这不是我们想要的结果，解决这个问题的方法就是加key属性

 

加上key的情况：

    

        

            
            添加
        
        

            

                
                ID：{{item.id}} -------name：{{item.name}}
            
        
    

　　

​
​

加上key以后，当我选中第二个“nicholas2号”后，再添加nicholas4号时：

注意：key的取值必须是number 或 string，不能是对象，而且使用 v-for 循环的每一项的值，都要保证唯一性 。

 

 

 

 

 

参考资料

[1]https://cn.vuejs.org/v2/guide/conditional.html#v-if

[2]https://www.cnblogs.com/xiugeng/p/9615963.html