三、模板语法
1. Vue表达式（插值表达式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习使用</title>
<!-- 第1步： 引入vue库文件 -->
<script src="./js/vue.js"></script>
</head>
<body>
<!-- 第2步：挂载点 -->
<div id="app">
<!-- vue模板的表达式为 {
{ 变量 }} -->
<!-- 表达式中不能定义变量或函数，也不可以写if条件或循环 -->
<!-- 绑定变量 -->
<div>{
{ title }}</div>
<!-- 进行计算 vue模板中不太建议在里面写运算 -->
<div>{
{ 1+1 }}</div>
<!-- 调用函数或方法 -->
<div>{
{sum()}}</div>
<!-- 调用js内置方法 不太推荐 -->
<div>{
{ '电饭锅是'.substr(0,3) }}</div>
<!-- 三目运算 -->
<div>{
{ age<20?'未成年':'成年' }}</div>
</div>
<!-- 第3步：实例化vue -->
<script>
const vm = new Vue({
el: '#app',
data: {
age: 18,
title: 'hello vue',
// 函数可以写在data中的，但是不太建议
// data中的数据都会被劫持，但是函数是没有必须劫持的
// vue为了提升性能，新增一个配置选项，用于定义函数方法method，它不会被劫持
// sum
},
methods: {
sum() {
return 1 + 2
}
}
})
// function sum() {
// return 1 + 2
// }
</script>
</body>
</html>2. 指令
指令(Directives)就是vue给html标签提供的一些自定义属性，这样属性都是带有 v- 前缀的特殊属性。指令特性的值预期是单个JS表达式(v-for是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。
vue中的指令是可以操作真实的dom的。
指令作用：
-
操作dom(权限限制)
-
表单验证
2.1 v-cloak
vue中提供一个专门用于解决闪现问题的指令 v-cloak，v-html或v-text它们能够解决闪现，但是有的时候，一些项目在前期没有用它，这时候如果全部去修改，工程量有点大，可以用此指令。
# css中设置
[v-cloak] {
display: none;
}
# html
<div v-cloak>
{
{ message }}
</div>2.2 v-html和v-text
v-html 解析html指令 注：尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
v-text 输出文本信息
<div id="app">
<!-- 转义html -->
<h3>{
{html}}</h3>
<!-- 解析 html -->
<div v-html="html"></div>
<!-- 转义html -->
<div v-text="html"></div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
html:'<a href="http://www.baidu.com/">百度一下</a>'
}
})
</script>2.3 v-pre和v-once
v-pre指令：
此指令是一个性能优化的指令，使用它，可以提升性能。
跳过这个元素和它的子元素的编译过程，跳过大量没有指令的节点会加快编译。
<span v-pre>不需要编译，直接可以运行</span>v-once：
只渲染元素和组件一次，之后元素和组件将失去响应式功能。
<div id="app">
<h3>{
{message}}</h3>
<hr>
<!-- 动态修改message值，此绑定将不会发生改变 -->
<div v-once>{
{message}}</div>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '你好世界'
}
})
</script>2.4 v-if和v-show
根据表达式的布尔值(true/false)进行判断是否渲染该元素。
-
v-if:如果条件不成立，则不创建或删除已创建元素，初始化它的性能更高一些，如果频繁切换则性能低一些,权限显示相关，建议用v-if
-
v-show:如果条件不成立，通过样式来隐藏，初始化它的性能低一些，如果频繁切换则性能更好一些
<div id="app">
<!--
v-if是对dom元素的移除和创建
v-show是通过修改标签的display值
-->
<!-- 如果isShow的值是true ,就显示p标签 -->
<p v-if="isShow">我是p标签中的内容</p>
<p v-show="isShow">我是p标签中的内容</p>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>注：v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
# 多条件判断
v-if … v-else-if v-else