Vue2复习笔记

Vue2 复习笔记

• 官网文档
• 下载

MVVM

• M∶即 Model，模型，包括数据和一些基本操作
• V∶即 View，视图，页面渲染结果
• VM∶即 View-Model，模型与视图间的双向操作(无需开发人员干涉)
  

帮助理解 MVVM

1. 在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染到View中。而后当用户操作视图，我们还需要通过 DOM获取 View 中的数据， 然后同步到Model 中。
2. 在 MVVM 中的 VM 要做的事情就是把DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的
   只要我们 Model 发生了改变，View上自然就会表现出来
3. 当用户修改了View，Model 中的数据也会跟着改变。。
4. 结果把开发人员从繁琐的 DOM操作中解放出来，把关注点放在如何操作 Model上, 大大提高开发效率

插值表达式

{{message}} : 插值表达式

使用插值表达式引用 data 数据池数据是在标签体内

<div id='app'>
<h1>欢迎你{{message}}-{{name}}</h1>
</div>

<script>
//创建的 vue 实例挂载到 id=app 的 div
let vm = new Vue({
	el: "#app", 
	//data{} 表示数据池(model 的有了数据), 有很多数据 ,以 k-v 形式设置(根据业务需要来设置)
	data: {
		message: "Hello-Vue!",
		name: "hello world"
	}
})
</script>

数据单项渲染

• v-bind 指令可以完成基本数据渲染/绑定 。v-bind: 简写形式就是一个冒号:。
• v-bind 是数据单向渲染: data 数据池绑定的数据变化，会影响 view。

1. 使用插值表达式引用 data 数据池数据是在标签体内

2. 如果是在标签/元素 的属性上去引用 data 数据池数据时，不能使用插值表达式

3. 需要使用 v-bind, 因为 v-bind 是 vue 来解析, 默认报红,但是不影响解析

4. 如果不希望看到报红, 直接 alt+enter 引入 xmlns:v-bind

<img v-bind:src="img_src" v-bind:width="img_width"/>

数据的双向绑定

v-model="xxxx" 是数据的双向渲染,

1. data 数据池绑定的数据变化，会影响 view 【底层的机制是 Data Bindings】
2. view 关联的的元素值变化, 会影响到 data 数据池的数据【底层机制是 Dom Listeners】

<input type="text" v-model="hobby"/>

事件绑定

使用 v-on 进行事件处理，比如: v-on:click 表示处理鼠标点击事件。

v-on:事件名 可以绑定指定事件。

事件调用的方法定义在 vue 对象声明的 methods 节点

如果方法没有参数，可以省略()[需要浏览器支持]

v-on 指令的简写形式 @ [需要浏览器支持

<button v-on:click="sayHi()">点击输出</button>

<script>
let vm = new Vue({
 // el 就是 element 的简写，创建的 vue 实例挂载到 id=app的元素。
el: "#app", 
 //data{} 表示数据池(model 中的数据), 有很多数据 ,以 k-v 形式设置(根据业务需要来设置)
data: { 
    message: "Vue 事件处理的案例"，
    count:1
},
//methods
// 1. 是一个 methods 属性, 对应的值是对象{}
// 2. 在{} 中, 可以写很多的方法, 你可以这里理解是一个方法池
methods: {
    sayHi() {
    console.log("hi, 银角大王~");
    this.count +=1;
    } 
} 
}) 
</script>

修饰符(Modifiers)

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

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

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>


<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

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

按键修饰符

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

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

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

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

系统修饰符

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

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

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

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

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

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

条件渲染

v-if

动态创建对应的子组件

v-if ： 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

v-else : 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<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>

v-show

不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS property display 。

注意，v-show 不支持 <template> 元素，也不支持 v-else。

<h1 v-show="ok">Hello!</h1>

v-show 与 v-if

（1）v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

（2）v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

（3）相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

（4）一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

v-for遍历数组

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

v-for遍历对象属性

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。

组件化编程

全局

Vue.component("counter",{
template: `<button v-on:click="click()">点击次数= {{count}} 次【全局组件化】</button>`,
data() {//这里需要注意，和原来的方式不一样!!!!
    return {
    count: 10
    }
},methods: {
    click() {
    this.count++;
    }
}
})           

局部

//1. 可以把常用的组件，定义在某个 commons.js 中 export
//2. 如果某个页面需要使用， 直接 import
const buttonCounter = {
	template: `<button v-on:click="click()"> 点 击 次 数 = {{count}} 次 【 局 部 组 件 化 】
</button>`,
    data() {//这里需要注意，和原来的方式不一样!!!!
		return {
			count: 10
		}
	},
    methods: {
		click() {
			this.count++;
			}
	}
}


let vm = new Vue({
	el: "#app",//Vue 实例的挂载点
	components: { //引入/注册某个组件, 此时 my_counter 就是一个组件, 是一个局部组件,他的使用范围在当前 vue
	'my_counter': buttonCounter
	}
})

组件也是一个 Vue 实例，因此它的定义是也存在∶ data、methods、生命周期函数等

data 是一个函数，不再是一个对象， 这样每次引用组件都是独立的对象/数据

组件渲染需要 html 模板，所以增加了 template 属性，值就是 HTML 模板

生命周期

1. Vue 实例有一个完整的生命周期，也就是说从开始创建、初始化数据、编译模板、挂载 DOM、渲染-更新渲染、卸载等一系列过程，我们称为 Vue 实例的生命周期
2. 钩子函数(监听函数): Vue 实例在完整的生命周期过程中(比如设置数据监听、编译模 板、将实例挂载到 DOM 、在数据变化时更新 DOM 等), 也会运行叫做生命周期钩子的函数
3. 钩子函数的 作用就是在某个阶段, 给程序员一个做某些处理的机会

生命周期图

1

2