目录
export default { } //导出当前vue对象
6.v-bind: 或者 : 绑定动态属性 Attribute
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. 。。。。
写生命周期钩子函数的目的是什么?
为了在某个阶段执行一些你想要执行的操作
小练习
视图会自动更新