Vue

Vue 基础

软件架构体系

• MVC —— Model Vue Controller
• MVVM —— Model View ViewModel

三种 Template用法

1. createApp 赋值
2. script：x-template + id

     <script type="x-template" id="why">
    <div>
      <h2>{{message}}</h2>
      <h2>{{counter}}</h2>
      <button @click='increment'>+1</button>
      <button @click='decrement'>-1</button>
    </div>
     </script>
   

3. HTML原生标签
   • ```html

  
  
### Mustache语法
#### 使用方法
1. 使用变量 {{value}}
2. 使用表达式
3. 调用函数
4. 三元运算符

---

#### 错误用法
* 赋值语句
* if语句
* 等

#### 示例
```html
  <template id="my-app">
    <!-- 1.mustache的基本使用 -->
    <h2>{{message}} - {{message}}</h2>
    <!-- 2.是一个表达式 -->
    <h2>{{counter * 10}}</h2>
    <h2>{{ message.split(" ").reverse().join(" ") }}</h2>
    <!-- 3.也可以调用函数 -->
    <!-- 可以使用computed(计算属性) -->
    <h2>{{getReverseMessage()}}</h2>
    <!-- 4.三元运算符 -->
    <h2>{{ isShow ? "哈哈哈": "" }}</h2>
    <button @click="toggle">切换</button>

    <!-- 错误用法 -->
    <!-- var name = "abc" -> 赋值语句 -->
    <!-- <h2>{{var name = "abc"}}</h2>
    <h2>{{ if(isShow) {  return "哈哈哈" } }}</h2> -->
  </template>

基本指令

v-once

• 作用：使变量不会重新渲染，初始化即是固定值
• 用法：放在 html 标签中 <div v-once>
  • 有继承特性

v-text

• 作用：等价于 {{}}
• 用法： <h2 v-text="message"></h2> === <h2>{{message}}</h2>
• mustache 用法更灵活一些

v-html

• 作用：将内容为 html 代码的变量渲染出来
• 用法： <div v-html="msg"></div>

v-pre

• 作用：展示 mustache 原本内容，不进行渲染
• 用法： <div v-pre>{{msg}}</div>

v-cloak

前置背景：
vue渲染时，可能会出现这么一种情况：先显示 {{value}} ===》 渲染成具体的对象
为了防止这种情况的发生，通过 style对未渲染前的mustache 对象 进行隐藏： ```html

{{message}}

``` 当渲染出来后，再去掉 cloak

• 作用：隐藏未编译的mustache标签