Vue-笔记(1)

var vm = new Vue({
    el: '#app',  // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
    // 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
    data: { // data 属性中,存放的是 el 中要用到的数据
        msg: '欢迎学习Vue' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
    },
    methods: {}, // 这个 methods属性中定义了当前Vue实例所有可用的方法
    computed:{
    	// 在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】, 计算属性的,本质,就是 一个方法,只不过,我们在使用 这些计算属性的时候,是把 它们的 名称,直接当作 属性来使用的;并不会把 计算属性,当作方法去调用;
    	// 计算属性,在引用的时候,一定不要加 () 去调用,直接把它 当作 普通 属性去使用就好了;
    	// 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会 立即重新计算 这个 计算属性的值
    	// 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,任何数据都没有发生过变化,则不会重新对 计算属性求值;
    	'计算属性名称': function(){},
    },
    filters:{ // 定义私有过滤器
    	过滤器名称: 处理函数
    },
    directives: { // 自定义私有指令
    	'指令名称': {
    		bind: function(el, binding) { ... }
    	},
    	'指令名称': function(el, binding){
    		// 注意:这个 function 等同于 把 代码写到了 bind 和 update 中去
    	}
    },
    components: { // 定义实例内部私有组件的
        '组件名称': {
          template: '模板Id或模板内容',
          data(){
          	return { ... };
          },
          props: [], // 组件中的 所有 props 中的数据,都是通过 父组件传递给子组件的 props 中的数据,都是只读的,无法重新赋值
          directives: {},
          filters: {},
          components: {},
          methods: {
          	方法名(){}
          }
        }
    },
    beforeCreate() { // 生命周期函数,表示实例完全被创建出来之前,会执行它
        // 注意: 在 beforeCreate 生命周期函数执行的时候,data 和 methods 中的 数据都还没有没初始化
    },
    created() { //生命周期函数
        //  在 created 中,data 和 methods 都已经被初始化好了!
        // 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作
    },
    beforeMount() { // 生命周期函数,表示 模板已经在内存中编辑完成了,但是尚未把 模板渲染到 页面中
        // 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串
    },
    mounted() { // 生命周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经可以看到渲染好的页面了
        // 注意: mounted 是 实例创建期间的最后一个生命周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时,如果没有其它操作的话,这个实例,就静静的 躺在我们的内存中,一动不动
    },
    // 接下来的是运行中的两个事件
    beforeUpdate() { // 这时候,表示 我们的界面还没有被更新【数据被更新了吗?  数据肯定被更新了】
        // 得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步
    },
    updated() {
        // updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的
    },
    watch:{
    	// 可监听 data 中指定的数据变化,然后出发这个 watch 中对应的 function 处理函数
    	'data中定义的变量':function(newVal, oldVal){},
    	// 可监视路由地址的改变
    	// this.$route.path
    	'$route.path':function(newVal, oldVal){},
    },
    router: router
});
// 创建一个路由对象
var router = new VueRouter({
	routes: [
		{ path: '/', redirect: '/login' },
		{ path: '/login', component: login },
		{ path: '/register', component: register }
	],
	linkActiveClass: '激活相关的类'
});

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
`vue-property-decorator` 是一个用于在 Vue 中使用装饰器语法的库,它提供了一些装饰器来简化 Vue 组件的开发过程。这些装饰器可以用于定义组件的属性、方法、计算属性、生命周期钩子等。 以下是一些常用的装饰器和它们的用法: - `@Component(options?: ComponentOptions)`:将一个类声明为一个 Vue 组件。可以传入一个可选的 `ComponentOptions` 对象来配置组件选项,例如 `template`、`props`、`computed` 等。 - `@Prop(options?: (Vue.PropOptions | Vue.Constructor[] | Vue.Constructor)[] | Vue.PropOptions)`:定义一个组件的 prop 属性。可以传入一个可选的 `PropOptions` 对象来配置 prop 的类型、默认值等。 - `@Watch(path: string, options?: WatchOptions)`:监听一个属性或表达式的变化,并在变化时执行相应的方法。可以传入一个可选的 `WatchOptions` 对象来配置监听选项,例如 `deep`、`immediate` 等。 - `@Emit(event?: string)`:将一个方法标记为触发事件的方法,并指定要触发的事件名。可以传入一个可选的事件名,默认为方法名。 - `@Ref(refKey?: string)`:获取子组件或 DOM 元素的引用,并将其赋值给指定的属性。可以传入一个可选的引用键,默认为属性名。 - `@Inject(key?: string | symbol)`:注入一个父组件提供的属性或方法。可以传入一个可选的注入键,默认为属性名。 - `@Provide(key?: string | symbol)`:在组件中提供属性或方法,以供子组件注入使用。可以传入一个可选的提供键,默认为属性名。 - `@Model(event?: string, options?: (PropOptions | Constructor[] | Constructor)[] | PropOptions)`:将一个 prop 属性设置为组件的 v-model。可以指定要触发的事件名和 prop 的配置选项。 这些装饰器可以与 `vue-class-component` 一起使用,帮助我们更清晰、简洁地定义 Vue 组件,并提供更好的类型支持和可读性。 希望这些笔记对你有所帮助!如有任何疑问,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值