vue中的export default和new Vue({})
vue中的export default和new Vue({})Vue 是什么? 相当于一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。1.export defaultexport default :相当于提供一个接口给外界,让其他文件通过 import 来引入使用name:相当于全局idcomponents:component:组件computed
·
vue中的export default和new Vue({})
Vue 是什么? 相当于一个构造函数,生成的实例是一个巨大的对象,可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
1.export default
export default :相当于提供一个接口给外界,让其他文件通过 import 来引入使用
name: 相当于全局id
components:
component: 组件
computed:
methods:
data:
import Confirm from '../sub/Confirm';
export default {
name : "First",//全局id
// components 组件注册
components: {
Confirm
},
// 注册属性
props: {
name: {
type: String,
default: "父组件"
},
},
created() {
// created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
},
mounted() {
// mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
},
// data() 为变量赋值等
data() {
return {
msg: "Welcom to FirstApp"
};
},
// methods 编写js函数
methods: {
getMessage(val) {
alert(val);
}
}
}
2. new Vue({})
渲染的时候,可以使用构造 Vue 实例的方式来渲染相应的 html 页面
new Vue({}), 是创建一个Vue的实例 相当于创建一个根组件
el: 绑定元素
data: 存放数据
methods: 方法
watch: 监听
computed: 这里面也有方法
最后两个都是监听vue属性,但是computed属性中需要一个返回值,而且代码是同步执行;
watch则不需要,代码也可以是异步的
new Vue({
el: '#app',
data: {
message: 'message'
}
})
var vm = new Vue({
})
3.data()与data
export default{
data(){
return {
message: 'message'
}
}
}
new Vue({
el: '#app',
data: {
message: 'message'
}
})
在大型项目中data会造成数据污染(data是全局的)
将data封装成一个函数,我们在实例化组件的时候只是调用了这个函数生成的数据副本,这就避免了数据污染,没有直接操作源数据,推荐这样用。
更多推荐
已为社区贡献1条内容
所有评论(0)