# Vue 知识点总结

# Vue 环境搭建

1
     全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack my-project
    # 安装依赖
    $ cd my-project
    $ npm install
    $ npm run dev
2
    直接引入对应的js文件

# 基础知识

所谓指令，其实本质就是在模板中出现的特殊标记，根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。 v-text

解释：更新元素的 textContent，将数据解析为纯文本

<h1 v-text="msg"></h1>

这里 v 是 vue 的前缀，text 是指令 ID，msg 是 expression。 msg 作为 ViewModel，当它的值发生改变时，就触发指令 text，重新计算标签的 textContent(innerText)。

Mustache{{}}

解释：可以局部更新元素的 textContent，将数据解析为纯文本

<div id="app">
    <p>苹果的价格为{{ msg }}元</p>
</div>

v-html

解释：更新元素的 innerHTML，将数据解析成 html 标签

<h1 v-html="msg"></h1>

v-bind

作用：绑定属性语法：v-bind:title="msg" 简写：:title="msg"

v-on

作用：绑定事件语法：v-on:click="say" or v-on:click="say('参数', $event)" 简写：@click="say" 说明：绑定的事件从 methods 中获取

使用逗号分割绑定多个事件

<div v-on="click:onClick, keyup:onKeyup, keydown:onKeydown"></div>

事件修饰符

.stop 阻止冒泡，调用 event.stopPropagation() // 比如说一个 div 下有一个弹窗和一个表单 点击提交按钮点击了<input type="submit" />提交表单信息 点击弹出层周边空白区域，关闭弹窗 ，当表单显示在弹窗层上方时，为防止弹窗被意外关闭，需要阻止表单提交按钮冒泡行为
.prevent 阻止默认事件，调用 event.preventDefault() // 比如说点击了链接标签 a,在跳转之前，要修改一些 URL 参数
.capture 添加事件侦听器时使用事件捕获模式 // 捕获阶段先于冒泡，如果在尽量顶层处理事件，然后阻止传播，可以略微节约性能开销。scroll/resize 这类可能连续触发的事件不冒泡的原因
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次

按键修饰符

<input v-on:keyup.13="submit"> 
<!--记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：-->
 <input v-on:keyup.enter="submit">
 <input @keyup.enter="submit">

//按键别名包括：.enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right.ctrl .shift .meta（windows 键，mac-command 键，)

.native 在父组件中给子组件绑定一个原生的事件，不加'. native'事件是无法触发的

<div id="app">
  <my-component @click.native="clickFun"></my-component>
</div>

Vue.component('my-component', {
  template: `<a href='#'>click me</a>`
});
new Vue({
  el: '#app',
  methods: {
    clickFun: function() {
      console.log('message: success');
    }
  }
});

v-model

作用：在表单元素上创建双向数据绑定说明：监听用户的输入事件以更新数据

<input v-model="message" placeholder="edit me" />

<input type="radio" v-model="radioVal" value="单选按钮" placeholder="edit me" />

<!-- checkboxArr的值必须为数组 -->
<input
  type="checkbox"
  v-model="checkboxArr"
  value="复选按钮"
  placeholder="edit me"
/>

v-for

作用：基于源数据多次渲染元素或模板块

<div v-for="item in items">
  {{ item.text }}
</div>

<!-- 遍历数组 item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!--遍历对象 item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<!-- 遍历常量 item为从1开始的递增值 -->
<p v-for="item in 10">{{item}}</p>

v-for 的 key 属性

推荐：使用 v-for 的时候提供 key 属性，以获得性能提升。说明：使用 v-for 更新已渲染的元素列表时,默认用就地复用策略;列表数据修改的时候,它会根据 key 值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素; 我们在使用的使用经常会使用 index(即数组的下标)来作为 key,但其实这是不推荐的一种使用方法;

const list = [
    {
        id: 1,
        name: 'test1',
    },
    {
        id: 4,
        name: '我是插队的那条数据',
    }
    {
        id: 2,
        name: 'test2',
    },
    {
        id: 3,
        name: 'test3',
    },
]


之前的数据                         之后的数据

key: 0  index: 0 name: test1     key: 0  index: 0 name: test1
key: 1  index: 1 name: test2     key: 1  index: 1 name: 我是插队的那条数据
key: 2  index: 2 name: test3     key: 2  index: 2 name: test2
                                 key: 3  index: 3 name: test3

v-if 和 v-show v-if：根据表达式的值的真假条件，销毁或重建元素 v-if适合条件不大可能改变的场景 v-show：根据表达式之真假值，切换元素的 display CSS 属性，dom元素一直在 v-show适合频繁切换

v-bind 动态绑定class style 说明：这两个都是HTML元素的属性，使用v-bind，只需要通过表达式计算出字符串结果即可表达式的类型：字符串、数组、对象语法：

<!-- 1 对象书写方式-->
<div v-bind:class="{ active: true }"></div> ===>
<div class="active"></div>

<!-- 2 数组书写方式-->
<div :class="['active', 'text-danger']"></div> ===>
<div class="active text-danger"></div>

<!-- 3 数组对象结合-->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>
<div class="active text-danger"></div>


<!-- style -->
<!-- 1 对象书写方式 -->
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<!-- 2 数组书写方式-->
<div v-bind:style="[baseStyles, overridingStyles]"></div>

v-cloak 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。防止刷新页面，网速慢的情况下出现等数据格式

vue-cli3 使用 →