Vue 组成、语法

 

目录

Vue文件的组成

1.模板template区域

2.脚本script区域

3.样式style区域，写css代码

export default { }  //导出当前vue对象

函数与计算属性的区别

Vue语法&指令

1.{{表达式}} 文本插值

2.v-text文本插值

3.v-html 原始html

4.v-model绑定表单元素的value属性（双向绑定）

 5.使用v-on: 注册事件，或者@

6.v-bind:   或者  ：   绑定动态属性 Attribute

7.v-if 控制元素的显示和隐藏，绑定一个布尔变量

8.v-show控制元素的显示和隐藏，绑定一个布尔变量

 9.v-for用于遍历数组进行插值

MVVM设计模式

Vue组件的生命周期和钩子函数

为什么mounted是最常用的

写生命周期钩子函数的目的是什么？

小练习

---

Vue文件的组成

它有3部分组成

App.vue是主组件，启动项目后访问的首页就是它

1.模板template区域

写html代码，template标签内只能有一个根标签(可以嵌套子标签 但不能有兄弟标签)

<template>

        <div>

                <div>

                </div>

        </div>

</template>

如果有多个根标签

 

2.脚本script区域

写JavaScript代码的地方

<script>

</script>

3.样式style区域，写css代码

<style>

</style>

export default { }  //导出当前vue对象

里面有3个重要成员

1.data函数用于注册全局变量（注意return{}不能少）

2.methods对象，用于注册全局函数

3.computed对象，用于注册全局计算属性

 

函数与计算属性的区别

相同点：

        1.都是函数

        2.都可以访问data中注册的全局变量  但是要使用this

不同点：

        1.函数定义在methods中，计算属性定义在computed中

        2.在使用 {{ }} 插值的时候 

                  {{ 函数（）}} --需要括号   让函数执行得到返回值  然后将返回值作为文本插入在div中

                  {{计算属性}} --不需要括号 因为在运行时已经不是一个函数  而是一个计算好的属性

                        计算属性 -- 在编译时已经计算好的属性

        3.计算属性的性能是优于函数的

        4.计算属性会在操作的变量的值发生改变的时候  立即重新计算一次

             函数是每次调用都重新计算

     

Vue语法&指令

1.{{表达式}} 文本插值

表达式可以是以下内容

    1）定义在data函数中的return中对象中的属性

    2）定义在methods中的函数的返回值

 

    3）定义在commputed中的函数的返回值

 

    4）定义在props中的变量

2.v-text文本插值

作用等同于{{ }} 但是没有{{ }}灵活

{{ }} 是 v-text 的语法糖

 

3.v-html 原始html

作用等同于{{ }}  不过插入的值会被当作html代码片段处理

 

4.v-model绑定表单元素的value属性（双向绑定）

 5.使用v-on: 注册事件，或者@

@是v-on的语法糖   语法糖就是简写 用起来更香

6.v-bind:   或者  ：   绑定动态属性 Attribute

:  是 v-bind:的语法糖

什么是Attribute？

<a href = " "></a>

<img src = "" />

<div id=""  class = "" ></div>

.................

href , src , id , class 等都是元素的属性

什么是动态Attribute？

随着输入改变

有一些特殊的属性可以绑定一个布尔值来改变属性的取值

属性名和属性值一样的

checked = 'checked'

selected = 'selected'

readonly = 'readonly'

disabled = 'disabled'

........................

7.v-if 控制元素的显示和隐藏，绑定一个布尔变量

 布尔值为false，会直接将元素从dom树中移除

8.v-show控制元素的显示和隐藏，绑定一个布尔变量

布尔值为false，不会将元素从dom树中移除，而是添加一个display：none

dom树就是html文档树 

v-if是注释掉

v-show是添加display：none

 

 9.v-for用于遍历数组进行插值

 

 

MVVM设计模式

Vue框架使用的是MVVM设计模式

M：model        数据模型

V：view           视图

VM：ViewModel           虚拟dom

 

 

Vue组件的生命周期和钩子函数

一共有8个钩子函数

这些函数不同于定义在methods里面的函数

        （methods中函数自己定义，自己调用，函数名自定义）

钩子函数有以下特点：

        1.函数名不能自定义，必须使用官方规定的函数名

        2.程序员只需定义，无需调用，因为在程序运行期间，vue会自动调用

 

为什么mounted是最常用的

此时数据和视图都已经出现了

1.在mounted函数中获取上一个页面传过来的数据

2.在mounted函数中发起ajax请求后端拿去数据

3.  。。。。

    

写生命周期钩子函数的目的是什么？

为了在某个阶段执行一些你想要执行的操作

 

 

小练习

视图会自动更新