ggggxc学习笔记----Vue学习笔记II----模板语法

三、模板语法

介绍：vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有Vue的模板都是合法的 HTML，所以能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM操作次数减到最少。如果熟悉虚拟DOM并且偏爱JavaScript的原始力量，也可以不用模板，直接编写渲染函数及render，使用可选的JSX语法(react采用的就是jsx语法)。

1.插值：

(1)文本

<span>Message: {{msg }}</span>
<!-- {{msg}} 用双大括号将data数据模型中的字段渲染到页面中 -->
<!-- {{ msg + 'Nihao' }} 双大括号内部可以放js表达式-->

(2)原始html

<span v-html="rawHtml"></span>

(3)属性

<div v-bind:id="dynamicld"></div>

(4)事件

<a v-on:click="dosomething">...</a>

(5)Javascript表达式

<div>{{ number+ 1 }}</div>

2.指令：

  v-bind：动态绑定元素上的属性

    v-bind:title  简写-->  :title="title"

  v-html：绑定html代码片段；富文本编辑器

      有格式的内容 --> 相应html代码片段

  v-on:动态绑定事件

    v-on:click="clickHandler" 简写 --> @click="clickHandler"

3.条件渲染：

  v-if  v- else：当exp返回true的时候h1的内容会被渲染，否则渲染v-else指令中的内容，v-if可以单独使用

例：

<h1 v-if="exp">Vue is awesomel</h1>
<h1 v-else>Oh no</h1>

  v-show：只是简单地切换元素的CSS property display。如果需要非常频繁地切换，使用v-show比较好

<h1 v-show="ok">Hello!</h1>

  区别：

    v-if v-else  通过控制dom节点的渲染，实现显示与隐藏

    v-show      通过控制dom节点css样式中display，来实现显示与隐藏

    频繁的显示与隐藏某个组件时，用v-show较好；v-if会频繁渲染dom数，占用资源，影响代码运行效率。

4.列表渲染：

  v-for：用于将列表数据进行渲染。v-for指令需要使用item in items形式的特殊语法，其中 items是源数据数组，而item则是被迭代的数组元素的别名。

  使用：   

<ul>
      <li v-for="(item, index) of arr" :key="index">{{item}}{{index}}</li>
</ul>

注意：不推荐同时使用v-if和v-for。当v-if与v-for一起使用时，v-for具有比v-if更高的优先级。

5.class绑定

       操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。所以在将v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外还可以是对象或数组。

  :class

    <div :class="{ active: isActive }">块级元素</div>

    <div :class="[active1, box1]">块级元素</div>

    <div :class="[isActive? active1 : box1]">块级元素</div>

6.style绑定

      v-bind:style的对象语法十分直观-->看着非常像CSS，但其实是一个JavaScript对象。CSS property名可以用驼峰式或短横线分隔(记得用引号括起来)来命名。

  :style

    <div :style="{color: 'red', fontSize: '24px'}">块级元素</div>

    <div :style="style1">块级元素</div>

<div :style="[style1, style2]">块级元素</div>

7.属性绑定

      v-bind 指令可以用于响应式地更新HTML attribute，v-bind指令名称之后以冒号表示要接受的参数。

<a v-bind:href="url"></a>

   url为变量，表示将url变量的值动态赋值给a标签的href属性，注意，这里url在vue中是什么类型就传递给href属性什么类型。

简写：

<a :href="url"></a>