06、Vue3.x开始【模板语法 {{♥}} 】

vuejs 模板语法🍌

---

• mustache 语法， 胡子语法hhhc ， 模板上太常用了，
• 还记得laravel 5.1, 时候还要和vue混合嵌套发生冲突 ， 都用的 胡子语法 {{}}

现在好了… 都挺好

1. 什么是模板？ 已经给好了格式，直接替换标签数据的模型。
2. vue的模板语法是什么？渲染绑定在vue实例上的数据的方法
3. 如何渲染的？ 通过虚拟dom, 自动计算好了如何渲染组件，就如何渲染。

---

1. 插值, {{}}

1. 普通的响应式文本插入 : <span>{{msg}}</span>
2. 一次性绑定，不响应数据在此更新 : <span v-once>{{msg}}</span>

---

2. 解析html, v-html:

1. {{}} 插入的值是数据 不进行解析 <span>{{tpl}}</span>
2. 使用 v-html=“varableHtmlTag” ， 使用v-html: 指令进行解析html
   • <span v-html=“tpl”></span>
   • tpl: ‘<span style=“color:red”> html <span>’ ， 可以在 v-html上直接解析的。
   • 容易被xss攻击，只对可信任的html进行插值，禁止对对用户提交内容插值

---

3. 绑定html属性, v-bind:

• 使用 v-bind
  • 例如， title, disabled, id … 各种属性
  • <button v-bind:disabled=“isButtonDisabled”>按钮</button>
  • <div v-bind:id=“dynamicId”></div>

---

4. 在 {{}} 中嵌入js表达式

• 单个表达式

{{ number + 1 }} 
{{ ok ? 'YES' : 'NO' }} 
{{ message.split('').reverse().join('')}}

<div v-bind:id="'list-' + id"></div>

• 每个绑定都只能包含单个表达式，所以下面的例子都不会生效

  这是语句，不是表达式：
{{ var a = 1 }}

 流控制也不会生效，请使用三元表达式
{{ if (ok) { return message } }}

---

5. 指令, v-*

1. v-if

   • v-if 指令将根据表达式 seen 的值的真假来插入/移除

     元素

   • <p v-if=“seen”>现在你看到我了</p>

2. v-bind:

   • v-bind 指令可以用于响应式地更新 HTML attribute：
   • <a v-bind:href=“url”> …</a>

3. v-on:

   • 监听 DOM 事件
   • <a v-on:click=“doSomething”> … </a>

---

6. 动态参数

- 根据参数的值，来动态绑定属性

注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
<a v-bind:[attributeName]="url"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

- 理解： 不是绑定死的， 属性和方法。 通过传来的值动态的展示出来
	- 可以将动态当作一个变量， 别处传来的，决定绑定的属性或函数是什么	
- attributeName， v-bind:[此处看作变量] 可以是 href, title ...
- eventName, v-on:[此处可以看成函数] 可以是 click, focus .. 方法
- 关键是理解动态，`简单说就是当作变量，根据计算后的值来决定属性`

---

7. 修饰符

• 【 . 】 点
  • <form v-on:submit.prevent=“onSubmit”>…</form>
    • 阻止冒泡属性， 本质是 对于触发的事件调用 ， event.preventDefault()
    • 可以对触发后的事件进行属性的调用， 就是js用点操作符连贯操作调用

---

8. 缩写

- v-on:   `@`
- v-bind:   `:`

---

9. 不好的编程习惯

1. 使用计算属性 ，处理包含响应式数据的复杂逻辑

- 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。例如： 这会触发一个编译警告 
<a v-bind:['foo' + bar]="value"> ... </a>

2. 编写dom中的属性和方法命名， 一律用小写

• 在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

---

总结：

1. 围绕的是模板渲染主题
2. 指令的使用， 和特殊指令的简写
3. 动态 参数
4. 修饰符
5. 编程习惯：
   • （1）注意用小写命名在dom中的属性和方法
   • （2）用计算属性代替模板中计算！

---

happy coding, Author:Silvercell
祝你学习进步， 编程提速 ， 加油！💪