Vue的开始

本文介绍了Vue.js的基础使用,包括创建Vue实例、生命周期的理解及其关键函数的调用顺序,以及组件化的概念和实现。通过Vue.extend创建子组件,注册并使用组件,讲解了组件的命名规范和嵌套。同时,阐述了Vue CLI的安装和项目启动流程,以及单文件组件的结构和暴露方式。最后提到了render函数和脚手架的默认配置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、如何开始使用:创建一个Vue实例对象,给它传入配置对象,配置对象中有el属性、data属性、methods属性、mounted方法
el属性,用来指定容器;data属性,用来指定数据;methods属性,用来指定方法;mounted方法,当Vue完成模板的解析并把初始的真实dom元素放入到页面后,调用此方法;

2、生命周期,又称生命周期回调函数、生命周期函数、生命周期钩子。它是Vue在关键时刻帮我们调用的一些特殊名称的函数,它的名字不能更改,但函数的具体内容是程序员根据需要写的,this指向组件实例对象
Vue实例的生命周期:4对
挂载流程:初始化生命周期和函数,数据代理还未开始,调用beforeCreate函数;初始化数据监测和数据代理,调用created函数;开始解析模板,生成虚拟dom,页面还不能显示解析好的内容,调用beforeMount函数;将内存中的虚拟dom转为真实dom插入页面,挂载完毕,调用mounted函数###,一般在此进行开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作;
更新流程:此时数据是新的,页面是旧的,页面尚未和数据保持同步,调用beforeUpdate函数;根据新数据,生成新的虚拟dom,随后与旧的虚拟dom进行比较,最终完成页面更新,此时数据和页面都是新的,即页面和数据保持同步,调用updated函数;
销毁流程:调用销毁函数,会触发beforeDestroy函数###(此时data,methods都处于可用状态,马上要执行销毁过程,一般在此阶段,关闭定时器,取消订阅信息,解除自定义事件)和destroyed函数

3、组件化编程
传统方式编写应用,代码复用率不高
模块:复用js,向外提供功能的js程序
组件:实现应用中 局部功能代码 和 资源 的集合,复用编码,提高运行效率
组件化,应用中的功能是多组件的方式编写的,那么这个应用就是一个组件化的应用
3.1 非单文件组件:一个文件中包含n个组件
过程:创建子组件,调用Vue.extend函数,传入配置对象,配置对象中不能写el配置项,配置对象中data必须写成普通函数,添加template属性,填入模板(结构),必须有一个根元素,可以在name配置项中编写组件在开发者工具中的名称;注册子组件,所有组件都要经历vm的管理,(局部注册)在父组件中添加components属性,填入子组件,(全局注册,在全局调用Vue.component函数,传入组件名和组件位置,这样都可以用此子组件);使用组件,在父组件容器内填写子组件标签(写非单文件组件没有高亮,但能学到很多)
注意:组件名,一个单词组成,可首字母大写或小写;多个单词组成,每个单词小写,且用-连接,或采用驼峰式写法(需要Vue脚手架支持)
组件的嵌套:子组件里面也可以嵌套组件,添加components属性(注册组件),填入嵌套的组件名,使用组件,在子组件中使用嵌套的组件;app组件,一人之下万人之上,vm之下,其他组件之上
VueComponent:子组件本质是一个VueComponent构造函数,是Vue.extend生成的;Vue解析时,会帮我们创建子组件的实例对象;每次调用Vue.extend,返回的是一个全新的Vuecomponent;this指向问题,组件配置中,this指向VueComponent实例对象,简称vc,new Vue()配置中,this指向Vue实例对象,简称vm,vm管理着vc;
一个重要的内置关系:VueComponent.prototype.proto === Vue.prototype,让组件实例对象vc 可以访问到 Vue原型上的属性/方法
在这里插入图片描述

3.2 单文件组件:一个文件中只有一个组件
如何写.vue文件(组件):先在vscode安装插件,在文件里可以写template标签(结构,此标签不参与编译)、script标签(交互)、style标签(样式)
如何向外暴露:分别暴露,export;统一暴露,export{school,student};默认暴露,export default school,引用时import school from " ";
App组件,汇总所有组件;main.js创建Vue实例,并指明为那个容器服务;index.html写页面,准备容器
4、创建脚手架(Vue CLI,cli 是命令行接口工具)
官方提供的标准化开发工具(开发平台),
具体步骤:第一步,全局安装@vue/cli,npm install -g @vue/cli;切换到你要创建的目录,然后使用命令创建项目,vue create xxx;启动项目,npm run serve
render函数(渲染内容):参数是一个函数(创建具体的元素),调用参数函数(传参)并将结果返回
脚手架默认配置:public文件夹,src文件夹,main.js ,这些不能改

Vue.js 是一款流行的 JavaScript 前端框架,可以用于构建单页面应用程序(SPA)和动态用户界面。如果你想开始使用 Vue.js 编写代码,可以按照以下步骤: 1. 安装 Vue.js:在命令行中使用 npm 命令安装 Vue.js,例如:`npm install vue`。 2. 创建 Vue 实例:在 HTML 页面中引入 Vue.js,并创建一个 Vue 实例,例如: ``` <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> ``` 上面代码中,我们创建了一个 id 为 `app` 的 `div` 元素,并将其作为 Vue 实例的挂载点。在 `data` 选项中,我们定义了一个名为 `message` 的属性,其值为 `'Hello Vue!'`。在 HTML 中,我们通过双大括号语法 `{{ }}` 来绑定数据,这里绑定的是 `message` 属性的值。 3. 组件化开发:在 Vue.js 中,我们可以将页面拆分成多个组件,每个组件都是一个 Vue 实例。在组件中,我们可以定义自己的数据、方法、生命周期钩子等,然后将组件组合起来构建完整的应用程序。例如: ``` <div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<div>{{ message }}</div>', data: function () { return { message: 'Hello Vue!' } } }) var app = new Vue({ el: '#app' }) </script> ``` 上面代码中,我们定义了一个名为 `my-component` 的组件,并在 HTML 中使用 `<my-component></my-component>` 标签来引用它。在组件中,我们使用 `template` 选项定义了组件的模板,并在 `data` 选项中定义了一个名为 `message` 的数据属性。最后,我们在 Vue 实例中将 `my-component` 组件注册为全局组件。 以上是 Vue.js 的基础入门,建议你先学习 Vue.js 的基础语法和组件化开发,然后深入学习 Vue.js 的路由、状态管理、自定义指令等高级特性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

두단단

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值