01 Dec 2020 5511字 19分

Vue 模板语法

1.插值

文本

<span>Message: </span>

 let vm = new Vue({
        el:"#app",// 受到控制的元素
        data:{
            msg:"👍👍👍👍👍👍"
        }
    })

纯 HTML

<span v-html="rawHtml"></span>
    let vm = new Vue({
        el:"#app",// 受到控制的元素
        data:{
            rawHtml:"<span style='color:red'>红色的内容</span>"
        }
    })

如何防止 XSS(跨站脚本攻击),XSRF(跨站请求伪造)
前端过滤
后台转义
给cookie 加上 Secure 和 HttpOnly 标记,这样通过JavaScript的 Document.cookie API无法访问带有 HttpOnly 标记的Cookie，它们只应该发送给服务端
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

使用Javascript表达式

！！！以下语句不会生效

<!-- 这是语句，不是表达式 -->


<!-- 流控制也不会生效，请使用三元表达式 -->
<!--  例： if (ok) { return message }  不能在模板语句内写，会报错  -->

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-bind

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。

缩写: :

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

v-if

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。

template v-if ,包装元素template 不会被创建

v-else

不需要表达式,前一兄弟元素必须有 v-if 或 v-else-if。

<div v-if="Math.random()>0.5">
  你可以看到我了
</div>
<div v-else>
  看不到看不到
</div>

v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

根据表达式之真假值，切换元素的 display CSS property。元素还在，只是看不见而已。

v-on

缩写：@
绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>

v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

(1)v-for (特殊 v-for=”n in 10”)

in (for in)
of (for of)

//没有区别

(2)key：

跟踪每个节点的身份，从而重用和重新排序现有元素

理想的 key 值是每项都有的且唯一的 id。data.id

(3)数组更新检测

a. 使用以下方法操作数组，可以检测变动

push() pop() shift() unshift() splice() sort() reverse()

b. filter(), concat() 和 slice() ,map(),新数组替换旧数组

c. 不能检测以下变动的数组

vm.items[indexOfItem] = newValue

解决方法

(1) Vue.set( target, propertyName/index, value )

(2) splice

<div v-for="item in items">
  
</div>

<div v-for="item in items" :key="item.id">
  
</div>
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>

v-model

在表单控件或者组件上创建双向绑定。

文本

<input v-model="message" placeholder="edit me">
<p>Message is: </p>

多行文本

<span>多行文本信息是:</span>
<></p>
<br>
<textarea v-model="message" placeholder="添加多行文本"></textarea>

复选框

单个复选框

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox"></label>

多个复选框绑定到同一个数组

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: </span>

单选按钮

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: </span>
</div>

选择框

单选时

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: </span>
</div>

如果 v-model 表达式的初始值未能匹配任何选项，元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

多选时

<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: </span>
</div>
new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})

v-text

更新元素的 textContent。

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span></span>

v-html

更新元素的 innerHTML

<div v-html="html"></div>

v-slot

提供具名插槽或需要接收 prop 的插槽。

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre></span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

[v-cloak] {
  display: none;
}
<div v-cloak>
  
</div>

不会显示，直到编译结束。

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!-- 单个元素 -->
<span v-once>This will never change: </span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p></p>
</div>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once></li>
</ul>

Class 与 style

绑定HTML Class

对象语法
```
<div :class="{ red: isRed }"></div>
```

数组语法

<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

绑定内联样式

对象语法

<div :style="{ fontSize: size + 'px' }"></div>

数组语法

<div :style="[styleObjectA, styleObjectB]"></div>

//需要将 font-size =>fontSize