-
2019-11-27 16:46:32
区别是
区别是 methods: { name:function() {}, // es5写法 name() {} // es6写法 } //也就是简写更多相关内容 -
Vue 常用方法和函数的知识整理
2020-11-09 23:10:31var vm = new Vue({ el: '#app', // 控制区域 data: { }, // 定义数据 methods: { }, // 定义事件方法 filters: { }, // 定义私有的过滤器 directives: { }, // 定义私有的指令 components: { }, // 定义实例...展开全文整体总结：
var vm = new Vue({ el: '#app', // 控制区域 data: { }, // 定义数据 methods: { }, // 定义事件方法 filters: { }, // 定义私有的过滤器 directives: { }, // 定义私有的指令 components: { }, // 定义实例内部私有的组件 watch:{ }, // 监听值的变化，然后执行相对应的函数（或者步骤） beforeCreate() { }, // 实例刚在内存中被创建出来，还没初始化好 data 和 methods 属性之前调用此函数 created() { }, // 实例已经在内存中创建完成，此时 data 和 methods 属性初始化完成，页面（HTML）加载完成之前（未开始编译模板）调用此函数。执行顺序：父组件 -> 子组件 beforeMount() { }, // 此时已经完成了模板的编译，但是还没有挂载到页面中，在挂载开始之前调用此函数 mounted() { }, // 此时已经将编译好的模板，挂载到了页面指定的容器中显示。页面（HTML）加载完成之后调用此函数。执行顺序：子组件 -> 父组件 beforeUpdate() { }, // 状态更新之前调用此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染 DOM 节点 updated() { }, // 状态更新完成之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了 beforeDestroy() { }, // 实例销毁之前调用此函数。在这一步，实例仍然完全可用 destroyed() { }, // 实例销毁后调用此函数。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁 })具体内容：
-
vue 基础方法函数
2019-12-23 16:47:26methods：{ fn:function(){ 函数体 } } 函数或者方法，函数里面的this指向的是Vue实例对象 MVVM M: 模型 V: 视图 VM：视图模型 指令 指令的本质就是自定义属性 Vue 里面所有的指令都以 v- 开头 v-cload 阻止闪动...展开全文Vue 实例选项
el ："#id" 挂载的元素，视图
data：{ name:“zs” }数据
methods：{ fn:function(){ 函数体 } } 函数或者方法，函数里面的this指向的是Vue实例对象MVVM
M: 模型
V: 视图
VM：视图模型指令
指令的本质就是自定义属性 Vue 里面所有的指令都以 v- 开头
v-cload 阻止闪动（页面初加载时会短暂的显示原文本{{ … }}）
v-text 指令用于将数据填充到标签中，作用与插值表达式类似，但是没有闪动问题
v-html 用于将HTML片段填充到标签中，没有闪动问题，但是可能有安全问题，最好是在使用本网站数据时使用，使用第三方数据时尽量不要用。
v-pre 用于显示原始信息
v-once 只编译一次，之后数据的改动不会影响到视图
v-model 双向数据绑定，从数据到视图（Object.defineProperty == 对象定义属性），从视图到数据（事件监听）事件绑定
v-on:
多用简写 @ 代码少还不用写冒号传参：@click=" handle( 1,2, e v e n t ) " , event ) " , event)",event 代表实践对象，写法固定
属性绑定
v-bind:
简写直接就是一个冒号 " : "事件修饰符
@click.stop 阻止事件冒泡
@click.prevent 阻止元素默认事件按键修饰符
@keyup.enter 回车按键修饰符
Vue.config.keyCodes.按键变量名 = 88 自定义全局按键修饰符
class 类名绑定
:class = " { active: isActive, error: isError } " **:class=" [ ' active' , ' error ' ] "** <div class="hehe" :class=" 'hehe smd' "></div>style 样式绑定
:style="{ border: borderStyle, width: widthStyle, height: heightStyle }"( 这个对象形式的数据可以在Vue实例对象的data 中设置一个对象类型的数据然后直接使用 )
<div v-bind:class='objClasses'></div> objClasses: { active: true, error: true }分支
在标签里面书写
v-if
v-else-if
v-else循环
v-for
数组
v-for="(item, index) in arr"
v-for=“item in arr”
对象
v-for="(value, key, index) in obj"
v-for="(value, key) in obj"
v-for=“value in obj”
循环之后写上 :key=‘item.id’ 参数里有id就写上id，没有就写一个关键的属性，可以提高代码效率控制显示隐藏样式
v-show 与 v-if 都可以控制元素的显示隐藏
区别在于 v-show 就算为 false ，元素在页面中的dom结构也会继续存在，而if 判断为 false 就会直接将dom 结构移除，v-show 只是控制样式，v-if 是直接控制dom 结构 ，相比较而言，v-show 的性能要比 v-if 好一些。表单处理
v-model 可以实现双向数据绑定
修饰符
这里的修饰符都是在HTML视图中使用的
v-model.number 将视图上输入的字符串类型内容转化为数字类型
v-model.trim 自动过滤掉输入的首尾空格
v-model.lazy 在输入框中，v-model 默认是同步数据，使用 .lazy 会转变为在change 事件中同步 ，也就是在失去焦点 或者 按下回车键时才更新自定义指令
全局定义
Vue.directive( “指令名称”,{
inserted: 处理函数
} )
在定义的时候只写名称，使用的时候就需要加上前缀“ v- ”局部定义
directives:{
指令名称：{
inserted: 处理函数
}
}<body> <div id="app"> <input type="text" v-color='msg'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 自定义指令-带参数 */ Vue.directive('color', { bind: function(el, binding){ // 根据指令的参数设置背景色 // console.log(binding.value.color) el.style.backgroundColor = binding.value.color; } }); var vm = new Vue({ el: '#app', data: { msg: { color: 'blue' } }, methods: { handle: function(){ } } }); </script> </body>计算属性
computed:{
属性名称：处理函数
}
特点：
计算属性的值是通过处理函数的返回值来决定的
依赖于数据进行缓存
计算属性与方法的区别:计算属性是基于依赖进行缓存的，而方法不缓存侦听器
watch:{
数据属性名：处理函数
}
数据属性名就是vue实例中的data 里面的属性名称，侦听器就是基于data 里面的数据来运作的。当被侦听的数据发生变化时就会触发这个函数。
特点：
侦听器的名字必须与data中的属性名一致
对比计算属性：侦听器只针对数据发生变化时操作，不需要得到计算结果，计算属性则会获取一个返回值。就是说，需要计算出结果时就可以用计算属性，只监听数据变化用侦听器。
侦听器和blur事件的区别：侦听器只有当数据真正发生变化时才会触发函数，而blur不管数据有没有发生变化都会触发事件处理函数过滤器
全局定义
Vue.filter(‘过滤器名称’, 处理函数)
局部定义
filters: {过滤器名称: 处理函数
}使用时
{{ xxx | 过滤器名称(‘实参’) }}
处理函数
第一个形参是要处理的原始数据
第二个及之后形参的值就是使用时传递的实参生命周期钩子
创建 beforeCreate **created** 挂载 beforeMount **mounted** 更新 beforeUpdate updated 销毁 beforeDestroy destroyed数组的变异方法和非变异方法
变异（会影响原数组,vue 直接提供响应式支持）
push
pop
shift
unshift
splice
sort
reverse非变异
filter
concat
slice
map
reduce
some
every
变异的方法Vue是直接提供响应式支持响应式数据处理
有些数据可能需要手动修改，但是直接用覆盖的方法不会响应到页面中去，所以就有了响应式的数据处理方法。
数组
Vue.set(vm.数组属性名, 索引号, 值); vm.$set(vm.数组属性名, 索引号, 值);
对象
Vue.set(vm.对象属性名, ‘键名’, 值); vm.$set(vm.对象属性名, ‘键名’, 值);
组件化开发思想
注册全局组件
Vue.component
注册局部组件
components
组件注意事项
data必须是一个函数
template只能有一个根元素
template推荐用模板字符串
组件命名和使用都用短横线父子组件之间的通讯
子组件定义属性：props
子组件内部定义和使用属性都用驼峰命名法，父组件在传值的时候使用短横线
子组件触发自定义事件：$emit
兄弟组件之间的通讯
事件中心：var eventHub = new Vue();
eventHub. o n e v e n t H u b . on eventHub. oneventHub.off
eventHub.$emit
插槽
匿名（默认）
具名
当有多个插槽的时候
作用域
slot-scope
对子组件中的插槽进行加工
URL
RestFulAPI
POST：添加 DELETE：删除 PUT：修改 GET：查询Promise
为了解决回调地狱而存在
是异步编程技术发展过程中的产物实例API
then catch finally静态API
all
Promise.all([p1,p2,p3]).then(function (result) {// result [ p1result, p2result, p3result ]
})race
Promise.race([p1, p2, p3]).then(function(result) {// result
})fatchAPI
ajax的一个升级版
语法规则和Promise一样axios
get
axios.get(url, { params: { name: ‘zs’, age: 18 } }).then…
delete
axios.delete(url, { params: { name: ‘zs’, age: 18 } }).then…
post
axios.post(url, { name: ‘zs’, age: 18 }, { opts… }).then…
put
axios.put(url, { name: ‘zs’, age: 18 }, { opts… }).then…全局配置
超时时间
axios.defaults.timeout = 3000
基准请求地址
axios.defaults.baseURL = ‘http://itcast.cn/’
请求头
axios.defaults.headers[‘token’] = ‘hehehe’拦截器
请求拦截器
axios.interceptors.request.use(function (conf) { })
响应拦截器
axios.interceptors.response.use(function (res) { })
-
Vue中render函数和template的区别
2020-03-26 20:48:27Vue中render函数和template的区别 vue中一般 使用template来创建HTML,有时也会使用JavaScript来创建爱你HTML，这时就需要render函数 render函数中有一个参数叫h也就是creatElement,render函数将createElement的...展开全文Vue中render函数和template的区别
vue中一般 使用template来创建HTML,有时也会使用JavaScript来创建HTML，这时就需要render函数
render函数中有一个参数叫h也就是creatElement,render函数将createElement的返回值放到HTML中
createElement有3个参数：
第一个参数（必写参数，类型是字符串，对象，函数）主要用于提供DOM的html内容
第二个参数（可选，类型是对象）主要用于设置这个DOM的一些样式。属性，传的组件的参数，绑定事件之类的
第三个参数（可选，类型是数组）主要是指改节点下还有其他节点template和render函数的区别：
1）template适合简单的组件封装，render函数适合复杂的组件封装
2）template理解起来相对简单，但灵活性不高，性能低，而render灵活性较高，对使用者要求亦高
3）render函数渲染没有编译过程，相当于把代码直接给程序，所以容易出现错误，对使用者要求高
4）render函数较template优先级别高
-
VUE中函数调用函数
2020-04-17 16:55:08VUE中函数调用函数VUE中函数调用函数 VUE中函数调用函数 有时候，需要在一个函数中，调用另外一个函数，采用这种方法 this.$options.methods.onQuery(‘queryForm’); ... -
vue中的h函数
2022-02-14 22:46:58我们一般在编写vue代码时，会首先编写模板代码，也就是template标签中的代码。如果我们想要比模板更加接近编译器，此时我们可以使用渲染函数。 我们编写的代码转化为真正的dom时，首先会先转换为VNode,然后多个Vnode... -
Vue中添加自定义函数
2021-06-13 09:58:27在做vue项目的时候难免会自己写一些特定需求的函数，那么如何在vue中添加自定义函数呢。首先科普一下知识，main.js里面是放全局变量的，App.vue里面是在浏览器打开，里面放显示页面的内容。router下的index.js中内容... -
Vue中的 h 函数
2021-05-19 10:35:51Vue中的 h 函数 在了解 h 函数之前，我们需要先了解 虚拟DOM， 什么是 虚拟DOM？ 虚拟DOM 是使用JS 对象模拟真实的DOM结构，用JavaScript 对象描述DOM 的层次结构。DOM中的一切属性都在虚拟DOM 中有对应的属性。 Vue... -
vue中的render函数
2021-01-17 16:08:46render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。 -
vue中执行异步函数async和await的用法
2021-12-27 10:41:15在开发中，可能会遇到两个或多个函数异步执行的情况，对于Vue中函数的异步函数执行做了一个小总结，如下： 异步执行使用async和await完成 created() { this.init() }, methods: { async init(){ await this.... -
vue3：vue中的h函数
2022-01-16 21:16:54语法 // @returns {VNode} h( // {String | Object | Function | null} tag ... // 使用 null 将会渲染一个... // 与 attribute、prop 和事件相对应的对象。 // 我们会在模板中使用。 // // 可选的。 {}, // {St -
Vue中render函数详解
2021-11-21 17:02:35众所周知，仅限于我大前端，Vue中的核心就是虚拟DOM。 通常我们都会把我们的页面结构逻辑都写在 template 中，然后再通过vue将我们的代码转换成虚拟DOM，相比于真实DOM，虚拟DOM是通过js代码处理的，所以消耗的... -
vue中 h 函数详解
2021-09-26 15:49:07一 、作用 h函数是创建节点, 可实现...二、将app.vue中的template用h函数表示 app.vue main.js import { createApp, defineComponent, h } from 'vue' import HelloWorld from './components/HelloWorld.vue' // de -
Vue中使用find函数
2021-04-13 19:23:05Vue中使用find函数 find函数基本使用方法: // An highlighted block this.result = this.imgItems.find(item => item.required && !this.form[item.key]) 这个函数的意思是找到符合条件的对象(Object... -
VUE的箭头函数与普通函数的区别
2019-07-18 21:12:23在做vue项目时用到了axios，但是发现axios请求之后的回调函数里this并不指向当前vue实例，从而导致浏览器报错。 出错代码及结果: created : function(){ axios.get('static/data.json').then(function(res){ ... -
vue中使用防抖函数
2020-06-02 18:19:24函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。 二、使用 1、直接使用 const debounce = (function() { ... -
vue中的钩子函数
2020-08-04 23:00:29同时在这个过程中也会运行一些叫做**生命周期钩子**的函数，这给了用户在不同阶段添加自己的代码的机会。 生命周期图示 钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令... -
Vue中computed和watch的区别
2022-04-09 19:15:49今天简单说一下computed和watch的区别。 先看代码，两者怎么实现的。 <div id="app"> <input type="text" v-model="firstName"><br> <input type="text" v-model="lastName"><br> ... -
Vue2.和Vue3.生命周期的区别，对比。 详解生命周期中的每个钩子函数，setup,
2021-05-06 17:37:57的生命周期函数的不同#2.1Vue2.与Vue3.中创建实例#2.2Vue3.中的setup()在哪一个阶段执行?#3. Vue3.中，生命周期函数的各个函数的执行解析。每个阶段都做了什么！#3.1beforecreate()#3.2created()#3.3beforeMount()#... -
在vue项目中如何在.js文件调用.vue文件中函数方法
2020-12-24 17:04:291 在vue文件中 queryTage为vue文件中的函数方法 通过挂载在window上实现 mounted() { window.queryTage=this.queryTage; }, 2 在js文件如何调用 window.queryTage() -
vue中class绑定函数
2020-12-14 10:39:27vue中class绑定函数 vue+class类应用函数，增加class类名 相关博客： v-for循环、v-if 动态判断+动态赋值+操作class类：（计算属性）强制绑定函数 以上就是关于“vue之class 计算函数的类名绑定”的全部内容... -
vue定时执行函数方法
2021-06-30 15:14:07内部方法setInterval（函数，定时时间） 5000是5秒，每5秒调一次接口 methods: { // 测试函数 testHtml() { console.log("测试") }, mounted() { //定时任务方法 this.$nextTick(() => { setInterval... -
Vue中使用debounce函数
2021-11-10 13:48:36searchFile: debounce(function() { this.getSysIpcPageFile() ...不知道你使用在Vue-methods里面使用 this.fn() 调用你所写的方法 实际上在这里@input=searchFile的时候就已经进行了this.searchFile 进行调用this指向 -
vue中事件绑定函数加括号和不加括号的区别
2019-09-18 05:16:13文档：028-vue中事件绑定函数加括号和不加括?..链接：http://note.youdao.com/noteshare?id=1f216ee8add93e5bafd9e7b80d3849db&sub=562FC24E3F514599914A066B513B9BD1 -
vue组件中的data函数
2021-10-04 13:51:27vue 中的data函数 组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data vue组件中的数据是不能保存在 vue实例中的data中的。 明确 vue组件中的data 是一个函数 data必须是... -
Vue中调用函数加括号与不加括号区别
2022-03-27 11:26:281、getList方法定义：page=1相当于不传参时page默认为1 2、以下方法不能加（），不加括号页数可以依靠前端组件传入，若写为getList()，则无论前端点多少页，始终维持在第一页。若写为getList(2)，则始终保持在第二... -
Vue中根据方法名称动态调用方法
2021-07-08 15:27:01很重要: 解释说明一下, this需要传入目标方法, 否则,在目标方法中修改data中的值, 将不会重新渲染dom, 跟v-if结合使用的过程中需要注意. 现象就是, 修改v-if绑定的值, 切换不生效. // 解释说明一下, this需要传入... -
vue 外部js调用vue内部函数方法
2020-02-20 12:06:39目标：vue项目中的.js文件里面调用vue函数，例如$message 步骤： xx.js文件 import Vue from 'vue'; // 引入vue var vm = new Vue(); // 实例化 vm.$confirm() // confirm是vue的公共函数，和普通的类型vm.aa() /... -
VUE filter过滤器和methods方法过滤有什么区别
2020-03-09 18:22:221.在一个{{message}}模板中 可以添加多个filter 函数对message 处理 2.在filter中可有传多个参数，但是filters的function的默认第一位参数 为 当前的message的值 value，所以在写函数的时候应注意，自定义的...
