V2AS问路
Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
阅读原文时间：2021年05月31日阅读：1

方式1:直接CDN引入(学习时使用)

　　


　　

****方式2:下载引入: https://cn.vuejs.org/v2/guide/installation.html****

方式3:NPM按装(通过webpack和CLI使用)

说明: 基础学习用前两总方式使用,进阶时用方式3.

**学习视频:https://www.bilibili.com/video/BV15741177Eh**

===基本知识学习 ==========================

ES6相关的:

2.export导出,import导入.

3.箭头函数



Title



4.箭头函数的this是向外层作用域中，一层层查找this，直到this的定义。

(一) 声明式渲染

Document

{{msg}}

(二.1) 模版语法:插值操作****

1.mustache语法: {{ }}, 可以写变量,也可以写表达式 {{ a+b }}

2.v-once: 只渲染元素和组件一次,不需要表达式.

姓名: {{msg}}

3.v-html: 填充HTML片段,内容按普通 HTML 插入渲染,不安全,本网站内部的数据可以使用,不用垮域的数据.

4.v-text: 直接用 v-text 就不会有闪动问题,填充纯文体.

{{msg}}

5.v-pre:显示原始的信息,跳过编译过程,填充原始信息,不需要表达式.

{{ 显示原始的信息 }}

6.v-cloak:属性选择器,解决插值表达式闪动的问题",在样式中提供指令,这个指令保持在元素上直到关联实例结束编译,一般不用

(二.2) 模版语法:绑定属性

1.v-bind: 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式,给标签属性赋值。

属性绑字语法:
百度
百度
样式绑字对象语法:常用


样式绑定数组语法:不常用,写死的










(二.3) 模版语法:计算属性

1.computed: 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算.

var vm = new Vue({
data: { a: 1 },
computed: {
// 仅读取
aDouble: function () {
return this.a * 2
},
// 读取和设置
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4

(二.4) 模版语法:事件监听

1.v-on: 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。










@keyup.enter="onEnter">


@keyup.13="onEnter">




(二.5) 模版语法:条件判断

1.v-if/v-else-if/v-else:根据表达式的值的 truthiness 来有条件地渲染元素.

A
B
C
Not A/B/C

2.v-show: 根据表达式之真假值，切换元素的 display CSS property.v-if元素的删除增加,v-show是元素一直都在.只是改变样式,操作频率高时用v-show,一次性切换用v-if,v-if一般用得多.

(二.6) 模版语法:循环遍历

1.v-for: 基于源数据多次渲染元素或模板块,另外也可以为数组索引指定别名 (或者用于对象的键).

为当前遍历的元素提供别名：

{{ item.text }}


另外也可以为数组索引指定别名 (或者用于对象的键)：

2.v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

{{ item.text }}

3.总结整理响应式数组方法

  • 数组最前面添加元素: 数组名.push('a','b','…') 可以传多个值
  • 数组最前后添加元素: 数组名.unshift('a','b','…') 可以传多个值
  • 删除数组最前面元素: 数组名.shift()
  • 删除数组最后面元素: 数组名.pop()
  • 删除/插入/替换元素: 数组名.splice(参数1(从哪个元素开始),参数2(删除几个元素))
  • 数组名.splice(参数1(从哪个元素开始),参数2(删除几个元素),参数3(将替换的元素明细放到删除元素的位置))
  • 数组名.splice(参数1(从哪个元素开始),参数2(0),参数3(插入的元素明细) )
  • 排序数组中元素: 数组名.sort()
  • 反转数组中元素: 数组名.pop()
  • 通过索引修改数据中的元素,不会响应式显示.
  • Vue中的set方法: Vue.set(this.数组名,数组索引值,修改后的值).

(二.7) 模版语法:过滤器

1. 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：


{{ message | capitalize }}


你可以在一个组件的选项中定义本地的过滤器：

filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

2.ES6中取小数位数方法: num.toFixed(2),数组计算的几个高阶函数:filter/map/reduce

(二.8) 模版语法:双向绑定

1.v-model: 随表单控件类型不同而不同,在表单控件或者组件上创建双向绑定

2.v-model修饰符

预期：随表单控件类型不同而不同。

限制：