提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
一.vue中的系统指令
1.1 v-model双向数据绑定
一般用于表单中
<input type='text' v-model='str'>;
{{str}}
//如果在文本框中输入什么数据data中的str数据就会更改 当然如果我们给data设置初始值的话一开始进入到页面中
我们也会在文本框中看到str的初始值他与表单是双向绑定的
new Vue({
el:'#id',
data:{
str:'
}
)}
1.2 v-show控制显示和隐藏
<div v-show='isshow'></div>
//v-show是控制元素显示和隐藏的如果他的值是false那么就相当于给这个元素添加样式display:none
//v-show里面可以写简单的逻辑
new Vue({
el:'#id',
data:{
isshow:true
}
)}
1.3 v-if
v-if和v-show用法一样也是用来控制元素的显示和隐藏的，但是如果v-if设置的值是false的话，那么就会直接删除这个元素在这个页面上，v-if里面也可以写简单的逻辑判断
1.4 v-pre原样输出
v-pre的用处就是让vue代码可以原样输出,
<div v-pre>{{name}}</div>
如果是正常情况下我们这个输出的肯定是xiaoming但是我们给它添加了v-pre指令输出的就是这个字符串了{{name}}
new Vue({
el:'#id',
data:{
name:'xiaoming'
}
)}
1.5 v-on事绑定件指令
用于给元素绑定事件
<元素 v-on:事件名='方法'></元素>
还有一种简写的方式
@事件类型 = '方法名'
new Vue({
el:'#id',
data:{
name:'xiaoming'
}
)}
1.6 v-cloak斗篷
这个用于解决vue加载页面的闪动问题，原理是将引入vue的文件放在下面，文件还没加载完成就先显示了vue代码
解决方案是给元素添加
style 中 添加
[v-cloak]{
diplay:none;
//给他设置隐藏等vue问价加载完毕他就会自己解除隐藏
}
<div v-cloak></div>
1.7 v-html文本插值指令
这个指令就是在标签中写入这个指令让他等于一个值就可以将这个值放入这个标签中就是文本插值
<div v-html='name'>{{str}}</div>
这样就可以将name中的值放入到div盒子中去,如果在盒子中在进行插值会先解析盒子中的文本插值
在去解析v-html中的文本插值之后会将盒子中的文本插值给覆盖掉，这个文本插值可以解析html标签
new Vue({
el:'#id',
data:{
name:'xiaoming',
str:'123'
}
)}
1-8 v-text文本插值
这个也是文本插值作用和v-html相同但是这个不能进行解析html标签
1-9 v-bind属性绑定
v-bind用于绑定属性，比如有些数据写在data中然后元素需要使用就可以使用v-bind属性
<元素 v-bind:属性="属性值"></元素>
属性绑定可以绑定给 style
style属性的使用语法格式:
<标签 style="属性:属性值;属性:属性值"></标签>
style属性绑定属性
<标签 :style="{'属性':属性值数据,'属性':'属性值数据',......}"></标签>
class 属性绑定
<元素 :class="{'类名':布尔值,'类名2':5>6}"></元素>
<元素 :class="[类名,类名,类名,....]"></元素>
1-10 v-for循环指令
v-for是vue中的循环指令用法和for循环差不多
<table>
<tr>
<th>id</th>
<th>姓名</th>
<th>学号</th>
</tr>
<tr v-for='(item,index) in arr' :ke>
<th></th>
<th></th>
<th></th>
</tr>
</table>
new Vue({
data:{
arr:[{id:1,name:'liming',classid:12},
{id:2,name:'liming',classid:12},
{id:3,name:'liming',classid:12}
]
}
})
1-11 过滤器
过滤器必须有参数 参数就是它所要过滤的数据过滤器使用的方式是{{数据 | 过滤器}}
new Vue({
 el:'#id',
filters:{
  fun(a){
  return 一个数据
}
}
1-12 v-slot指令
这个指令适用于作用域插槽传值的时候来接受传送的值来使用v-slot=‘自定义名字’ 作用域插槽传过来的值会以一个对象的形式保存
<template v-slot='res'>
//在这个作用域内可以使用res也就是局部插槽传的值这里注意要使用res.键，因为他是一个以对象型式来进行一个传值
</template>
二.Vue中的自定义指令
vue中的自定义指令v-'自定义指令'
他要写在directives中
new Vue({
//省略
directives:{
'自定义指令名':{
bind(el,binding){
如果没有指令值直接执行的函数，有指令值也会直接执行
el是操控的元素
binding是一些操作元素本身的数据
},
update(el,binding){
这个函数是数据发生改变才会执行的函数 也就是指令的指令值发送改变才会执行这个函数
}
}
}
})
三.组件的基础
1.定义模板视图
<template id='id'>
<div>
</div>
</template>
2.在vue中实例化模板视图
var name = {
template:'#id'
}
new Vue({
el:"#id',
template:'#id'
3.注册视图
components:{
name:name
}
4.使用视图用标签里面加入名字
})
四.Vue中的脚手架
4.1创建步骤
1. vue create 项目名
2. cd 项目名称 进入到项目所在文件夹
3. npm run serve 开启服务
4.2项目结构
node_modules 项目需要的模块文件目录
public 项目的入口目录
index.html SPA单页面应用的唯一的一个页面
src 目录 (项目的核心目录,绝对多少的代码都在src中进行编写)
assets 静态资源目录, 图片 css js
components 组件目录
HelloWorld.vue 组件的拓展名.vue, .vue (页面,全局组件,局部组件)
App.vue 根组件
一般在src中新建一个views用于之后存放视图，每一个新的视图都要在views文件夹里在新建一个文件夹
4.3 父传子传值
父组件中data中的数据
在子组件的前置标签中
<元素 :属性名=''></元素>
子组件接受使用
props:['属性名']
4.4 子传父传值
一般都采用事件的方式来进行传值
在组件中 使用 this.$emit('事件名',数据)
在子组件的前置标签中
<组件 @事件名='接受数据的方法'></组件>
一般在接受数据的方法中对数据进行一些操控
4.5 封装全局组件
在components的文件夹目录下创建全局组件还有index.js
之后我们在index.js中引入vue
import Vue from 'vue'
引入我们的全局组件
import 全局组件名 from '路径'
var obj = {
键(全局组件名):全局组件名(将全局组件放入键中)
}
for(const key in obj ){
Vue.component(key,obj[key]) //(参数1是组件名,参数二是组件)
}
之后键这个文件引入到main.js中就可以使用了
4.6全局过滤器的封装
在src的路径下创建一个filters的文件夹
在这个文件夹下创建2个文件 index.js 方法.js
在方法的文件下写我们的过滤器函数
写完之后要到处
import default 方法名
在index.js中引入vue
import Vue from 'vue'
import 过滤器名 from '路径'
var obj = {
键(全局过滤器名):全局过滤器名(将全局过滤器放入键中)
}
for(const key in obj ){
Vue.component(key,obj[key]) //(参数1是过滤器名,参数二是过滤器那个函数)
}
之后键这个文件引入到main.js中就可以使用了
\
4.7 is方法的运用
is='值'这个值如果是组件名的话可以让我们的其他元素当成这个组件来使用
五.Vue中的生命周期
vue的生命周期就是一个vue实例从创建到销毁的过程，也就是说从new Vue()开始，一个完整的生命周期，开始创建，初始化数据，编译模板，挂载dom，渲染，更新》渲染，销毁,简单点来说就是new Vue就是开始创建了，然后里面的data(){}就是初始化数据，之后我们创建模板，注册模板，编译模板，将模板挂载到dom上也就是写在挂载点里,将挂载点中的组件渲染到页面上，如果我们data中的数据发生改变，就更新数据之后在渲染到视图中。
几个钩子函数
beforeCreate
这个钩子函数的时期代表刚刚创建了new Vue({})这个实例，但里面的内容还没有初始化赋值
created
在这个钩子函数时期，new VUe 的初始化已经完成，里面的data和methods里面的方法都可以调用了
beforeMount
这个钩子函数时期,模板已经创建编译完毕已经将组件渲染好但是还没有放到视图中，视图中还什么东西都没有，还没有渲染dom节点
Mounted
这个钩子函数时期，已经将组件渲染到了视图上，在这个阶段已经可以对dom节点进行操作了
beforeUpdate
这个钩子函数时期，页面上的数据还有没改变，但是data中的数据已经改变但是还没有渲染到视图上
updated
在这个钩子函数时期，data中的数据与页面中的数据已经同步，页面上的数据已经更新
beforeDestory
在这个钩子函数时期，vue实例已经从运行阶段进入到了销毁阶段但是这个时候还没有真正的销毁，vue里面的data等还能继续使用
destoryed
vue实例已经完全销毁里面所有的东西都不能使用
六.事件修饰符
.self 只有点击自己才会触发事件
.stop 阻止冒泡的产生
.prevent 阻止默认行为的发生
.capture 捕获事件 提高优先级的
.once 使用一次
一些键盘事件
.up 向上
.down 向下
.left 向左
.right 向右
.enter 回车
.13 键盘编码
七.Vue中watch监听器
watch的作用是监听data中的数据变化，如果data中的数据发生变化那么就会触发watch监听器
如果是非引用数据有两种写法
'数据': {
handler(newval,oldval){
//newval 是新的数据 old是之前的数据
},
deep:false
}
还有一种简写的方式
数据(newval,oldval){}
如果是引用数据类型那么就
'数据':{
handler(newval,oldval){
//newval 是新的数据 old是之前的数据
},
deep:true
}
八.Vue中视图更新使用this.$set
如果我们有一个对象类型的数据输出到视图上
我们之后向这个对象中增添数据视图上是不会显现出来的但是我们在逻辑层已经完成了增加
那么我们怎么做才可以让这个添加成功的数据反应到试图上来我们直接使用
this.$set('要操作的数据','添加的名',添加的东西)
九.Vue中公共类的添加
在src路径下创建一个mixins文件夹 里面创建一个mixins.js的文件 直接把
vue文件夹下的 import default那个 复制过去 然后在面写公共属性
之后再在我们需要的vue文件中引入即可然后一定要在
import 名字 from "./mixin.js"
文件中的 import default 中 使用 mixins=['名字']引入
十.slot插槽
在组件中嵌入其他标签，使用slot进行操作
10.1 匿名插槽
匿名插槽一般写在组件中 然后在组件的前置标签中写入标签等信息就会自动放入插槽那个位置,只能有一个匿名插槽，如果写多个匿名插槽就会报错，总的来说匿名插槽就是用来当成标签用的，一个可以修改的标签，比如说我们在全局插件中使用匿名插槽，在不同的组件中调用全局插件里面有匿名插槽，我们就可以设置不同的值，用来区分不同的页面
10.2 具名插槽
具名插槽就是可以使用多个slot标签可以放入不同的位置，我们采用在slot标签中设置name的方式来区分匿名插槽，我们在使用的时候，在前置标签中引用其他标签的时候在标签中加入属性<元素 slot='slot的名字'></元素>，我们使用这种方式来区分不同的具名插槽，具名插槽可以使用多个，也可以和匿名插槽一起使用
10.3 作用域插槽
设置一个插槽<slot></slot>我们采用属性绑定的方法可以进行传值<slot :'属性名字'='值'></slot>设置之后我们在他的前置标签中使用 <template v-slot='自己起的接收数据的数据名'></template> 之后我们将需要插入的标签写入这个template标签中，如果我们需要我们所穿的值直接引入就可以，这个传过去的值是以对象的形式进行传递的
十一.ref
将ref放入标签中设置一个名字可以识别这个标签一般都搭配 $refs来使用
<div ref='box'></div>
this.$refs.box 就是这个元素我们可以使用这个方法来操控这个元素
十二.组件缓存
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重新渲染导致的性能问题，每次切换新标签的时候，Vue 都创建了一个新的 vue实例。
在动态组件上使用 keep-alive;
将组件数据进行缓存；不触发生命周期
keep-alive 标签
特殊生命周期：
activated（激活钩子函数） deactivated（失活的钩子函数）
属性：
include - 只有名称匹配的组件会被缓存。
exclude - 任何名称匹配的组件都不会被缓存。
使用方式<keep-alive>要缓存的组件</keep-alive>
如果不加这个每次都会创建或者销毁组件，会占用内存，
十三.nextTick
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。Vue中DOM更新是异步的.
语法：
1. Vue.nextTick(function () {
// DOM 更新了
})
Vue.nextTick().then(function () {
// DOM 更新了
})
2. this.$nextTick(function () {
// DOM 现在更新了
})
this.$nextTick().then(function () {
// DOM 更新了
})
一般搭配ref使用，refs获取元素之后修改内部数据在逻辑层面上修改这个数据的过程是同步的但是更新到页面上的数据更新这个过程是异步的
十四.Vuex
14.1 Vuex介绍
公共状态管理工具
公共：任何组件都能访问修改
状态: 数据 变量
vuex的数据是响应式的
14.2 Vuex属性的介绍
2.1 state:专门存放数据的
就相当于data里面就是存放数据用的
普通访问采用
$store.state.键
简写
{{方法名}}
computed:{
方法名(){
return this.$store.state.键
}
}
2.2 getters:相当于vuex中的计算属性
正常访问
{{$store.getters.方法名}}
计算属性访问
{{方法名}}
getters:{
方法名(state){
return ...
}
}
computed:{
return this.$store.getters.方法名
}
2.3 mutation:同步修改
mutation:{
方法名(state,val){}//state数据val修改条件
}
methods:{
方法名1(){
this.commit('方法名',val)
}
}
2.4 action:异步修改
action:{
方法名(store,val)//store仓库,val修改条件{
store.commit('方法名',val)
}
}
methods:{
方法名(){
this.$store.dispatch(方法名,val)
}
}
2.5 modules : 模块化管理
14.3 辅助函数
3.1 mapState
import {mapState} from 'vuex'
{{变量名}}
computed:{
...mapState(['变量名'])
}
3.2 mapGetters
import {mapGetters} from 'vuex'
{{方法名}}
computed:{
...mapGetters(['方法名'])
}
3.3 mapMutations
import {mapGetters} from 'vuex'
{{方法名}}
methods:{
...mapGetters(['方法名'])
}
3.4 mapAcitons
import {mapActions} from 'vuex'
{{方法名}}
methods:{
...mapActions(['方法名'])
}
十五 路由
15.1 路由的介绍
路由就是用来进行页面的跳转的,切换不同的组件
15.2路由的使用
import Mingzi from 'lujing'
{
path:'地址',
name:'',
component:()=>import('路径')这是懒加载的形式// mingzi这种形式
}
只写一个/代表首页
<router-view></router-view>显示页面的标签
<router-link to='地址'></router-link> 相当于a标签切换router-view中的组件
15.3 路由跳转的方法
在<router-link to='地址'></router-link>中在to里面填入地址就可以跳转
使用方法跳转的话 this.$router.push('地址')
this.$router.replace 无法返回上一页面
15.4 切换路由模式
mode:'history' 这个模式就是普通的/.../..
mode:'hash' 这个模式就是$/$/不是直接的/../..
15.5 路由传参
5.1 查询字符串
/user?id=888&name=张三 或者 this.$router.push({path:'路由',query:参数})
并且这个在path中的路径不用修改成那种传参形式就是普通的/user形式就行
接受 : this.$route.query
5.2 动态路由
在path:'/user/:id/:name' //:占位符就随便传值写道那边就是id和name /user/12/lisi就可以
在路径中就这么写就可以/user/12/lisi
接收用this.$route就可以了
5.3 隐秘传值
特点 : 域名位置看不见参数
this.$router.push({
name:"路由名",
params:{ 参数自己定义的 }
})
接取 : this.$route.params
15.6子路由
子路由就是在路由里
{
children:[
{
path:'',
name:'',
component:''
}
]
}
501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
