Vue 基础入门(一):
一、基础了解:
1、 是啥 :一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,便于与第三方库或既有项目整合。
通俗的来讲,vue就是一个已经搭建好的空屋,与单纯使用jQuery这种库比,可以更好地实现代码复用,减少工作量,与Angular.js这种家具电器一应俱全的框架相比又不会一件件挑选,把自己不喜欢再一件件的扔了,甚至required 必须用且耗费空间的!
vue是一个无论项目大小都可以满足开发需求的框架
** vue做了必须的事,又不会做职责之外的事 **
2、用处:代码灵活复用。
因为:Vue.js有声明式,响应式的数据绑定,与组件化的开发,并且还使用了Virtual DOM
二、 相关背景知识:mvc 与 MVVM的区别:
1、MVC:是后端的分层开发概念
M:model层, 处理数据的 CRUD
V:视图层, 前端页面
C:业务逻辑层, 路由是其中之一
- 图解如下:
2、MVVM :即model,view,viewmodel,它是数据驱动模式,即所有的一切通过操作数据来进行,而尽量避免操作dom树。
MVVM 只专注于前端视图层,MVVM 是前端思想,MVC是后端思想, MVVM 在 MVC的子集 V 层中
- 图解如下:
**3、vue代码和MVVM之间的对应信息 **
基本代码:
三、常用指令:
1、 v-clock 可以解决差值表达式的闪烁问题
2、v-text
3、v-html
4、v-bind 可直接 简写为 :tittle
vue 中提供用于绑定属性的指令,
v-bind:“title” 会把引号中的数据用js语法去解析,当做一个变量,里面可字符串拼接
5、v-on: 可直接 简写为 @click
vue 中提供用于绑定事件的指令
在vue 实例中的methods 中写 所对应的事件所要执行的函数
-
注意点:
-
注意函数中有 定时器,回调函数的this的指向问题(用this 函数来解决) 如下:
四、事件修饰符:
-
. stop 阻止事件冒泡
-
. prevent 阻止默认行为,类似a标签跳转的行为
-
.capture 实现捕获事件机制
- .self 实现只有点击当前元素的时候 才会触发事件,注意它只会阻止自己身上的冒泡, 比如有 out,inner,innerself 三层 ,给最里面的innerself 身上 使用. self 后,只能阻止与它最近的事件层 inner,而外层 out 还是会被冒泡 简言之: “只能阻止父级事件冒泡,不能阻止 爷爷 及 祖先的事件被 冒泡触发事件 ”
.once 只触发一次 事件
五、v-model 与 双向数据绑定:
- v-bind 只能实现数据的单向绑定 从 M 自动绑定到 V, 无法实现数据双向绑定
- 注意: v-model 只能运用在表单元素中
六、在Vue中 使用样式
方法一: 使用class样式
1.数组:此处的 样式名 定义在style中
2、三元表达式:
- 数组中嵌套对象 (对象来代替三元表达式,)
4.直接使用对象
方法二:内联样式
2.数组形式
七、vue指令之v-for 和 key
- v-for
循环普通数组:
循环对象数组:
循环遍历对象的键 ,值:
v-for 迭代数字:
v-for中的注意事项:
八、v-if 和v-show
v-show 会自动调用 display来实现 显示 和 隐藏:
以上小总结:
-----------------------------------------分割线----------------------------------------
4、vuejs生命周期函数:
生命周期函数就是vue实例在某一个时间点会自动执行的函数
当我们创建一个实例的时候,也就是我们调用 new Vue() 这句话的时候,vue会帮助我们去创建一个实例,创建过程其实并不像我们想的那么简单,他要经过很多的步骤
- Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同
1.beforeCreate 实例创建之前调用, 数据没有挂载,不能访问数据
vue实例初始化的时候就被执行(数据加载之前执行的一个函数,拿不到data里面的数据)
2.created 实例创建之后调用,能访问、修改数据,单修改数据不会触发updated函数 在这里可以向服务器请求数据,(也可以拿到父组件的数组进行修改等操作,这一步骤是没有操作到模板,数据和模板还没有结合)
下一步就是开始找模板,找不到的话就把el接管的div作为模板,如果有模板就会渲染模板
3.beforeMount 编译模板已经完成(模板和数据都已经准备就绪了) 虚拟dom已经存在 还没有进行进行渲染。
也能修改数据,但是修改数据不会触发update函数(组件不卸载,只能执行一次)
4.render 渲染是vue自动完成的。如果手动写render函数,渲染的东西
就会把 vue自动渲染的东西覆盖调。
5、 mounted 真实的dom元素已经存在, 可以获取节、修改数据,而且修改数据会触发update函数(页面已经渲染,替换了之前的dom元素)。
6、 beforeUpdate 数据更新之前触发(数据更新:就是dom上的数据发生变化)。
7、. updated 数据修改后执行 修改数据要可能造成死循环(在这里尽量不要修改数据)。
8、 beforeDestroy 销毁之前 要做一些清理工作,防止内存泄漏。
9、 activated keep-alive 激活动态组件时调用。
10、deactivated keep-alive 卸载动态组件时调用(已经销毁的时候执行)。
5、计算属性:computed
- **作用:**为了解决 模板用于简单运算,在模板中放入太多的逻辑会让模板过重且难以维护。
<div id="example">
<p>Original message: "{
{ message }}"</p>
<p>Computed reversed message: "{
{ reversedMessage }}"</p> //我们把复杂处理放在了计算属性里面了
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
});
- 计算属性还可以依赖多个Vue 实例的数据,只要其中任一数据变化,计算属性就会重新执行,视图也会更新。
6、函数的防抖与节流:
基础语法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" name="" value="" placeholder="在这里输入文字,下面会跟着变化" v-model="message">
<hr>
<p>{
{ message }}<