VUE学习

最新推荐文章于 2024-05-29 12:00:00 发布

kkks0001

最新推荐文章于 2024-05-29 12:00:00 发布

阅读量513

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43361434/article/details/108750298

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VUE学习

vue 是一个轻量级的mvvm框架数据驱动+组件化的前端开发

vue 是一个轻量级的mvvm框架数据驱动+组件化的前端开发

模板

new Vue({
			el:'#app',
			data:{
				
			},
			methods:{//定义方法
				
			},
    		components:{//定义组件
        
   			},
    		computed:{//带缓存
        
    		}
		})

观察者

计算属性:依赖变量额值没有发生变化,是不会重新执行该方法的,所依赖的变量值发生变化前,不管执行多少次这个函数,函数内部都只执行一次,调用函数所得到的值是缓存值

数据绑定

v-model 双向绑定

 <input v-model="test">

v-pre 正常显示不解析标签

<span v-pre>{{ this will not be compiled }}</span>   显示的是{{ this will not be compiled }}

v-html解析对象内字符串

 <div id="app">
        <p v-cloak>{{ msg }}</p>
        <p v-text="msg"></p>
        <p v-html="msg"></p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el : "#app",
            data : {
                msg : "<h1>这是一个h1元素内容</h1>"
            }
        });
    </script>

v-if v-show

v-if ：可以根据表达式的值在DOM中生成或移除一个元素。

v-show:可以根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时，元素被隐藏，此时查看代码时，该元素上会多一个内联样式style=“display:none”。

v-if:支持<template>语法；
v-show:不支持<template>语法

事件 v-on: 或者 @

v-on:click @click 点击事件

<button v-on:click="showsomething">click me!!</button>

<button @click="test3('abcd', $event)">test3</button>

@keyup.enter || @keyup.enter.native 回车事件键盘别名

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

属性绑定

v-bind 或者 : ( 完整写法与简写 )

<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

<a href="javascripit:void(0)" v-bind:class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>

其它

$event 传事件

<div @click="test"></div>
<div @click="test2(10,$event)"></div>
new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
			test(e){
			console.log(e)
			},
            test2(num,e){
            console.log(e)
            }
			}
		})

vue遍历数组

data:{
      list:[1,2,3,4,5,6]
}
<p v-for="(item,i) in list" :key="item">
--索引值--{{i}}   --每一项--{{item}}
</p>

js 相关

js 数组添加删除元素unshift() pushi() shift() pop()

unshift()方法：在数组的前端添加项

push()方法：从数组末端添加项

shift()方法：移除数组中的第一项并返回该项

pop()方法：从数组末端移除项

js splice 删除指定下标元素将元素添加到指定下标

<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
//.1
document.write(arr + "<br />")
arr.splice(2,0,"William")//添加到指定下标
document.write(arr + "<br />")
//结果
//George,John,Thomas,James,Adrew,Martin
//George,John,William,Thomas,James,Adrew,Martin
    
//.2
document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)
//结果
//George,John,Thomas,James,Adrew,Martin
//George,John,William,James,Adrew,Martin
    
//.3
document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)
//结果
//George,John,Thomas,James,Adrew,Martin
//George,John,William,Martin   
</script>

数组操作 arr.filter(fn()) arr.map(fn) arr.reduce(fn(pre,curenr),obj)

array.filter(function(currentValue,index,arr), thisValue)
参数:currentValue:遍历时的item的值  index 遍历时的下标  thisValue 回调函数中this的值
回调函数返回  true(当前元素不被过滤) 或false (当前元素被过滤)

array.map(function(currentValue,index,arr), thisValue)
参数:currentValue:遍历时的item的值  index 遍历时的下标 arr 源数组  thisValue 回调函数中this的值
回调函数返回值   任何值  (这个值将是最终结果对应下标处的那个值)

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数:currentValue 遍历时的item的值 currentIndex对应下标 arr 源数组 initialValue total的初始值
返回值:返回值将作为下次遍历时 total的值  遍历结束时 将作为reduce的返回值

Object.defineProperty(obj,prop,{})

VUE 过滤器

局部过滤器

全局过滤器

本地存储

localStorage

- 没有时间限制的数据存储
var arr=[1,2,3];

localStorage.setItem("temp",arr); //存入 参数： 1.调用的值 2.所要存入的数据 

console.log(localStorage.getItem("temp"));//输出

sessionStorage

将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。页面关闭后，sessionStorage 中的数据被清空
sessionStorage.setItem("key", "value");
var value = sessionStorage.getItem("key"); 
sessionStorage.removeItem("key"); 
sessionStorage.clear();

VUE 组件

全局组件

组件只能有一个根元素,如果有多个,可以用一个div 进行包裹

注意

局部组件

组件中的变量

模板中使用的变量只能在组件中获取,是不能直接从与el同级的data字段中取得

子组件

注意子组件中的data字段是一个函数

父子组件传值自定义属性

在组件上绑定自定义属性 :myStr="parentData" 传入父组件中的变量
子组件中使用 props来接收  定义并初始化后 子组件中可以直接使用props中的变量

子组件向父组件传值 (事件机制)

子组件绑定事件 触发子组件中对应的函数 函数中使用
	$emit('自定义事件名称',需要传递的值)
来触发自定义事件,在父组件中绑定自定义事件,并传入触发事件需要执行的函数,在父组件中定义该函数,并使用参数接收来自子组件中的值 ,接收到后即可 进行相应的操作

VUE 插槽 ( slot )

组件中使用插槽

默认插槽

组件中的div 将替换到模板中的 slot 标签

具名插槽

在模板中给slot 一个名字在使用组件时,标签中使用slot属性来应用具体的插槽

作用域插槽

注意模板的 id 与组件的名字不要弄混了

app data中的数据通过组件上的自定义属性传入组件,组件通过props接收,模板中在slot 上绑定自定义属性,组件中的标签使用 slot-scope=“scope” 取得来自模板上属性的值 (被放在scope 变量中) button( 引用插槽的地方 ) 触发点击事件后获得形参的值( 注意这里的button 不属于MyTable组件,所以相应的函数,应放在与el 字段同级的method 中)

npm

npm init 初始化项目 -y 省去了敲回车的步骤

npm init -y

安装jquery依赖

-S :–save 包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在

-D:–dev 包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D

什么都不写: 包名不会进入package.json里面，因此别人不知道你安装了这个包

npm install jquery -S

npm install webpack webpack-cli -D

VUE 生命周期

export default {
  name:'App',
  data(){
      return {
          
      }
  },
   methods:{
       
   },
   filters:{
       
   },
    components:{
        
    },
    beforeCreate(){
        
    },
    created(){
        
    },
    beforeMount(){
        
    },
    mounted(){
        
    },
    beforeUpdated(){
        
    },
    updated:(){},
    beforeDestroy(){},
    destroyed(){}
    
}

mixin (抽取公用部分)

vue.config.js

修改项目端口号

module.export= {
    devServer:{
        port:8005
    },
    publicPath:'.',//run build 后修复js路径问题
}

开发环境生产环境

npm i axios -S

解决跨域问题

设置代理

vue.config.js

请求封装封装axios封装请求

重写请求实例每个请求自动携带参数验证操作

请求前拦截返回结果后拦截

请求经过自定义实例

axios 第二种传参传入对象

VUE 路由前端路由

前端路由

页面路由由前端控制 (vue-cli 配合vue-router 实现)

后端路由

页面路由由后端控制 (MVC 中的Controller 实现)

**vue-cli 生成的项目就是单页面应用, dst 里面只有一个html 页面 **

前端路由的核心是什么?

改变URL ,但是页面不进行整体刷新

实现前端路由的两种方式

location.hash='/cc'
history.pushState('','','/cc')

VUE 项目创建

index.js

Vue中的a标签跳转

VUE 页面跳转

VUE 页面间传值

$route $router

动态路由传参

VUE懒加载

路由懒加载别名

下载好了但并未加载

点击相应页面只加载对应页面js

路由嵌套

keep-alive的使用

实现页面缓存,避免多次重复渲染降低性能

使用后,里面的页面并不会销毁,不使用,每次都会重新创建,默认缓存全部

include 属性

exclude 属性

activated deactivated 生命周期函数

前提是在router-view 上使用了 keep-alive 的页面

组件显示时触发

 deactivated(){//页面隐藏时触发
    console.log('员工列表 deactivated')
  },
  activated(){//页面显示时触发
    console.log('员工列表 activated')
  },

VUE 路由守卫

Vuex

集中式状态管理

定义store

配置store

使用store

1cc7091f97e9e749360cba59329a53a3

使用计算属性

取值 (this.$store.state)

取值 (mapState)

取值 (使用别名)

Getter 取值

赋值 ( this.$store.comit(method,value) )

mutations actions

传参

mutations中不能写异步操作,异步操作写在 actions 中

store/index.js

store/index.js

组件中

使用modules

当共享的数据越来越多,越来越多,即可使用modules,进行有个分类

store/category.js

store/index.js

使用常量

antd vue 表格单击或当前行的值

vue 打包后404

点击事件失效

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

所以如果在想要在router-link上添加事件的话需要@click.native这样写

kkks0001

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
VUE学习

VUE学习vue 是一个轻量级的mvvm框架数据驱动+组件化的前端开发模板数据绑定v-model 双向绑定v-pre 正常显示不解析标签v-html解析对象内字符串v-if v-show事件 v-on: 或者 @v-on:click @click 点击事件@keyup.enter || @keyup.enter.native 回车事件键盘别名属性绑定v-bind 或者 : ( 完整写法与简写 )image-20200806142934694其它$event 传事件vue遍历数组为什
复制链接

扫一扫