vue computed 传参_Vue的构造选项

vm的构造函数图解：

vm.__proto__===Vue.prototype
Vue.__proto__===Function.prototype
vm封装了Vue对象，用于对对视图的所有操作，数据读写、时间绑定、DOM更新。vm称之为Vue的实例或Vue的对象。实例结构：

const vm=new Vue({options
})

options称之为构造选项

构造选项（options）

分类

生命周期：data、props、computed、methods、watch
DOM操作：el、template、renderError
生命周期钩子:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed
资源:directives、filters、components
组合:mixins、extends、provide、inject

入门属性

挂载点，可以与$mount有替换关系。举例：

const vm=new Vue({options
})
vm.$mount("#frank")

data

内部数据，有对象和函数两种形式，优先使用函数。举例：

data(){return{n:0}
}

methods

方法，事件处理函数或者普通函数。事件处理函数一定要放在methods里面，否则会报错。 filter方法过滤，举例：

new Vue({data(){return{array:[1,898,354,4545,7485]}},template:`<div>{{filter()}}</div>`,//渲染methods:{filter(){return this.array.filter(i=>i%2===0)}}
})

这里面可以引出methods的bug，进行渲染的时候，每一次渲染都会执行。

components——组件

组件可以扩展HTML元素，封装重复使用的代码。

举例：方法一,引用另一个vue文件，然后另外那个vue文件用到本文件的相应位置。

//引用，demo是组件名
import demo from "./demo.vue"
new Vue({components:{//给vue起名Frank:demo},template:`<div>//调用组件，渲染到页面<Frank/></div>`
})

举例：方法二，方法二就是把方法一的外面组件的内容写到了main.js里面。

Vue.component('Demo2',{template:`<div>Demo2组件内容</div>`
})
new Vue({template:`<Demo2/>`
})

方法三：

new Vue({components:{Frank:{data(){return {n:0}},template:`<div>n:{{n}}</div>`}}
})

小结：

优先使用第一种方法，基于模块化的原则
组件名最好大写字母开头，文件名小写字母开头
组件起名时，如果前后相同，可以缩写。如Demo:Demo,缩写为components:{Demo}

四个钩子

created：实例出现在内存中
mounted:实例出现在页面中
updated:实例更新了
destroyed：实例消亡了

new Vue({created(){console.log('实例出现在内存中')},mounted(){console.log('实例出现在页面')},updated(){console.log('实例的数据更新了')}
})

props——外部属性

Demo.vue:声明

<template><div class="red">//this指代下面声明的属性{{this.message}}</div>
</template>
<script>
export default {//此处的message是声明的属性，main.js后面用到的就是这个props:['message']
}
</script>

main.js：传参

import Demo from './Demo.vue'new Vue({//组件components:{Demo},//参数值template:`<div><Demo message="你好，props"/></div>`
}).$mount('#frank')

如果想将data里面的数据传到组件里，怎么做？在message前面加冒号。在message前面加冒号之后，引号里面的东西就变成了变量，不再是字符串。

main.js:

import Demo from './Demo.vue'new Vue({//组件components:{Demo},//数据data() {return {n:1}},//参数值template:`<div>//注意冒号<Demo :message="n"/></div>`
}).$mount('#frank')

vue computed 传参_Vue的构造选项相关推荐

vue路由+ elementUI表格组件：loop文章列表页enter内容页（vue路由传参userid）- 代码篇
elementUI表格组件,response.data.newsLists列表如何循环出来?如何点击传参numId,并进入对应的内容页? 本文意图: 使用官方table组件:实现API调用:文章遍历. ...
Vue路由传参params 与 query
一.路由传参分为 params 传参与 query 传参 1. params params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显示在地址栏中(但是不能刷新).par ...
vue 路由传参 params 与 query两种方式的区别（转载）
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue页面传参（多个参数传值）与接参 - 代码篇
index.js路由规则设定: /searchResult/syyName=:syyName 发送页面: //传参页面 this.$router.push({name: 'SearchResult', ...
vue 路由传参 params 与 query两种方式的区别
vue 路由传参 params 与 query两种方式的区别初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: ro ...
vue路由传参的三种方式/含页面刷新参数丢失解决方案(详细)
vue路由传参的三种方式以及页面刷新参数丢失问题一.路由传参的三种方式 1.传参方式一:params传参 2.传参方式二:路由属性配置传参 3.传参方式三:query传参二.三种传递方式的区别一 ...
详解vue路由传参的三种方式
在我们开发vue项目的时候,路由传参几乎是我们必须要用到的,一般出现场景是,当我们点击某个组件的某个按钮时跳转到另一个组件中,并携带参数,便于第二个组件获取数据.下面我就来说说vue路由传参的三种方式 ...
vue路由传参，对参数值编码处理
vue路由传参: 问题: 很明显vue路由传参在没有任何处理的情况下,参数值会裸露在URL中,这并不是我们所希望的.但因为某些因素一定要用路由传参,最起码也要对这种裸露在URL中的参数值做个编码 Ja ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
【vue】vue路由传参的三种方式
前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示 ...

vue computed 传参_Vue的构造选项

构造选项（options）

四个钩子

props——外部属性

vue computed 传参_Vue的构造选项相关推荐

最新文章

热门文章