Vue.js开发基础 (一）

        1.vue的基本使用

【vue.js使用流程】 1.导入vue.js。 2.准备好界面。 3.实例化一个vue，并且将这个界面交给vue管理。 4.{{ vue里的变量 }}，可以输出这个变量的值。 

【小结】 el属性：找到某个盒子，并把他交给vue管理。 data属性：vue里放数据的地方。

2.Vue 根实例

 Vue.js遵循MVVM模式，因此使用Vue.js的核心工作就是创建一个“视图模型（ViewModel）”对象，作为视图层和模型层的桥梁。

Vue.js的做法就是提供Vue类型，开发者可通过创建一个Vue类型的实例来实现视图模型的定义。（即创建Vue实例）

通常一个应用中只能有一个唯一处于最上层的Vue实例，这个Vue实例就称为“Vue根实例”。（一般称之Vue实例即可）

在这个实例对象中，可以设定很多选项（el、data），这些选项指定了这个对象的行为，即它与页面如何配合工作。

2.1插值语法

语法：{{ 表达式 }}

表达式：变量名。或任意表达式；算数表达式，比较表达式，逻辑表达式，三元表达式...

作用：输出表达式的结果

注意：不能写语句       （分支语句、循环语句）

补充：插值语法，也被叫做胡子语法。

2.2插入HTML片段/v-text、v-html 

【v-text与v-html】

·v-text相当于原生的innerText ·v-html类似于原生的innerHTML

·语法：   <标签 v-text=“数据”></标签>   <标签 v-html=“数据”></标签>

·特点：   会把数据内容放到双标签里展示， 但是v-text遇到标签不会解析，只是当纯文本，v-html遇到标签会解析， 他们都会覆盖标签内原有的内容。

2.3 v-model 

 

【v-model指令】 ·这个指令一般是给表单元素使用的。 （输入框、密码框、单选框、文本框、下拉框...)

·作用：可以获取表单元素的值，  也可以设置表单元素的值。

·语法：<表单元素 v-model=“变量”></表单元素>

·补充：是一种双向奔赴 

*3.vue实例的生命周期
定义：Vue.js会自动维护每个 Vue实例的生命周期，也就是说，每一个Vue实例都会经历一系列的从创建到销毁的过程。例如，创建实例对象、编译模板、将实例挂载到页面上以及最终进行销毁等。在这个过程中，Vue 实例会在不同阶段的时间点向外部暴露出各自的回调函数，这些回调函数又称为“钩子函数”，开发人员可以在这些不同阶段的钩子函数中定义业务逻辑。（书上的）

1、什么是vue生命周期

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

作用：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑

2、生命周期钩子 ：就是生命周期事件的别名而已；

3、生命周期和生命周期钩子的关系

生命周期钩子 = 生命周期函数 = 生命周期事件

*主要的生命周期函数

核心的8个钩子函数

根据使用阶段生命周期函数主要分为以下几类：

 1、 创建期间的生命周期函数

      （1） beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
      （2） created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
      （3） beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
      （4）mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

 2、运行期间的生命周期函数

     （5） beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
     （6）updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

 3、销毁期间的生命周期函数

     （7） beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
     （8） destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 （vue实例的生命周期借鉴）看了包会的vue实例的各个生命周期详解_谁是听故事的人的博客-CSDN博客