Vue 知识点个人总结
Vue
脚手架
脚手架 3 的版本 ---- webpack 4
cnpm install -g @vue/cli-----全局安装组件
vue create myapp-----命令行创建项目
或者使用 vue ui--------界面UI创建项目
脚手架 2 的版本 ---- webpack 3
npm install -g @vue/cli-init
vue init webpack myapp2
数据的双向绑定
原理
1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。
2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。
3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器。
基础用法
<div>
{{ msg }} --- {{ num }} --- {{ flag }} --- {{ obj.a }} ---- {{ obj.b }} // 在dom中使用双大括号包裹变量,视图中就会渲染数据
</div>
<div v-html="msg"></div> mag为data中申明的变量,是一个html格式
<div v-text="msg"></div> mag为data中申明的变量,是一个html格式
{{ sex == 0 ? '女' : '男' }} 三目运算符,sex为在data中申明的变量
vue中的指令
v-html,就会把它的值插入到该标签内部
v-text
v-if 条件判断 渲染还是不渲染 ---- 运行时消耗更大,适用于少量的切换使用
v-else-if
v-else
v-show 条件判断 元素始终会被渲染并保留在 DOM中。v-show只是简单地切换元素的CSS的display属性。适用于频繁的切换时使用
v-for 遍历循环使用
v-on 绑定事件 缩写使用@
v-bind 绑定属性,给变量使用,
不常用的
v-slot
v-pre
v-cloak
v-once
v-for = “item of/in list” :key="唯一性的值"
v-for = “(item, index) of/in list” :key="index"
可以遍历数组,可以遍历对象,还可以遍历字符串,一定要记得加 key值(钥匙与锁的故事 -- 详细介绍 --- 虚拟DOM算法)
<li v-for="(item,index) of arr" :key="index">
{{item.name}}
<ul>
<li v-for="(ite,ind) of item.type" :key="ind">
{{ite}}
</li>
</ul>
</li>
v-model 数据的双向绑定 原理是onchange 和oninput事件
v-model.lazy 失去焦点或者按回车键时才会运算
v-model.trim 得到的值去除两端空格
v-model.number 唤起数字键盘
class 绑定
<style>
.active {
font-size: 40px;
color: #f66;
}
</style>
<!- ->
<div :class="{active: flag}">如果vue项目中的active样式是由flag的值控制的</div> 将active赋值给class,通过flag为真或假来实现
data: {
flag: true
}
同样也可以给一个class绑定多个属性 使用数组的方式
<div :class="[activeClass, testClass]">数组写法就是先把数据定义好,直接数组包裹即可</div>
data: {
activeClass: 'active', active 是class的类名
testClass: 'test' test 是class的类名
}
style 绑定
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> // 各种样式可以直接写在style中
-------------------------
const vm = new Vue({
data: {
activeColor: 'red', fontSize: 30
}
<div v-bind:style="styleObject"></div> 也可以将样式放在一个变量中,通过变量将样式赋值
-----------
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
})
事件修饰符
阻止冒泡 v-on:click.stop="fn()"
阻止默认事件 v-on:click.prevent="fn"
阻止冒泡阻止默认事件 v-on:click.stop.prevent="fn"
.capture 添加事件监听器时使用事件捕获模式 即元素自身触发的事件先在此处理,然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示一个警告。
按键修饰符
以前如果有一个表单输入框,当你输入之后敲回车想要打印值
<input onchange="fn(event)" id="name" />
if (event.keyCode === 13) {name.value}
vue
<input @change.enter="fn()" id="name" />
.tab
.delete
.esc
.space
.up
.down
.left
.right
系统修饰符
.ctrl
.alt
.shift
.meta
vue的生命周期函数
初始化阶段
beforeCreate(){} // 准备怀孕
created(){} // 怀上了 *******************************************
beforeMount(){} // 准备生
mounted(){} // 生下来了 *************************************************
运行时阶段
beforeUpdate(){} // 每天都在长大
updated(){} ************************
销毁阶段
beforeDestroy(){} // 马上 game over
destroyed(){} // game over gg ************
-----------------------------------------------------------------------------------------------------------------
在 created 或者 mounted 中请求数据,建议在mounted中请求数据
可以在 mounted 和 updated 中操作dom
组件
全局注册组件
局部注册组件
动态组件
动态组件默认情况下切换时都是先销毁掉原来的组件,再创建新的组件
避免组件的重新渲染,可以使用<keep-alive></keep-alive>,但是会缓存所有的加载过的组件
定义组件时添加name选项,keep-alive 添加include属性,值为name选项,需要缓存的写进去,通过include和name值,就可以只缓存需要的组件
首先在data中定义type,并且赋值,值就是默认显示的组件 <body>
<div id="app">
<button @click="type = 'v-aaa'">A组件</button> // 通过事件改变type
<button @click="type = 'v-bbb'">B组件</button> // 通过事件改变type
<button @click="type = 'v-ccc'">C组件</button> // 通过事件改变type
<component :is="type"></component> // 通过type来实现切换不同的组件
</div>
</body> ----------------------------------------------------------------------------------------
缓存所有加载的组件
<body>
<div id="app">
<button @click="type = 'v-aaa'">A组件</button>
<button @click="type = 'v-bbb'">B组件</button>
<button @click="type = 'v-ccc'">C组件</button>
<keep-alive> // 保留所有加载过的组件
<component :is="type"></component>
</keep-alive>
</div>
</body> ---------------------------------------------------------------------------------------
缓存需要的组件。需要的组件加载过就缓存,其它组件加载了也不缓存 <body>
<div id="app">
<button @click="type = 'v-aaa'">A组件</button>
<button @click="type = 'v-bbb'">B组件</button>
<button @click="type = 'v-ccc'">C组件</button>
<keep-alive include="aaa,bbb"> // 当aaa bbb只要加载了就会被缓存下来
<component :is="type"></component>
</keep-alive>
</div>
路由 vue-router
router-view 告诉页面在哪里渲染组件。
components: {
default: home
footer: Footer
}
<router-view> </router-view>渲染默认的default组件
<router-view name="footer"> </router-view> 渲染名字为footer的组件
声明式跳转
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
1 <router-link to="/foo">Go to Foo</router-link>
2 <router-link to="/foo" tag="li">Go to Foo</router-link>
3 <router-link to="{
name: 'user', params: { userId: '123' }}
" tag="li">Go to Foo</router-link>
编程式跳转
router.push('home'
router.push({ path: 'home' })
router.push({ path: `/user/${userId}` }) // -> /user/123
router.push({ name: 'user', params: { userId: '123' }})
router.push({ path: 'register', query: { plan: 'private' }})
注意:
使用path 后面传参要使用query,使用 name 搭配 params
path: '/detail/:id', // :代表此处的值为参数,id为参数的名字 -------------------------- 这个必须设置
嵌套路由
{
path: '/user', // 浏览器地址输入/home时
name: 'user', // 路由的名字----命名路由
// component: () => import('./views/user/index.vue')
components: {
default: () => import('./views/user/index.vue'),
footer: Footer // 为什么不用懒加载,因为多出需要调用,先引入再使用
},
children: [ // 定义子路由,即路由中嵌套路由
{
path: 'nologin', // /user/nologin
component: () => import('@/components/user/NoLogin.vue')
},
{
path: 'login', // /user/login
component: () => import('@/components/user/Login.vue')
}
]
}
导航守卫
全局导航守卫
router.beforeEach((to, from, next) => {
// ...
})
router.afterEach((to, from) => {
// ...
}) 全局后置的导航守卫
路由导航守卫
beforeEnter: (to, from, next) => {
// ...
}
组件内导航守卫
beforeRouteEnter // 注意this的问题,里面没有this 使用vm代替
beforeRouteUpdate
beforeRouteLeave
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
重定向
{ // 路由的重定向
path: '/',
redirect: '/home' 当输入 / 定向到 /home
}
路由的别名
path: '/home', // 浏览器地址输入/home时
name: 'home', // 路由的名字----命名路由
alias: '/ho', // 别名 --- 当你访问 /ho 时,其实和访问 /home是一致的
路由懒加载
component: () => import('./views/home/index.vue') // 路由的懒加载
UI库
PC端项目
iview (http://v1.iviewui.com/)
element-ui (https://element.eleme.cn/#/zh-CN)
移动端
mint-ui (http://mint-ui.github.io/#!/zh-cn)
vant (https://youzan.github.io/vant/)
状态管理器
State Getter Mutation Action Module
state 初始化状态管理器
getter state的计算属性,负责逻辑的运算
mutation 唯一改变state的方法,mutation 必须是同步函数
this.$store.commit('定义的事件','数据')
action 类似mutation 不过这里是处理异步的
module 分割状态管理器,模块化管理,比如一个大的状态管理器,可以分解多个模块每个模块都具有 state getter mutation action
export default new Vuex.Store({
state: { // 需要管理的组件的状态
login: '',
number: ''
},
getters: { // 可以看做是 state 的计算属性,类似于组件中的 data 与 computed },
mutations: { // 唯一改变状态的地方
change (state,data) {
state.number = data
}
},
actions: { // 异步操作 }
}) --------------------------------------------------------
this.$store.state.login 获取状态管理器的值 this.$store.commit('','') 改变状态管理器的值
slot分发内容 --- 插槽
组件中的内容是不能显示的,只有通过slot才能添加内容
<header class="header">
<ul>
<li @click="back">
<slot name="left"><p>返回</p></slot> // 定义slot
</li>
<li>
<slot></slot> // 定义slot
</li>
<li>
<slot name="right"></slot> // 定义slot
</li>
</ul>
</header>
------------------------------
<header>
<div solt="right">分享</div> // 使用
</header>
ref - 标签 - 组件 -this.$refs.
作用类似于id,具有唯一性 ---- 实际上操作的就是DOM
<div ref="tip">{{msg}}</div>
--------------
this.$refs.tip.innerText // 可以使用this.$refs获取
混入 mixin
组件中相同的选项可以使用混入简化代码 ---- 提高组件的复用性 -----
import Header from '@/components/Header' export default { // 暴露出去这个组件
components: { // 共同的部分
Header
}
} -----------------------
import mymixins from '@/mixins/mymixins' // 引入组件 export default {
mixins: [mymixins] 调用引入的组件
}
过滤器 Filter
局部定义的过滤器
<div>
{{ sex | sexFilter}} ---- {{ money | moneyFilter}} // 加 | 然后使用 过滤函数
</div>
----------------------------------------
filters: {
moneyFilter (val) { // 声明过滤函数 val就是money值
return '¥' + val // 返回的就是显示的值
}
}
路由的过渡效果
nextTick
状态改变,视图渲染,实际上DOM节点的值并未及时发生改变,使用nextTick可以解决此问题
// console.log(this.$refs.tip.innerText) // 打印结果没有,实际视图已经渲染
this.$nextTick(function () {
console.log(this.$refs.tip.innerText) // 使用nextTick包裹实现同步
})
Vue 知识点个人总结的更多相关文章
- 【vue知识点】1)vue生命周期
[vue知识点]2)vue登录认证
- vue知识点汇总
一.学习vue必须了解的几个知识点 1.node.js介绍 node是一个让JavaScript运行在服务端的开发平台,使用JavaScript也可以开发后台服务.说明白些它仅仅是一个平台,我们使用 ...
- vue知识点13
知识点归纳整理如下: 组件 component 1.页面中的一部分,可以复用, 本质上是一个拥有预定义选项的一个 Vue 实例 2.使用 1)定义 ...
- vue知识点12
知识点归纳整理如下: 1. 数组用下标改变,或者对象增加属性,这样的改变数据 是不能触发视图更新的,要用 Vue.set(对象,属性,值) 或this.$set(对象,属性,值) 2. this. ...
- Vue知识点
1. Vue生命周期图示: 2.插值: 文本:{{ message }}: 纯html:v-html="xxx"; 属性:v-bind:id="xxx"; 使用 ...
- Vue面试中,经常会被问到的面试题/Vue知识点整理
一.对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写.Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑.View 代表UI 组件,它负责将数 ...
- Vue知识点(面试常见点)
v-bind和v-model的区别 1.v-bind用来绑定数据和属性以及表达式,缩写为':' 2.v-model使用在表单中,实现双向数据绑定的,在表单元素外使用不起作用 什么是 mvvm? MVV ...
- 【前端vue开发】vue知识点超链接学习笔记
1.如何去除vue项目中的 # --- History模式: https://www.cnblogs.com/zhuzhenwei918/p/6892066.html 2.三分钟教你写个Vue组件: ...
- Vue知识点超快速学习
基础知识: vue的生命周期: beforeCreate/created.beforeMount/mounted.beforeUpdate/updated.beforeDestory/destorye ...
- vue 知识点
Vue 中的 slot: 概念:槽/slot是组件在模板中为调用者预留的位置,使用<slot>元素声明一个 槽.在最终的视图中,调用者模板中被调用组件的内容,将填充<slot> ...
随机推荐
- CAD图纸怎么看?这两种方法值得看
在CAD日常的工作中,每天都是需要接触到CAD图纸文件,有一些房屋设计.建筑施工图.室内家具设计图纸等,这些CAD图纸的格式均为dwg格式的.是不能够直接进行打开查看的,需要借助CAD看图软件来使用. ...
- SSM框架之SpringMVC(6)异常处理及拦截器
SpringMVC(6)异常处理及拦截器 1.异常处理 1.1.异常处理的思路 系统中异常包括两类:预期异常和运行时异常 RuntimeException,前者通过捕获异常从而获取异常信息,后者主 ...
- Tesseract.js 一个几乎能识别出图片中所有语言的JS库
Tesseract.js 一个几乎能识别出图片中所有语言的JS库. 官网:http://tesseract.projectnaptha.com/ git:https://github.com/napt ...
- Android数据库GreenDao的使用总结
一.GreenDao的介绍 GreenDAO是一个开源的Android ORM(“对象/关系映射”),通过ORM(称为“对象/关系映射”),节省了我们在数据库开发过程的时间! 通过GreenDao,我 ...
- 文本切换器(TextSwitcher)的功能与用法
TextSwitcher继承了ViewSwitcher,因此它具有与ViewSwitcher相同的特征:可以在切换View组件时使用动画效果.与ImageSwitcher相似的是,使用TextSwit ...
- Flink01
1. 什么是Flink? 1.1 4代大数据计算引擎 第一代: MapReducer 批处理 Mapper, Reducer Hadoop的MapReducer将计算分为两个阶段, 分别为Map和Re ...
- FS-Cache 调研
最近需要使用到 FSCache,今天调研一下FS-Cache,主要记录一些索引,方便以后查阅: RedHat 文档:https://access.redhat.com/documentation/en ...
- Python+Unittest+Requests+PyMysql+HTMLReport 接口自动化框架
整体框架使用的是:Python+Unittest+Requests+PyMysql+HTMLReport 多线程并发模式 主要依赖模块 Unittest.Requests.PyMysql.HTMLR ...
- 关于操作服务器上tomcat的常用linux指令
ll: 列出目录下的所有文件 cd:切换目录 pwd:显示目前的目录 grep xxxxxx catalina.out 查询文件中关于某个信息的内容 grep -3 xxxxxxca ...
- 12. Go 语言文件处理
Go 语言文件处理 本章我们将带领大家深入了解一下 Go语言中的文件处理,重点在于文件而非目录或者通用的文件系统,特别是如何读写标准格式(如 XML 和 JSON 格式)的文件以及自定义的纯文本和二进 ...