- 1.1 对于Vue是一套渐进式框架的理解

[主张最少，Vue可以根据开发者的实际需求来不断渐进，而不是一口气全部用上]
[搭积木，我们可以根据需求，利用社区良好的生态，借助已有的工具和库搭建我们的项目，用最小、最快的成本一步步搭建。]
先看到核心的部分（最小集），或者说是 Vue 这个名字的“初衷”： View，然后在此基础上进行开发者自身的 DIY 扩展，也就是按需采用。这个过程是随着开发者的需求逐步变化增长的，由简单到复杂的应用场景都可以涵盖到

- 1.2 vue几种常用的指令

• 1.插入文本: v-text
  相当于元素的innerText属性，必须是双标签
• 2.插入HMTL: v-html
  相当于元素的innerHTML属性
• 3.循环: v-for
  如果names是数组，还有index属性，如v-for="（item,index） in names" ;
  如果names是对象，还有value,key属性，如v-for="（value,key,index） in names";
• 4.双向绑定:v-model
  一般用在表达输入，很轻松的实现表单控件和数据的双向绑定。只能给具备value属性的元素进行双向数据绑定。
• 5,6,7.条件渲染：v-show,v-if ，v-else
  区别：
  v-if 是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
  v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
  v-show 就简单得多，是否隐藏元素——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
  v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。
  v-if直接从代码中删除了，v-show只是通过display来切换状态
• 8.属性绑定:v-bind
  这个指令用于响应地更新 HTML 特性，比如绑定某个class元素或元素的style样式。
  v-bind:属性名="常量 || 变量名"，简写形式——:属性名="常量 || 变量名"

<div v-bind:属性名="变量"></div>
//可以简写成
<div :属性名="变量"></div>
//如果要赋值常量，需要给常量用单引号包起来，如
<div :属性名=" '常量' "></div>
//这样的方式然后绑定动态属性比较常见的有a标签的href,img标签的src。

• 9.绑定事件:v-on
  用于监听指定元素的DOM事件，比如点击事件。
  v-on:click = "方法名 || 直接改变 vue 内部变量"，简写形式——@click = "方法名 || 直接改变 vue 内部变量"
• 10.v-once
  只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能，也可以加给点击事件，默认只能点击一次

- 1.3 vue常用的修饰符

• v-model的修饰符

  v-model 是用于在表单表单元素上创建双向数据绑定的指令。在 <input> 和 <textarea> 上，默认通过监听元素的 input 事件来更新绑定的属性值。

.lazy 延迟了同步更新属性值的时机

var vm =new Vue({
el:"#app",
data: { input_lazy:"" }
});
//在页面中的 input 的元素上添加指令
<div class="row">
<h2>v-model.lazy</h2>
<input type="text" v-model.lazy = "input_lazy"/>
</div>

图片1

当在文本框输入内容，并且光标焦点没有离开文本框时，属性值没有实时发生变化

图片2

而当焦点离开文本框时，属性值发生了变化并与文本框内容保持一致。
从这个例子可以看出 .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上。

   .number 该修饰符用来将输入内容自动转换成数值。

var vm =new Vue({
el:"#app",
data: {input_number:""}
});
<div class="row">
<h2>v-model.number</h2>
<input type="text" v-model.number= "input_number"/>
</div>

图片1

当开始输入数字时，属性值将实时更新成Number类型的数值。数字后输入其他非数字的字符，属性值将不再变化。

图片2

而当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值，所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串。

   .trim 该修饰符用来自动过滤字符串前后的空字符。

<div class="row">
<h2>v-model.trim</h2>
<input type="text" v-model.trim= "input_trim"/>
</div>
//Vue会自动过滤掉前后的多个空格，最终属性值是前后没有空字符的字符串。

• v-on的修饰符

   绑定的事件修饰符可以改变事件的触发方式。
   .stop   该修饰符将阻止事件向上冒泡。 同理于调用 event.stopPropagation() 方法

var vm =new Vue({el:"#app",
methods: {
div_click:function() {
console.log("div click...");
},
stop_click: function() {
console.log("stop_click...");
}
}
});
//将上面两个方法绑定到一组具有父子关系的元素上
div class="row">
<h2>v-on.stop</h2>
<div @click="div_click">
<button type="button" @click.stop="stop_click">StopPropagation</button>
</div>
<hr/>
</div>

图片描述

按照事件冒泡原理，点击按钮时，从当前触发的元素开始，沿着它的父元素一直到根元素，都会依次触发 click 事件。但是应用了 .stop 修饰符后，将只会触发当前元素的 click 事件，并阻止事件向上冒泡。

   .prevent   该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

var vm =new Vue({el:"#app",
methods: {
form_submit:function() {
console.log("form submit...");
}
});
//
<div class="row">
<h2>v-on.prevent</h2>
<form @submit.prevent="form_submit">
<button type="submit">submit</button>
</form >
<hr/>
</div>

     当点击提交按钮时，会触发绑定的事件，并且阻止表单提交并刷新当前页面的默认行为。

   .self   该指令只当事件是从事件绑定的元素本身触发时才触发回调

<div class="row">
  <h2>v-on.self</h2>
  <div @click.self="div_click" style="display:inline-block; width: px; background-color:red;">
    <button type="button" @click="stop_click">Button</button>
  </div>
  <hr />
</div> 

图片描述

因为父元素比它的子元素要长，所以右侧会有一部分红色的父元素显示出来。分别点击按钮和红色区域，查看控制台打印结果

图片描述

因为 div_click 事件被修饰符绑定，只有在直接点击到父元素 div ，即红色区域内，事件才会被触发。
即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。

.once    该修饰符表示绑定的事件只会被触发一次

<div class="row">
  <h2>v-on.once</h2>
  <button type="button" @click.once="once_click">Button</button>
  <hr />
</div>

打开页面，多次点击按钮。只有在第一次点击时，事件才会触发。

• 键值修饰符 该修饰符可以用来监听键盘事件

var vm = new Vue({
  el: "#app",
  methods: {
    enter_click: function () {
      console.log("enter click...");
    }
  }
});
<div class="row">
  <h2>键值修饰符</h2>
  <input type="text" @keyup.="enter_click" />
  <hr />
</div>

通过 keyup.keyCode 的方式来监听键盘特定按键的事件。也可以通过按键名称来监听

<input type="text" @keyup.enter="enter_click"/>

也可以自定义按键名称

// 自定义按键名称
Vue.config.keyCodes.ent = 13;
 
// 页面引用
<input type="text" @keyup.ent="enter_click"/>

二、使用element组件库的el-input标签，绑定delete键

 <el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>

为什么这次绑定事件多一个.native修饰符，这个可能是因为element-ui封装了个div在input标签外面，把原来的事件隐藏了，所以如果不加.native的话，按键不会生效

三、上面两种实现效果是当input标签获取到焦点的时候，才能监听到键盘，下面这种是全局监听enter键，是把监听事件绑定到document上（登录页面常用）

created: function() {
        var _this = this;
        document.onkeydown = function(e) {
            let key = window.event.keyCode;
            if (key == 13) {
                _this.submit();
            }
        };
    },
 methods: {
        submit: function() {
            alert("监听到enter键");
        },
   }

Vue监听键盘，直接用@绑定就可以，而且Vue为几个常用的按键提供了别名，不用去查询按键的keyCode
<input @keyup.enter="function">

delete delete（删除）/BackSpace（退格）
.tab Tab
.enter Enter（回车）
.esc Esc（退出）
.space Space（空格键）
.left Left（左箭头）
.up Up（上箭头）
.right Right（右箭头）
.down Down（下箭头）
.ctrl Ctrl
.alt Alt
.shift Shift
.meta (window系统下是window键，mac下是command键)

组合写法 按键组合
@keyup.alt.67=”function” Alt + C
@click.ctrl=”function” Ctrl + Click

部分引用 https: //www. jianshu.com /p/ 60135bb32ebb

1.4 vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。

在vue的开发中，我们需要引用子组件，包括ui组件（element、iview）。但是在父组件中添加scoped之后，在父组件中书写子组件的样式是无效果的。去掉scoped之后，样式可以覆盖。但这样会污染全局样式，为了解决这个问题，vue-loader新增书写方式。

图片描述

图片描述

图片描述

这样的写法及修改了子组件的样式，又不会污染全局样式！

官网文档：Scoped CSS · vue-loader

Tips:此方式从 vue-loader 11.2.0 开始支持