Vue 02

开始之前 再回忆一下es5 es6中的数组操作方法,在vue和react 中会大量运用

1. arr.filter((item,index)=> 条件 )ES5 返回新数组 不改变原数组
 返回值为true就把该元素添加到新数组里面
 发回值为false 就不添加该元素

 而arr.splice 则改变原数组

2.ES5 arr.map(item,index) =>条件) 用来操作数组 并放回一个新数组

　　question: map和forEach 的区别?

　　answer: forEach不会返回数据,对数组操作会改变原数组

　　而map不会改变原数组数据,而是返回一个新数组.

3.ES5 arr.some((item,index) =>条件) 检查数组中某些值是否符合条件,只要有一个值符合条件 返回值则为true

4.ES5 arr.every((item,index) =>条件) 检查数组中所有值是否符合条件,只有全部符合条件才为true

5. ES6 arr.find((item,index) =>条件) 返回通过第一个数组元素的值

6. ES6 arr.findIndex((item,index) =>条件)返回通过测试的第一个元素的索引

07 json-server(自己制作一个后台的接口文档数据库)

resetFul风格的接口文档

1 同一个接口 /user

1) get 查询

2） post 添加

3） delete 删除

4） put 更新

1 安装 npm i json-server -g

2 创建一个数据库 组路径自定义 ./data/db.json

3 json-server db.json路径

4 查询 get请求

baseURL = http://192.168.1.137:3000

method  get
url  /user
可选参数
 username     string             用户名
 password     string             密码
 
success:
[
   {username:""，password:"",id},
]
fail 
[]

5. 添加 post请求

method  post
url   /user
必须参数
username   string
password   string  

08 生命周期

生命周期 组件从创建到销毁 （钩子函数） 自动就触发

1 创建前   beforeCreate   获取不到data
2 创建后   created
3 挂在前    beforeMount     
4 挂在后   mounted
5 更新前   beforeUpdate
6 更新后   updated
7 销毁前   beforeDestroy   
8 销毁后    destroyed

09 watch 监听

1 自动触发 监听对象或者数值发生发生改变的 时候会自动执行函数

2 两种写法

1 普通监听 只能监听原始类型数据 number string boolean ..

 watch: {
      // 函数名字就是监听数据的变量名 （data里面的数据名字）
      n() {
          this.yf = this.n >= 10 ? 20 : 0;
      },
  },

2 深度监听 引用类型

user: {
     //函数名字别改  
     handler() {
         console.log("user_ok");
     },
     deep:true, 设置深度监听
     immediate: true, //初始化的时候执行
 },

10 computed 计算属性

1 函数名 不能与 data和methods里面的属性和方法重复

2 必须要有返回值 return

3 使用的时候不需要加括弧（）

4 一般情况下与watch使用区别不大

computed: {
     yf() {
     // console.log("ok");
             return this.money >= 58 ? 0 : 6;
     },
 },

11 watch,computed,methods 区别

1 作用一直 修改数据 处理业务逻辑

2 methods 它的使用 一般都是主动调用 通过自调用或者和事件一起用

3 watch 和 computed 是自动调用的 监听了数据改变自动执行函数

4 选择watch还是computed

1 如果一个属性影响多个值 选择用watch合适

2 不需要渲染的触发的时候用watch

　　其它全用computed

12 修饰符

1 事件修饰符

1 .stop 阻止冒泡

2 .prevent 阻止默认

3 .self 只有点击自己本身的时候触发

4 .once 触发一次

5 .capture 捕获阶段

6 .passive 滚动

7 .native

2 键盘修饰符

@keyDown.数字 keyCode 码

@keyDown.键名 （不是所有的键名都能用）

3 鼠标修饰符

.left

.right

.middle

4 v-model 修饰符 （表单）

v-model.lazy 把input事件修改 change事件

v-model.number 转数字

v-model.trim 去首位空格

13 组件 特别特别重要 （）

组件名字 如果驼峰命名 例如 myHeader <my-header> <myHeader></myHeader>错误

1 全局组件

Vue.component('组件名'，{
    data(){
        return {}
    },
    template:"模板"  模板值识别一个子元素
})

<组件></组件>

2 局部组件 -- 注册再使用

const myHeader = {
      data(){
        return {}
    },
    template:"模板"  模板值识别一个子元素
}
new Vue({
    components:{
        myHeader
    }
})
<my-header></my-header>

3 template 只识别一个子元素

1  template  :"<button></button>"
2  template :"id"     <template id="id"></template>
3  template :"id"     <script type="text/template"></script>