vue 是什么？
- 尤雨溪 vue.js框架的作者
- 2014年2月，开源了一个前端开发库Vue.js
- Vue.js 是一个JavaScript来编写的框架
前端框架有什么用
- 框架就是给了规则,并实现细节
- 发者按照规则,去实现业务逻辑
- 帮助我们去节省DOM操作的实现细节;
- 将数据与页面的元素挂钩
- 双向数据绑定
- 页面改变影响内存;内存改变影响页面
启动vue
<!--1.引包-->
<script type="text/javascript" src="./vue.js"></script>
<!--2.页面中留坑-->
<div id="app"></div>
<!--3.启动Vue-->
new Vue(options)
<!--4.声明数据、页面、目的地-->
options(选项)
注释：
el: 坑
Vue将template属性结合data属性，将数据渲染到el指定的坑中
{{可以使用过data中的属性}} 插值表达式 也可以调用函数 也可以三元表达式；
v-model="data的属性"
-
options
- el (字符串 或 DOM对象)
- template || render 选其一
- template 字符串，页面视图V(view)
- 只能有一个根节点;
- 在Vue2中不能用body标签;
- template中使用的变量 data一定要声明;
- template中使用的函数 methods一定要声明;
- render 渲染的内容，函数；
render: c=>c(app)
- template 字符串，页面视图V(view)
- data 一个函数, return一个对象；数据(Model)
- methods 一个对象 (功能)； key(函数名)，value(函数体)
常用指令 v-
- 双向数据绑定
v-model="变量名"(变量与页面的关系)- 必须要在data中声明(页面改变影响内存改变)
- 在methods中 使用data的属性
this.xxx - 在template中 使用data的属性 直接用
xxx
-
v-ifv-else是邻居，元素的插入和移除 -
v-show是隐藏与显示 -
v-text双标签、就是元素的innerText -
v-html双标签、就是元素的innerHTML -
v-for 变量名 in 数据- 以数组为数据
v-for=key="index""(ele,index) in arr" : - 以对象为数据
v-for="(value,key,index) in obj" :key="index"
- 以数组为数据
-
v-on:原生事件="表达式 || 函数"- 简写 =>
@原生事件如：@click= "del" - methods 和 v-on的使用
- 简写 =>
-
v-bind:属性="表达式 || 函数"- 简写 => :属性
- class 结合 v-bind使用
- 特殊属性key
:key = "变量值"
组件（components）
-
全局组件
- Vue.component(组件名,组件对象);
-
子组件
- components 一个对象； key是组件名，value是组件对象
-
props 一个数组，元素是字符串，
- 作用：声明子组件接收参数的属性名
-
filter 一个对象； key(过滤器名)，value(函数)
- return最终显示结果
- 调用方式：
{{ 原数据 | 过滤器名(参数1...) }}
-
watch 监视数据
一个对象； key(过滤器名)，value(函数)
默认监视基本数据类型的改变；
复杂数据类型 (如：数组 | 对象)需深度监视
深度监视(包含其属性)：
'hero': {deep:true, handler:fn(){}}-
注意：
watch和页面change事件区别：- change只能监测页面输入后的改变
- watch监视的变量的值的改变：
- 页面改变会影响内存变量值改变；
- 通过js代码修改 可以直接改变变量值
-
computed 是一个对象 (计算属性)
- 增强版的watch，结合多个监视变量加入监视
- key(计算属性的名称)；value(函数)
- return(显示结果)
父子组件属性
- 父用子
- 父：
components: {组件名：组件对象} - 子接收父参数：
props: ['属性名']
- 父：
- 父传子
- 子：
props: ['属性名'] - 父： 通过属性名传递参数
- 常量 属性名= "值"
- 变量 属性名= "变量名"
- 总结：子的数据 = props(是父给你的数据) + data(是自己的数据)
- 子：
子向父组件通讯
- 0-
var vm = new Vue() - 1-
:vm.$on('事件名', 回调函数(形参1, 形参2)) - 2-
:vm.$emit('事件名', 数据1, 数据2) - 补充
-
$once('事件名',fn)只触发一次 -
$off('事件名')关闭事件
-
全局API
- 声明全局对象
Vue.components("组件名", "组件对象")
- 全局过滤器
Vue.fileter(过滤器名,function(v,argv1,argv2){return 显示内容})
过滤器 (filter)
- 对数据添油加醋，改变显示
- 组件内声明过滤器组件内有效
filters: { 过滤器名：function( v, argv1, argv2){ return 显示内容；} }
- 全局过滤器 (全局API有写到)
- 调用过滤器
- {{数据 | 过滤器名(参数1, 参数2)}}
- 组件内过滤器与全局过滤器同名时，优先考虑组件内过滤器
组件生命周期
- 钩子就是事件 (平时听到的 丢一个钩子就是注册一个事件)
- beforeCreate 创建前（数据没有初始化，没有数据）
- created 创建后（可以操作数据；适合操作数据；
v-if="true"） - beforeMount 装载前（没有装载数据到页面）
- mounted 装载后 (数据已装载到页面；适合操作DOM)
- beforeUpdate 更新数据前 (进行二次更新；不建议)
- updated 更新数据后 (引起更新钩子函数触发；获取最新更新)
- activated 激活组件 (结合 keep-alive
v-if="true") - deactivated 组件停用 (结合 keep-alive
v-if="false") - beforeDestroy 销毁之前 (
v-if="false") - destroyed 销毁后 (
v-if="false") - 注：keep-alive组件: 目的是缓存组件，减少频繁的创建销毁组件
- data/methods/components/filter
获取DOM元素
- 在元素上声明 ref= "xxx"
- 在js中使用 this.$refs.span
- js中能使用的地方是 mounted
