Vue学习笔记一

最新推荐文章于 2024-10-13 14:25:33 发布

Super_LD

最新推荐文章于 2024-10-13 14:25:33 发布

阅读量581

点赞数

分类专栏： Web前端 Vue 文章标签： Vue

Web前端同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

Vue

12 篇文章 0 订阅

订阅专栏

Vue.js 是什么？

Vue.js 是一套构建用户界面的渐进式框架。采用的是自底向上增量开发的设计（与其他重量级框架不同点）。Vue的核心库只关注图层，不仅易于上手，还便于与第三方库或既有项目整合。

起步

# helloword

注意：不能将id = ‘app’写在body或者html中

<script src = './vue.js'><script>
<div id = 'app>
<p> {{ message }} </p>
</div>
<script>
var app = new Vue({
el: '#app',
message: 'helloword!!!'
})
<script>

现在的数据和DOM已经绑定在一起了,所有的元素都是响应式
文本插值:从控制台输入app.message = '新信息' ,可以修改DOM相应的更新
元素属性:通过v-bind绑定例如v-bind:title="哈哈哈"
条件循环
v-if (文本到数据) 提供了一个强大的过渡效果系统,可以在Vue插入/删除/更新时自动应用过渡系统
v-for (结构到数据)
处理用户输入
v-on 指令绑定一个事件监听器,通过它调用我们Vue实例中定义的方法
- v-on:click = "Add"
v-model 实现表单输入和应用状态之间的双向绑定
实例中的参数
el: 'id' //el就是 vue 程序的解析入口
data: { 数据 } //data就是ViewModel
methods: { 函数 } //函数中的this指向该应用中data的数据

computed: { 声明一个计算属性函数 }

例子

computed: {
// a computed getter
reversedMessage: function () {
  // `this` points to the vm instance
  return this.message.split('').reverse().join('')
}
}

filters: { 过滤器函数 }
组件化应用构建
在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例
Vue实例
构造器
每个 Vue.js应用都是通过构造函数Vue创建的一个Vue的根实例启动的
```
var vm = new Vue({
//选项
})
```
没有完全遵循MVVM模式
可以扩展Vue构造器,从而用预定义选项创建可复用的组件构造器
所有的 Vue.js 组件其实都是被扩展的 Vue 实例
属性和方法
每个Vue实例都会代理其data对象里所有的属性
除了data属性外，Vue实例还会暴露了一些有用的实例属性和方法，都带前缀$，以便与代理的data属性区分
不要在实例属性和回调函数中箭头函数，因为箭头函数绑定父上下文，this不会像预想的一样是Vue实例
实例生命周期
Vue.js 是否有“控制器”的概念？答案是，没有。
语法模板
在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态发生改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
也可以不用模板，直接写渲染（render）函数，使用可选的JSX语法
插值
# 文本
数据绑定最常见的形式就是使用“Mustache”（双大括号）的文本插值
使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
# 纯HTML
双大括号会将数据解析成纯文本，而非HTML。为了输出真正的HTML，需要使用v-html指令
注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
# 属性
Mustache不能在HTML属性中使用，应使用v-bind指令
对id，布尔值的属性有效
# 使用Javascript表达式
例子
- {{ number + 1 }}
- {{ ok ? 'YES' : 'NO' }}
- {{ message.split('').reverse().join('') }}
表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式。
```

{{ var a = 1 }}

{{ if (ok) { return message } }}
```
注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。
指令
是带有v-前缀的特殊属性
# 参数
一个指令能接受一个参数，在指令后面以冒号指明
# 修饰符
修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
```
<form v-on:submit.prevent="onSubmit"></form>
```
过滤器
Vue.js允许自定义过滤器，可被用作一些常见的文本格式化，用在两个地方：mustache插值和v-bind表达式
```

{{ message | capitalize }}

<div v-bind:id="rawId | formatId"></div>
```
过滤器函数
- 可以串联
- 可以接受参数
  # 缩写

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

v-bind

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

计算属性

# 基础例子

# 计算缓存 vs methods

计算属性:是基于它们依赖进行缓存的(因依赖改变而重新求值);Date.now()不是响应式依赖
methods:只要发生重新渲染, method调用总会调用执行该函数
# Computed属性 vs Watched 属性
Watched 属性: 观察和响应Vue实例上的数据变动
缺点:命令式和重复式。更多选择 computed 属性
# 计算 setter
计算属性默认只有getter，根据需求也可以提供一个setter
观察 Watchers
Class 与 Style 绑定
绑定 HTML Class
# 对象语法
v-bind:class={ 键：值 }；可以与普通的class属性共存
也可以绑定数据里的一个对象 v-bind:class=“classObject”
也可以绑定一个计算属性
# 数组语法

<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

# 用在组件上

绑定内联样式

# 对象语法

v-bind:style 的对象语法十分直观，看着非常像CSS，本质是一个 JavaScript 对象，属性名可以用驼峰式或者短横分隔命名
直接绑定到一个样式对象
# 数组语法
```
<div v-bind:style="[baseStyles, overridingStyles]">
```
# Vue会自动判断并添加前缀
当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform ，Vue.js 会自动侦测并添加相应的前缀。
条件渲染
v-if
#
v-if 是一个指令，只能添加到一个元素上，如果像切换到多个元素，需要
v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
# v-else-if 指令充当 v-if 的“else-if块”
类似于 v-else,，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后。
# 用 key 管理可复用的元素
高效渲染元素，对复用已有元素不受从头渲染。
还有别的好处，见官网
v-show
v-show 是简单地切换元素地 CSS 属性 display。
注意：不支持
v-if 是真正地条件渲染(条件块内的所有适当地被销毁和重建)；同时也是惰性地；更高地切换开销
v-show：不管初始条件是什么，元素始终会被渲染；更高地初始渲染开销
v-if 与 v-for 一起使用
v-for 具有比 v-if 更高地优先级
列表渲染
v-for
v-for 还支持一个可选的第二个参数为当前项的索引。
```
<li v-for="(item, index) in items">
```
可以用 of 替代 in。
Template v-for
对象迭代 v-for
- 通过一个对象地属性来迭代
- ```
<li v-for="value in object">
```
- 提供第二个的参数为键名
- 第三个参数为索引
- 注意：在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
整数迭代 v-for
```
 <span v-for="n in 10">{{ n }}</span>
```

组件和 v-for

+ <my-component v-for="item in items"></my-component>

key

重用和重新排序现有元素，每项提供一个唯一的 key 属性，需要用 v-bind 来绑定动态值。理想的 key 值是每项都有唯一的id。
```
<div v-for="item in items" :key="item.id">
  
</div>
```
建议尽可能使用 v-for 来提供 key。
key 并不特别与 v-for 关联，key 还有其他用途
数组检查更新
变异方法
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
重塑数组(非变异方法)
- filter()
- concat()
- slice()
- 不会改变原始数组，总是返回一个新数组
注意事项
- 不能检测变动的数组
  1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
  2. 当你修改数组的长度时，例如： vm.items.length = newLength
    显示过滤/排序结果
如果想要显示一个数组的顾虑或者排序的副本，而不是实际改变或重置原始数据。=>创建返回过滤或排序数组的计算属性
事件处理器
监听事件
v-on
```
v-on:click="counter += 1"
```
方法事件处理器
在处理比较复杂的逻辑，直接把 Javascript 代码写在 v-on 是不可行的，可以用 v-on 接受一个定义的方法来调用
```
v-on:click="greet"
```
内联处理器方法
```
v-on:click="say('hi')"
```
事件修饰符
.stop() 阻止单击事件冒泡
.prevent() 提交事件不再重载页面
.capture() 添加事件侦听器时使用事件捕获模式
.self() 事件只在该元素本身（而不是子元素）触发时触发回调
.once() 点击事件将只会触发一次
按键修饰符
监听常见的键值
Vue 为 v-on 在监听键盘事件时添加按键修饰符：
```
<input v-on:keyup.13="submit">
```
按键别名
```
<input v-on:keyup.enter="submit">
```
全部按键别名
- .enter
- .tab
- .delete (捕获“删除”和“退格”键)
- .esc
- .space
- .up
- .down
- .left
- .right
通过全局 config.keyCodes 对象自定义按键修饰符别名：
```
Vue.config.keyCode.f1 = 112
```
2.1.0新增
- .ctrl
- .alt
- .shift
- .meta
  为什么在 HTML 中监听事件？
这种事件监听的方式违背了关注点分离传统理念。不必担心，因为所有 Vue.js 事件处理方式和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。v-on 有几个好处：
- 扫一眼 HTML 模板可以轻松定位到 javascript 代码中对应的方法
- 因为你无法在Javascript中手动绑定事件，你的ViewModel可以式非常纯粹的逻辑，和DOM完全解耦，便于测试
- 当一个ViewModel被销毁，所有的时间处理器都会自动被删除，无需担心自己如何清理它们
  表单控件绑定
  基础用法
v-model 指令在表单控件元素上创建双向数据绑定。负责监听用户的输入事件以更新数据，并处理一些极端的例子。
注意：v-model 不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值。
# 文本
input type=“text”
# 多行文本
textarea
# 复选框
input type=checkbox id=“hello”
label for=“hello”
# 单选按钮
input type=“radio” id=“hello”
label for=“hello”
# 选择列表
select
option
绑定 value
v-bind：value=“a”
修饰符
# .lazy
转变为在 change 事件中同步
```
<input v-model.lazy="msg" >
```
# .number
将用户的输入值转为 Number 类型
```
<input v-model.number="age" type="number">
```
# .trim
自动过滤用户的首尾空格
```
<input v-model.trim="msg">
```
v-model 与组件
组件
什么是组件
组件是Vue.js最强大的功能之一。可以拓展 HTML 元素，可以封装可重用的代码。
在较高层面上，组件是自定义元素，Vue.js 编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性拓展
使用组件
# 注册

创建一个全局组件

Vue.component('my-component', {
  // 选项
})

确保初始化之前注册组件

# 局部注册

new Vue({
  // ...
  components: {
// <my-component> 将只在父模板可用
'my-component': Child
  }
})

# DOM 模板解析说明

限制性元素：

<u l> ，<o l>，<t a b l e> ，<s e l e c t> 限制了能被它包裹的元素， 而一些像 <o p t i o n> 这样的元素只能出现在某些其它元素内部。解决方案：使用特殊的 is 属性

<table>
  <tr is="my-row"></tr>
</table>

这些限制不适用：

+ <script type="text/x-template">
+ JavaScript内联模版字符串
+ .vue 组件

# data 必须是函数

多个组件共享同一个 data，增加一个 counter 会影响所有的组件。解决方案：每个组件返回一个全新的 data 对象：
```
data: function () {
  return {
counter: 0
  }
}
```
# 构成组件
父子组件：组件 A 在它的模板中使用了组件 B。它们的关系可以总结为 props down，events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。
Prop
# 使用 Prop 传递数据
组件实例的作用域是孤立的。
子组件使用父组件的数据，需要通过子组件的 props 选项
# camelCased(驼峰式) vs. kebab-case(短横线隔开式)命名
# 动态 Prop
# 字面量语法 vs 动态语法
```

<comp some-prop="1"></comp>
```
```

<comp v-bind:some-prop="1"></comp>
```
# 单向数据流
prop 是单向绑定的：父组件的属性发生变化时，将传导给子组件，不会反过来。--防止子组件无意修改额父组件的状态。
prop 作为初始值传入后，子组件想把它当作局部数据来用；解决方法：定义一个局部变量，并用 prop 的值初始化它
```
props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}
```
prop 作为初始值传入，由子组件处理成其它数据输出，解决方法：定义一个计算属性，处理 prop 的值并返回。
```
props: ['size'],
computed: {
  normalizedSize: function () {
return this.size.trim().toLowerCase()
  }
}
```
注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。
# Prop 验证
自定义事件
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
# 使用 v-on 绑定自定义事件
# 给组件绑定原生事件
v-on：click.native="doThing"
# 使用自定义事件的表单输入组件
# 非父子组件通信
在简单的场景夏，可以使用一个空的 Vue 实例作为中央事件总线：
在复杂的情况下，我们应该考虑使用专门的状态管理模式
使用 Slot 分发内容
为了让组件可以组合，我们需要一种方式来混合父组件的内容和子组件自己的模板，这个过程叫做内容分发，使用
# 编译作用域
# 单个 Slot
# 具名 Slot
# 作用域插槽（2.1.0新增）
动态组件
keep-alive
杂项
# 编写可复用组件
编写组件时，记住是否要复用组件有好处。一次性组件和其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue 组件的 API 来自三个部分 - props，events 和 slots：
- Props 允许外部环境传递数据给组件
- Events 允许组件触发外部环境的副作用
- Slots 允许外部环境将额外的内容组合在组件中。
  # 子组件索引
  # 异步组件
  # 组件命名约定
  # 递归组件
  # 组件间的循环引用
  # 内联模板
  -这在有很多模版或者小的应用中有用，否则应该避免使用，因为它将模版和组件的其他定义隔离了。
  # 对低开销的静态组件使用 v-once