Vue新手学习笔记：基础知识点整理及示例
作为一个刚毕业的应届生，实话我自学能力不好，因此我选择写文章将我的学习过程，感悟记录下来，慢慢改进提高自学能力。
学习Vue的一些基本语法
MVC和MVVM的关系图解：
官方手册：
https://cn.vuejs.org/v2/guide/
不管学什么，起码要知道自学将要学习的东西是什么，以及一些基本的语法。
在vue的官网上学习语法，同时可以在官方提供的平台上做简单的代码编写，验证。
之前直接去看脚手架视频跟着做，结果一头蒙，又倒回来看基础视频了。。。
顺手贴下手敲的代码链接：
https://github.com/836369078/vue-base/tree/master
html部分
- {{ xxx }} 插值表达式：存在闪烁问题，但不会覆盖元素中原本的内容
- v-cloak：解决插值表达式闪烁的问题
- v-text：没有闪烁问题且覆盖元素中原本的内容，内容当作字符串显示
- v-html：没有闪烁问题且覆盖元素中原本的内容，内容当作html显示
- v-bind：Vue提供的属性绑定机制 缩写是 :
- v-on： Vue提供的事件绑定机制 缩写是 @
-
v-model：可以实现表单元素和 Model 中数据的双向绑定，只能运用再表单元素中
js部分
- new Vue({ })：创建一个Vue实例
- el : ' ' ：绑定Vue的使用范围DOM
- data : { } ：展示的数据
- methods : { } ：调用的方法
- this：如果想要获取 data 上的数据，或者 想要调用 methods 中的 方法，必须通过 this.数据属性名 或 this.方法名来进行访问，这里的this，就表示 我们 new 出来的 VM 实例对象
-
filters : { }：定义私有过滤器
事件修饰符：
-
.stop：阻止冒泡
-
.prevent：阻止默认行为
-
.capture：给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发
-
.self：实现只有点击当前元素时候，才会触发事件处理函数
-
.once：只触发一次事件处理函数
按键修饰符：
//自定义按键符
把码值为 113 赋给F2键
Vue.config.keyCodes.f2 = 113;//F2 键抬起时调用add方法
还有些Vue内置的比如：
PS：必须焦点在对应的 div 上按键修饰符才会触发
js 里面的键盘事件对应的键码
在Vue中使用class，style样式：
-
直接传递一个数组，这里的class需要使用v-bind做数据绑定：:class="['thin','italic']
-
在数组中使用三元表达式：:class="['thin', 'italic', flag?'active':'']
-
在数组中使用对象代替三元表达式，提高代码可读性：:class="['thin', 'italic', {'active':flag}]
-
在为class使用v-bind绑定对象的属性是类名，属性的值是个标识符：:class="{red:true, thin:true, italic:false, active:false}"
-
在style中上面的方式同样可以使用，在style中同时使用多个对象的属性，如下最后一个例子
Document
这是个很大很大的H1
这是个很大很大的H1
这是个很大很大的H1
这是个很大很大的H1
这是个很大很大的H1
Vue指令值v-for：
- 迭代数组：
{{ i }}----{{ item }}
- 迭代对象数组，i 为索引：
{{ i }}----{{ item.id }}----{{ item.name }}
- 循环对象属性，将属性打印，i 为索引：
{{ key }}----{{ value }}----{{ i }}
- 迭代数字，注意：如果使用v-for迭代数字的话，count从 1 开始：
这是第 {{ count }} 次循环
v-if：每次都会重新删除活创建元素，有较高的切换性能消耗
v-show：每次不会重新进行DOM的删除和创建操作，只会切换元素的 display:none样式，有较高的初始渲染消耗
Vue中一些方法：
-
this.list.some((item, i)=>{ })：循环数组，当 return true 时，循环被终止，item为循环的项，i 为索引
-
this.list.forEach((item, i)=> { }）：循环数组，无法通过 return 来终止，item为循环的项，i 为索引
-
this.list.filter((item, i)=> { }）：循环数组，return 不终止循环，而是将 return 回来的值组成一个数组，item为循环的项，i 为索引
-
this.list.splice(i, j)：移除数组中的元素，从数组中索引为 i 的开始，移除 j 个
-
item.indexOf(name) == -1：值为 name 再 item 中第一次出现的索引，如果没找到则返回 -1 ，常用于判断字符串包含关系
-
item.includes(name) == true：判断 item 中是否包含 name ，包含返回 true，不包含返回 false
-
month.padStart(maxLength, str)：maxLength是指最长长度，str为字符串，指当前值如果长度没达到最长长度，则会在month 前面用 str 来补充，注意，month 只能为字符串，为数字之类的会报错，可以用 toString() 方法转为字符串
-
month.padEnd(maxLength, str)：maxLength是指最长长度，str为字符串，指当前值如果长度没达到最长长度，则会在month 后面用 str 来补充，注意，month 只能为字符串，为数字之类的会报错，可以用 toString() 方法转为字符串
过滤器：
Vue允许自定义的过滤器，过滤器被分为公有过滤器和私有过滤器，可被用于一些常见文本的格式化，过滤器可以被用在两个地方：mastache 插值表达式（ {{ }} ）和 v-bind 表达式
在 filters 中定义的为私有过滤器，当私有过滤器与公共过滤器同时存在且名字相同时，有先调用私有过滤器
PS：过滤器的第一个参数永远是管道符（ | ）前面的值，且可以多个过滤器同时使用
function 方法的参数可以通过设置默认值，避免传值为空
使用 ` （Tab键上面的那个键）把值包起来，再通过${ }赋值，可以使代码看的更加清晰
过滤器要放在 var vm = new Vue({ })前面
Document
{{ msg | msgFilter('疯狂') | testFilter }}
{{ msg | msgFilter('疯狂~~~') }}
自定义指令：
公有定义：
HTML
JS
//使用 Vue.directive 定义全局指令 v-focus
//其中：参数1：指令 的名称，注意，在定义的时候，指令的名称前面不要加 v- 前缀
//但是：在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
//参数2：是一个对象，这个对象身上，有一些指令相关的函数，这些函数在特定的阶段，执行特定的函数
Vue.directive('focus', {
//每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
bind: function (el) {
//注意在每个函数中，第一个参数永远时el，表示被绑定了指令的那个函数，这个 el 参数时原生的 js 对象
//在元素刚绑定了指令的时候，还没有插入到 DOM 中去，这时候调用 focus 方法没有作用
//因为一个元素，只有插入 DOM 之后，才能获取焦点
// el.focus()
},
// inserted 表示元素插入到 DOM 中的时候会执行的函数，只执行一次
inserted: function (el) {
el.focus()
},
//当VNode更新的时候，会执行函数，可能会触发多次
updated: function (el) {
}
})
Vue.directive ('color', {
//样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定又了一个内联样式
//将来元素肯定会显示到页面中，这时候，浏览器渲染引擎必然会解析样式，应用给这个元素
//和样式相关的操作，一般都可以在 bind 中执行
bind: function(el, binding) {
el.style.color = binding.value
},
inserted: function (el) {
},
updated: function (el) {
}
})私有定义：
var vm2 = new Vue ({
el: '#app2',
data: {
// dt: new Date(),
},
directives: {
'fontweight': {
bind: function(el, binding) {
el.style.fontWeight = binding.value,
}
}
},
})如果说函数只打算在 bind 和 update 上，可以进行简写，简写后两个方法上都有函数
var vm2 = new Vue ({
el: '#app2',
data: {
// dt: new Date(),
},
directives: {
'fontweight' : function(el, binding) {
el.style.fontWeight = binding.value;
}
},
})binding 主要属性：
binding.name：返回参数名
binding.value：返回参数值，如果是算式，会计算，比如：1+1，返回值会为 2
binging.expression：返回参数值的字符串形式，比如：1+1，返回值为 1+1
Vue的生命周期函数：
测试用代码：
Document
{{ msg }}
重要：vue-resource 实现 get，post，Jsonp 请求：
除了 vue-resource 还有 `axios` 的第三方包实现数据请求
- 官方文档：https://github.com/pagekit/vue-resource
- 常见的数据请求类型？ get post jsonp
- 测试的URL请求资源地址：（万能测试地址）
get请求地址： http://jsonplaceholder.typicode.com/users
post请求地址：http://jsonplaceholder.typicode.com/users
jsonp请求地址（主要用于跨域请求）：http://jsonplaceholder.typicode.com/users
可以参考官方文档 HTTP Requests/Response 中的说明 - Vue.http.options.root：使用全局变量配置根路径
注意：如果用全局配置启用了根域名，则每次用 http 请求时， url 路径应该为相对路径，前面不能带 / ，如果带了则不会启用根路径拼接，两种方法可以在 getGetInfo() 方法中进行对比，官方文档的 Configuration 中有说明 - Vue.http.options.emulateJSON：使用全局变量配置请求发送格式
可以在 getPostInfo() 方法中进行对比
Document