Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

时间:2022-05-22 14:48:31

一  使用环境: windows 7 64位操作系统

二  IDE:VSCode/PyCharm

三  Vue.js官网: https://cn.vuejs.org/

四  下载安装引用

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

  <!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习

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

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

 五 开始学习

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

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

ES6相关的:

1.let(变量)/const(常量),在ES6开发当中优先使用常量const,只有需要改变某一标识符时才用let,常量const是指向的对象不能修改,但是const内部的属性可以改变.

2.export导出,import导入.

3.箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
</div>
<script>
// 箭头函数
const ccc = (参数列表) => {
}
// 2个参数求和,两种写法
// 写法1
const sum = (num1, num2) => {
return num1 + num2
}
// 写法2
const sum1 = (num1, num2) => num1 + num2 // 1个参数取平方,不用加括号
const powe = num => {
return mum * num
}
</script>
</body>
</html>

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

(一) 声明式渲染

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CDN引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head> <body>
<div id="app">
<!-- 显示数据 -->
{{msg}}
</div>
<script>
// ES6语法:let(变量)/const(常量)
const app = new Vue({
el: '#app', //挂载管理元素
data: { //定义数据
msg: '长安镖局!'
}
})
</script>
</body>

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

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

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

<span v-once>姓名: {{msg}}</span>

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

<div v-html="HTML片段"></div>

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

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

<!-- 和下面的一样 -->

<span>{{msg}}</span>

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

<span v-pre>{{ 显示原始的信息 }}</span>

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

<style>
[v-cloak] {
display: none;
}
</style>

<style>
<div v-cloak>{{ message }} </div>
</style>

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

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

属性绑字语法:
<a v-bind:href="url">百度</a>
<a :href="url">百度</a>
样式绑字对象语法:常用
<div v-bind:class={函数名}"></div>
样式绑定数组语法:不常用,写死的
<div v-bind:class="['数据样式1','数据样式2']"></div>
<div-bind:class="[变量1,变量2]"></div>
Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
<!-- 绑定一个 attribute -->
<img v-bind:src="data:imageSrc"> <!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button> <!-- 缩写 -->
<img :src="data:imageSrc"> <!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button> <!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName"> <!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component> <!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

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

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

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
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: 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
<!-- 方法处理器 -->
<button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button> <!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 -->
<button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button> <!-- 停止冒泡 -->
<button @click.stop="doThis"></button> <!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button> <!-- 阻止默认行为,没有表达式 -->
<form @submit.prevent></form> <!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button> <!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter"> <!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></butto

 2.v-on修饰符

  • .stop - 调用 event.stopPropagation()
  • .prevent - 调用 event.preventDefault()
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - (2.2.0) 只当点击鼠标左键时触发。
  • .right - (2.2.0) 只当点击鼠标右键时触发。
  • .middle - (2.2.0) 只当点击鼠标中键时触发。
  • .passive - (2.3.0) 以 { passive: true } 模式添加侦听器

3. v-on事件函数的调用传参方法:

<!--直接绑定函数名handle参数,$event默认传递-->
<button @click='handle1'>点击1</button>
<!--调用函数名handle()传参,$event只能在最后,固定写法-->
<button @click='handle2(123,456,$event)'>点击4</button>

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

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

Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>

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

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

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

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

<div v-for="item in items">
{{ item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键): <div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, name, index) in object"></div>>

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

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

 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 }} <!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器: 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修饰符

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

限制:

<input>
<select>
<textarea>
components
修饰符: .lazy - 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤
用法: 在表单控件或者组件上创建双向绑定。细节请看下面的教程链接

Vue学习笔记-Vue.js-2.X 学习(二)