vue.js的些许笔记

1.框架和库的区别：

---

框架

框架（framework）：有着自己的语法特点，都有对应的各个模块，倾向于提供整套的解决方案；

库

库（library）：专注于一类效果或功能，功能就是提供函数的封装；

区别

库一般是实现一定功能的类库，你可以直接调用来实现一定的功能。
而框架就大的多，包含了很多库，它是一个完整的产品框架，基本上开发一个产品需要的都提供了，你只需要简单的配置你的需求就可以发布一个产品了。
框架和库的最大区别在于“控制反转”，当你使用一个库，你会调用库中的代码，而当你使用一个框架，框架会调用你的代码。

框架的好处

1.提高代码的质量，开发效率；
2.提高代码的复用率；
3.降低模块之间的耦合度；（高内聚低耦合）

常见英文缩写

UI：user interface；用户界面
GUI：graphical user interface；图形化界面
CLI：command line interface；命令行界面
API：application interface；应用程序编程接口

2.vue.js的设计模式

概述

Vue.js在设计采用mvvm模式进行设计；

MVVM模式

m为Model表示数据模型层，v为View表示视图层，vm为ViewModel表示视图模型控制层。
是由MVC变种模式衍生出MVVM模式。（了解这两种模式的区别）

举例说明MVVM:
如果我们有一个数组要渲染到网页中去，那么在其中：
数据层M即为数组，视图层v就是用看到的渲染后的网页，视图模型层vm就是我们的js控制层，控制网页v和数据m同步。
（即数组数据改变了就重新渲染网页，网页变了就修改数组数据，如果我们要使用mvvm模式的框架，那么我们只需要关注m层与v层。
vm层是框架内置写好了的，控制视图层和模型数据层的同步代码不需要我们来写。）

思维模式的转换

从对DOM进行操作来达到所要求的页面效果   
转换为↓↓↓
以数据的变化为驱动从而达到页面效果和视图的更新要求。
（vue这样的框架，他已经帮我们把数据和视图双向绑定了（mv），我们改变了数据，网页会自动的改变，而不需要我们操作DOM节点。）   

3.Vue.js概述

1.什么是Vue.js?

 Vue.js是一套构建用户界面的 渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。
另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

2.Vue.js的特性：

a.轻量级的框架；
b.双向数据绑定；
c.指令；
d.插件化；

3.Vue.js的优点：

a.方便阅读的中文文档；
b.容易上手（学习曲线比较缓和）；
c.体积小；
d.基于组件化的开发方式；
e.代码的可读性、可维护性得到了提高；

4.搭建Vue.js环境：

a.官网直接下载Vue的独立版本并用 <script> 标签引入，Vue 会被注册为一个全局变量。
b.使用引用CDN的方法；
c.使用npm：在确保安装了node.js后，输入npm install vue 回车即可

4.Vue.js基础知识

1.关于Vue对象：

a.通过new Vue(options) 来创建一个Vue对象的实例；
b.关于options对象：
 - el：挂载元素，即vue的作用区域；
 - template：模板（html模板，必须并只能有一个根节点）
 - data: 函数，用return返回一个对象，通常把数据相关的变量定义在这里；
 - components：存放组件，key是组件名，value是组件对象；
 - methods：用来存放定义好的方法；
 - computed：计算属性；
 - props：属性声明；（父到子通信）
 - watch：监听属性；
 - 生命周期钩子函数；

2.插值表达式

使用双大括号Mustache语法。
双大括号中的这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

    语法：
    <any>{{表达式}}</any>
    //表达式通常为：对象、字符串、判断后的布尔值、三目表达式，语句和流控制是不支持的（除了三目运算）。
    作用：
    将表达式执行的结果，输出当调用元素的innerHTML中；还可以将数据绑定到视图。

3.常用指令

⑴ v-for循环指令：

   基本语法1（集合为数组时）：
   <any v-for="tmp in array"></any>
   基本语法2（集合为obj时）：
   <any v-for="(value,key,index) in obj"></any>
   
   作用：
   在遍历in 后面的这个集合时，将临时变量保存在（）中，并创建多个any标签。

⑵ v-if选择指令：

  语法：
    <any v-if="表达式"></any>
    <any v-else-if="表达式"></any>
    <any v-else="表达式"></any>
    
  作用：
    根据表达式执行结果的真假，来决定是否要将当前的这个元素挂载到DOM树，是否插入。
  注意：v-else-if，v-else和v-if必须是相邻的元素；

⑶ v-on事件绑定指令：

	语法：v-on:事件名=“表达式 ||函数名 ”
    <any v-on:eventName="handleEvent"></any>
    补充，支持简写：
    <any  @eventName="handleEvent"></any>
    作用：
        处理自定义原生事件，给指定的元素 将handleEvent的方法绑定给指定eventName事件。

⑷ v-bind属性绑定指令：

基本语法：
    <any v-bind:myProp="表达式"></any>
    补充，支持简写：
    <any :myProp="表达式"></any>
  作用：
    将表达式执行的结果 绑定 到当前元素的myProp属性。

    <img v-bind:src="'img/'+myImg" alt="">
   动态样式绑定(常用)
    <p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

   动态样式类绑定(常用)
      <h1 :class="{myRed:false}">动态样式类的绑定</h1>
    
    动态样式类绑定的三种方法：
      1、对象型  '{red:isred}' ；
      2、三目型   'isred?"red":"blue"' ；
      3、数组型  '[{red:"isred"},{blue:"isblue"}]' ；

⑸ v-model双向数据绑定：

  	方向1：数据绑定到视图
    方向2：将视图中（表单元素）用户操作的结果绑定到数据

    基本语法:（通常用于表单元素）
      <表单元素 v-model="变量">
      </表单元素>

⑹ v-show和v-if控制元素是否出现的指令：

语法：（flag为true出现，flag为false消失）
<h3 v-if="flag">这是用v-if控制的元素</h3>
<h3 v-show="flag">这是用v-show控制的元素</h3>

「v-if」的特点：每次都会重新删除或创建元素;
「v-show」的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的display:none样式;

区别()：
一般来说，「v-if」有更高的切换消耗，而「v-show」有更高的初始渲染消耗。
因此，如果需要频繁切换「v-show」较好，如果在运行时条件不大可能改变「v-if」较好。

⑺ v-text文本插入指令：

用法：
<h4 v-text="msg"></h4>

v-text和插值表达式的相同与区别：
v-text和插值表达式类似，但没有闪烁问题

v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空。
<!-- 输出时，插值表达式前后的字符会保留 -->
<p v-cloak>++++{{msg }}----</p>
<!-- 输出时，msg会替换掉其他符号 -->
<h4 v-text="msg">-------</h4>

⑻ v-html和v-text指令：

Vue文本渲染的三种方法： {{}}、v-html、v-text。

{{ }} =>将元素当成纯文本输出
v-html =>会将元素当成HTML标签解析后输出；（转义）等于元素的innerHTML属性；
v-text =>会将元素当成纯文本输出；（不转义）等于元素的innertext属性；

如果需要将msg以html的形式输出，需要使用v-html，v-html也会覆盖掉元素中原本的内容。
例如：msg: '<h3>这是一个h3标签</h3>'

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

⑼ v-cloak指令：

作用：
是用来保持在元素上直到关联实例结束时进行编译。
v-cloak可解决插值表达式的闪烁问题。

使用方法：
step1.给插值表达式的元素加上v-cloak
	<p v-cloak>{{ msg }}</p>

step2.为v-cloak定义样式:(v-cloak为一个属性)
	[v-cloak] {
	    display: none;
	} 

⑽ v-once指令：

作用：
定义它的元素或组件只会渲染一次，包括元素或者组件的所有字节点。
首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，那么该块都将被视为静态内容。

用法举例：
当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的。
<div id="app">
		<p v-once>{{msg}}</p>  //msg不会改变
		<p>{{msg}}</p> //msg会动态更新
		<p>
			<input type="text" v-model = "msg" name="">
		</p>
	</div>
	<script type="text/javascript">
		let vm = new Vue({
			el : '#app',
			data : {
				msg : "hello"
			}
		});
	</script>

⑾ v-pre指令：

作用：
跳过这个元素和它的子元素的编译过程。
可以用来显示原始标签。跳过大量没有指令的节点会加快编译。

用法：
<div id="app">
   <span v-pre>{{msg}} </span> //这句不会被编译，输出内容为{{msg}}
 </div>
 <script>
   var app =new Vue({
     el:'#app',
     msg:'this is a message'
   });
 </script>

4.事件修饰符

• .stop 阻止冒泡；
• .prevent 阻止默认事件；
• .capture 添加事件侦听器时使用事件捕获模式；
• .self 只有当事件在该元素本身（比如不是子元素）触发时回调，只会阻止自己身上冒泡行为的触发，并不会真正的阻止冒泡的行为；
• .once 事件只触发一次； 注：passive和prevent冲突，不能同时绑定在一个监听器上。
• .passive不拦截标签的默认事件；
  （通俗点说就是每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。
  加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
  所以这个 .passive 修饰符尤其能够提升移动端的性能）

==注：==事件修饰符可以串联使用

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

.pasive 举例：

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

汇总举例：

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="lib/vue-2.4.0.js"></script>
 <style>
   .inner {
     height: 150px;
     background-color: darkcyan;
   }
 </style>
</head>

<body>
 <div id="app">
   <div class="inner" @click="div1Handler">
     <!-- 使用.stop阻止冒泡 -->
     <input type="button" value="按钮" @click.stop="btnHandler">
   </div>
   <!-- 使用.prevent阻止默认行为 -->
   <a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
   <!-- 使用.capture实现捕获触发的机制，点击按钮，先输出div的点击事件，在输出btn的事件 -->
   <div class="inner" @click.capture="div1Handler">
     <input type="button" value="按钮" @click="btnHandler">
   </div>
   <hr>
   <!-- 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数 -->
   <div class="inner" @click.self="div1Handler">
     <input type="button" value="按钮" @click="btnHandler">
   </div>

   <!-- 使用.once 只触发一次，第一次阻止默认行为，以后不再阻止 -->
   <a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>
 </div>

 <script>
   var vm = new Vue({
     el: '#app',
     data: {
     },
     methods: {
       btnHandler() {
         console.log('btn点击事件')
       },
       div1Handler() {
         console.log('div1点击事件')
       },
       linkClick() {
         console.log('a链接的点击事件')
       }
     }
   })
 </script>
</body>

</html>

5.按键修饰符

• 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
你可以直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符。

<input v-on:keyup.page-down="onPageDown">
在上述示例中，处理函数只会在 $event.key 等于 PageDown 时被调用。

- 按键码

keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。
使用 keyCode attribute 也是允许的：

<input v-on:keyup.13="submit">  //回车触发此事件

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

- 系统修饰键

2.1.0 新增

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

• .ctrl
• .alt
• .shift
• .meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

例如：

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。
换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。
如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

- .exact 修饰符

2.5.0 新增

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

- 鼠标按钮修饰符

2.2.0 新增
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。