Vue 基础笔记 01

1. 插值表达式

使用 {{}} 的形式将数据显示在页面上

<div>{{msg}}</div> //msg 是data里面初始化定义的属性

2.指令

指令的本质就是：自定义属性

指令的格式：以v-开始

常用指令：

v-bind：动态绑定属性；缩写举例：v-bind:src 缩写为 :src
v-on:click：动态绑定事件;缩写举例：@click
v-for：遍历
v-model：双向数据绑定
v-if：动态创建/删除 DOM
v-show：动态显示/隐藏 DOM
v-text：填充为纯文本
v-html：填充HTML片段，该方法存在安全问题。跨域的访问不推荐使用该指令，同网站可以使用。在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。只在可信的内容上使用v-html，永不用在用户提交的内容上。
v-pre：填充原始信息，显示原始信息，跳过编译过程（分析编译过程）
v-once：只编译一次，显示内容之后不再具有响应式功能（应用场景：如果显示的信息后续不需要再修改，就可以使用v-once，这样可以提高性能）

1. 绑定HTML Class

<!-- 单个类名绑定 -->
<div v-bind:class="{ active: isActive }"></div>
<!-- 多个类名绑定 -->
<div v-bind:class="{ active: isActive, error: isError }"></div>

<!-- 单个类名绑定 -->
<div v-bind:class="[activeClass]"></div>
<!-- 多个类名绑定 -->
<div v-bind:class="[activeClass, errorClass]"></div>

2. 绑定内联样式

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

<div v-bind:style="[baseStyles, overridingStyles]"></div>

1. v-if

<h1 v-if="true">创建节点</h1>

2. v-if 和 v-else

<h1 v-if="true">创建节点</h1> 
<h1 v-else >删除节点</h1>

3. v-if、v-if-else、v-else

<h1 v-if="ceate === 1">创建节点</h1> 
<h1 v-else-if="ceate === 2" >编辑节点</h1> 
<h1 v-else >删除节点</h1>

4. v-show

v-show 不支持 template 语法

<h1 v-show="true">显示节点</h1>

5. template

tempale:是一个包装元素，不会真正的创建在页面上。

使用场景：标题1、标题2、标题3都收到同一个条件控制时，可使用template。

<template v-show="true">
    <h1>标题1</h1>  
    <h1>标题2</h1>  
    <h1>标题3</h1>  
</template>

6. v-if、v-for组合使用

v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

<ul>
   <li v-for="item in dataList" v-if="true">{{item}}</li>
</ul>