【学习札记】Vue学习

1. 初始化

每个 Vue 应用都需要在script中通过实例化 Vue 来实现

参数：

• el：DOM 元素中的 id；
• data：定义属性；
• method：定义函数。通过return返回值，可以直接在前端显示；
• {{ }}：输出对象属性和函数返回值。

<script src="vue.min.js"></script>
<script>
    var view = new Vue({
        el: "#ID",
        data:{
            "name": "xhh",
            "age": 24
        },
        method: {
            func: function() {
                return this.name + ' is ' + this.age;
            }
        }
    })
</script>

<div id='ID'>
    <h1>{{name}}</h1>
    <h1>{{func()}}</h1>
</div>

---

2. 模板语法

Vue 使用了基于 HTML 的模板语法, 允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 其核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统, 在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上.

2.1 插值

2.1.1 文本

数据绑定最常见的形式 --> {{  }}

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello'
        }
    })
</script>

<div id='app'>
    <p>{{ msg }}</p>
</div>

2.1.2 v-html指令

用于输出html代码

<script>
     new Vue({
        el: '#app',
        data: {
            msg: '<h1>hello xhh</h1>'
        }
    })
</script>

<div id='app'>
    <div v-html='msg'></div>
</div>

2.1.3 属性 v-bind指令

通过判断来决定某属性是否生效

<script>
    new Vue({
        el: '#app',
        data:{
          use: false
        }
    })
</script>

<div id="app">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <div v-bind:class="{'class1': use}">
        class1 生效与否与use的boolen值有关
    </div>
</div>

2.1.4 表达式

Vue提供了完全的JS表达式支持

<script>
    new Vue({
        el: '#app',
        data: {
            ok: true,
            message: 'hello',
            id : 1
        }
    })
</script>

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">id为list-1的元素</div>
</div>

2.2 指令

指令是带有v-前缀的特殊属性, 用于在表达式的值改变时, 将某些行为应用到DOM上.

2.2.1 v-text

【string】更新元素的textContent, 其作用与{{  }}相同

<span v-text="msg"></span>
<span>{{ msg }}</span>

2.2.2 v-html

【string】更新元素的innerHTML, 前面做过叙述, 不再赘述.

2.2.3 v-show

【any】根据表达式的真假值, 切换元素的display, 当条件变化时该指令触发过渡效果. v-show的元素始终会被渲染并保留在DOM中

<h1 v-show="isShow">Hello!</h1>

2.2.4 v-if, v-else & v-else-if 

【any】根据表达式的真假值来有条件的渲染元素, 在切换元素及它的数据绑定/组件被销毁并重建. 当条件变化时该指令触发过渡效果. 内容只会在指令的返回表达式为truthy的时候被渲染. 

<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>

2.2.5 v-for

【array | object | number | string | iterable】 基于源数据多次渲染元素或模板块, 必须使用特定语法 lias in expression, 为当前遍历的元素提供别名.

• 数组

  <ul id="array-rendering">
      <li v-for="item in items">
          {{ item.msg }}
      </li>
  </ul>
  
  <script>
      Vue.createApp({   
          data() {
              return {
                  items: [{msg: 'Foo'}, {msg: 'Bar'}]
              }
          }
      }).mount('#array-rendering')
  </script>

• 对象

  <ul id="v-for-object">
      <li v-for="value in myObject">
          {{ value }}
      </li>
  </ul>
  
  <script>
      Vue.createApp({
          data() {
              return {
                  myObject: {
                      title: 'How to do lists in Vue',
                      author: 'Jane Doe',
                      publishedAt: '2016-04-10'
                  }
              }
          }
      }).mount('#v-for-object')
  </script>

 2.2.6 监听事件 v-on

【Function | Inline Statement | object】用v-on指令（简写@）来监听DOM事件, 并在触发事件时执行一些JS, #v-on: click="methodName" 或使用 @click="methodName"

<div id="basic-event">
    <button @click="counter += 1">Add 1</button>
    <p>The button above has been clicked {{ counter }} times.</p>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                counter: 0
            }
        }
    }).mount('#basic-envent')
</script>

<div id="event-with-method">
    <button @click="greet">Greet</button>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                name: 'xhh'
            }
        },
        methods: {
            greet(event) {
                alert('Hello ' + this.name + '!')
                if (event) {
                    alert(event.target.tagName)
                }
            }
        }
    }).mount('#event-with-method')
</script>

更多实例

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

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

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

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

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

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

2.2.7 v-bind

【any | object】（缩写 : 或 .）动态的绑定一个或多个attribute, 或一个组件prop到表达式. 在绑定class或style时, 支持其它类型的值, 如数组或对象. 在绑定prop时, prop 必须在子组件中声明.

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

<script>
    data() {
        return {
            isActive: true,
            hasError: false
        }
    }
</script>

<!--渲染结果-->
<div class="static active"></div>

当isActive 或 hasError 变化时, class列表将相应地更新.

2.2.8 v-model

{ input select textarea }在表单控件或组件上创建双向绑定. v-model 会忽略所有表单元素的value, checked, selected 等的初值. 它将始终将当前活动实例的数据作为数据来源. 在JS的 data 选项中声明初始值.

<div id="v-model-basic">
  <input v-model="message" placeholder="edit me" />
  <p>Message is: {{ message }}</p>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                message: ''
            }
        }
    }).mount('#v-model-basic')
</script>

<!--textarea-->
<div id="v-model-textarea" class="demo">
    <span>Multiline message is:</span>
    <p style="white-space: pre-line;">{{ message }}</p>
    <br />
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
</div>

<script>
    Vue.createApp({
        data() {
            return {
                message: ''
            }
        }
    }).mount('#v-model-textarea')
</script>

2.2.9 v-slot

【可放置在函数参数位置的JS表达式】（缩写#）实现了一套内容分发的 API, 这套 API 的设计灵感源自 Web Components 规范草案,  将 <slot> 元素作为承载分发内容的出口. 若模板中没有<slot>元素, 则该组件起始标签和结束标签之间的任何内容都会被抛弃.

<todo-button>
    add todo
</todo-button>

<!--todo-button template-->
<button class="btn-primary">
    <slot></slot>
</button>

<!--渲染结果-->
<button class="btn-primary">
    add todo
</button>

---

3. 计算属性 computed

当在处理一些复杂逻辑时很有用. 如 {{ msg.split('').reverse().join('') }}, 使用计算逻辑输出.

<div id="app">
    <p>原始字符串: {{ message }}</p>
    <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
    var vm = new Vue({
        el: '#app',
        data: {
          message: 'xuhaha'
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

我们可以使用 methods 来替代 computed, 效果上两个都是一样的, 但是 computed 是基于它的依赖缓存, 只有相关依赖发生改变时才会重新取值. 而使用 methods, 在重新渲染的时候, 函数总会重新调用执行.