响应式数据绑定指的是vue.js会自动对页面中的某些数据的变化做出响应.(v-model指令可以实现数据的双向绑定)

组件化开发指的是vue.js通过组件,把一个单页应用中的各种模块拆分到一个个单独的组件(component)中,我们只要先在父级组件中写好各种组件标签,并且在组件标签中写好要传入组件的参数,然后在写好各种组件的实现,整个应用就可以完成了.

demo容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法

{{xxx}}是Vue的语法:插值表达式,{{xxx}}可以读取到data中的所有属性

一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)

双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data

注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”

特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉(display:none)

备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到

Vue 实例有一个完整的⽣命周期,也就是从new Vue()、初始化事件(.once事件)和生命周期、编译模版、挂载Dom – 渲染、更新 – 渲染、卸载 等一系列过程,称这是Vue的生命周期。

created(创建后):实例创建完成,实例上配置的 options 包括 data、computed、watch、methods 等都配置完成,但是此时渲染得节点还未挂载到 DOM,所以不能访问到 $el属性。

beforeMount(挂载前):在挂载开始之前被调用,相关的render函数首次被调用。此阶段Vue开始解析模板,生成虚拟DOM存在内存中,还没有把虚拟DOM转换成真实DOM,插入页面中。所以网页不能显示解析好的内容。

mounted(挂载后):在el被新创建的 vm.$el(就是真实DOM的拷贝)替换,并挂载到实例上去之后调用(将内存中的虚拟DOM转为真实DOM,真实DOM插入页面)。此时页面中呈现的是经过Vue编译的DOM,这时在这个钩子函数中对DOM的操作可以有效,但要尽量避免。一般在这个阶段进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件等等

beforeUpdate(更新前):响应式数据更新时调用,此时虽然响应式数据更新了,但是对应的真实 DOM 还没有被渲染(数据是新的,但页面是旧的,页面和数据没保持同步呢)。

updated(更新后) :在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。此时 DOM 已经根据响应式数据的变化更新了。调用时,组件 DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy(销毁前):实例销毁之前调用。这一步,实例仍然完全可用,this 仍能获取到实例。在这个阶段一般进行关闭定时器,取消订阅消息,解绑自定义事件。

destroyed(销毁后):实例销毁后调用,调用后,Vue 实例指示的所有东西都会解绑定,所有的事件会被移除,所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。

到此这篇关于vue快速入门基础知识教程的文章就介绍到这了,更多相关vue快速入门教程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

这篇文章主要介绍了vue 重塑数组之修改数组指定index的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

Vite处理html模板插件之vite-plugin-html插件使用

vue、uniapp中动态添加绑定style、class 9种实现方法

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注