精华内容
下载资源
问答
  • vue中方法和函数的区别
    千次阅读
    2019-11-27 16:46:32

    区别是

    区别是
    methods: {
    name:function() {},  // es5写法
    name() {} // es6写法
    }
    
    //也就是简写
    

     

    更多相关内容
  • Vue 常用方法和函数的知识整理

    千次阅读 2020-11-09 23:10:31
    var 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:26
    methods:{ 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:27
    Vue中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:08
    VUE中函数调用函数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:51
    Vue中的 h 函数 在了解 h 函数之前,我们需要先了解 虚拟DOM, 什么是 虚拟DOM? 虚拟DOM 是使用JS 对象模拟真实的DOM结构,用JavaScript 对象描述DOM 的层次结构。DOM的一切属性都在虚拟DOM 有对应的属性。 Vue...
  • vue中的render函数

    千次阅读 多人点赞 2021-01-17 16:08:46
    render 函数 跟 template 一样都是创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 render 函数
  • vue中执行异步函数asyncawait的用法

    千次阅读 2021-12-27 10:41:15
    在开发,可能会遇到两个或多个函数异步执行的情况,对于Vue中函数的异步函数执行做了一个小总结,如下: 异步执行使用asyncawait完成 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:05
    Vue中使用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中computedwatch的区别

    千次阅读 多人点赞 2022-04-09 19:15:49
    今天简单说一下computedwatch的区别。 先看代码,两者怎么实现的。 <div id="app"> <input type="text" v-model="firstName"><br> <input type="text" v-model="lastName"><br> ...
  • 的生命周期函数的不同#2.1Vue2.与Vue3.创建实例#2.2Vue3.的setup()在哪一个阶段执行?#3. Vue3.,生命周期函数的各个函数的执行解析。每个阶段都做了什么!#3.1beforecreate()#3.2created()#3.3beforeMount()#...
  • 1 在vue文件 queryTage为vue文件函数方法 通过挂载在window上实现 mounted() { window.queryTage=this.queryTage; }, 2 在js文件如何调用 window.queryTage()
  • vue中class绑定函数

    千次阅读 2020-12-14 10:39:27
    vue中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:36
    searchFile: debounce(function() { this.getSysIpcPageFile() ...不知道你使用在Vue-methods里面使用 this.fn() 调用你所写的方法 实际上在这里@input=searchFile的时候就已经进行了this.searchFile 进行调用this指向
  • 文档:028-vue中事件绑定函数加括号不加括?..链接:http://note.youdao.com/noteshare?id=1f216ee8add93e5bafd9e7b80d3849db&sub=562FC24E3F514599914A066B513B9BD1
  • vue组件的data函数

    千次阅读 2021-10-04 13:51:27
    vue 的data函数 组件是一个单独功能模块的封装,这个模块有属于自己的HTML模板,也应该有属于自己的数据data vue组件的数据是不能保存在 vue实例的data的。 明确 vue组件的data 是一个函数 data必须是...
  • 1、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() /...
  • 1.在一个{{message}}模板 可以添加多个filter 函数对message 处理 2.在filter可有传多个参数,但是filters的function的默认第一位参数 为 当前的message的值 value,所以在写函数的时候应注意,自定义的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 280,575
精华内容 112,230
关键字:

vue中方法和函数的区别