小程序做完了，所以今天开始继续学习vue 主要学了vue的一些原理和指令~明天也要加油鸭

        其实我是看过书的，但是没有敲代码，而且vue真的太方便了！！所以感觉学起来还挺舒服的，今天主要是进行一些基础的学习：

        vue是一套用于构建用户界面（用vue往html页面中填充数据）的前端框架，框架是一套现成的解决方案。程序员只能遵守框架的规范，去编自己的节业务功能。
        学习vue就是学习vue框架中规定的用法。比如学习vue的指令、组件（是对UI结构的服用）、路由、Vuex、Vue的组件库；只有把这些都掌握，才有开发vue项目的能力。首先我们对它进行基本的了解

vue特性：
数据驱动视图：是单向的数据绑定，但是当页面数据发生变化时，页面会自动重新渲染，不用再去操作DOM；
双向数据绑定：在网页中form表单负责采集数据，Ajax负责提交数据。不再需要手动操作dom元素来获取表单元素最新的值。js数据的变化会被自动渲染到页面上，页面上表单采集的数据发生变化的时候，会被vue自动获取到并更新到js数据中。

MVVM：model指的是当前页面渲染时所依赖的数据源；view表示当前页面所渲染的dom结构；viewmodal表示vue的实例，他是MVVM的核心，是他把数据源和页面的结构连接在了一起。

写一个vue为框架的html流程：

1. 导入vue.js的script脚本文件；
2. 在页面中声明一个将要被vue所控制的dom区域；
3. 创建vm实例对象

---

指令的概念：是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构
指令的分类：内容渲染指令；属性绑定指令；事件绑定指令；双向绑定指令；条件渲染指令；列表渲染指令

一、内容渲染指令：辅助开发者渲染dom元素的文本内容，常有的有三个：

1. v-text:就是把它的(data里的name的)值渲染到标签里，会覆盖原有标签的内容，比如<p v-text='sex'>性别</p>，这时data里面的sex的值会覆盖性别，只显示值
2. {{}}语法，叫插值表达式，专门解决内容覆盖默认文本内容的问题。在实际开发中用的最多，知识内容的占位符，不会覆盖原有的内容。！只能用在内容节点，不能用在属性节点
3. v-html:如果要把包含html标签的内容渲染出来，要用到这个,能把有标签的字符串渲染成真正的html内容

注意：dom区域最好不要传标签，有多个指定标签名的时候会只渲染第一个标签，所以要在外面包裹一个div

二、属性绑定指令：v-bind可以为元素的属性动态绑定值，这个指令可以简写成 " : "

        在使用v-bind属性绑定期间，如果绑定的内容需要进行动态的拼接，则字符串外面需要包裹单引号
        使用js表达式：在vue提供的模板语法中，除了支持简单的数据绑定，还支持js 语法

三、事件绑定指令：v-on，辅助为dom元素绑定事件监听;简写为@

替换onclick等事件为@click，@keyup等
不传参会默认有个e,如果传参了，事件对象会被传的参数覆盖掉，vue提供了内置变量，名字叫$event，他就是原生dom事件的对象;

按键修饰符 用法@keyup.enter=""
e.preventDefault提供一个@click.prevent，有绑定又有阻止默认行为。

• .prevent 阻止默认行为
• .stop 阻止事件冒泡 e.stopPropagation
• .capture 以捕获模式触发当前的事件处理函数
• .once 绑定的事件只触发一次
• .self 只有在event.target是当前元素自身时的事件处理函数

四、双向数据绑定：在不操作dom的前提下，获取表单的内容

v-bind是单向绑定，数据改变他改变，但是他不能改变数据本身
v-model是双向绑定，改变会互相影响 ，可以改变数据，数据也可以改变他，下图效果：

一般用v-model的场景：1.input输入框，2.textarea 3.select

v-model修饰符：

• .number将输入值自动转化为数值类型
• .trim自动过滤用户输入的首尾空白字符
• .lazy在"change"时而非"input"时更新

五、条件渲染指令：用来辅助开发者按需控制dom的显示与隐藏

v-if 和 v-show:
        v-if如果是false相当于删除，true再创建；如果刚进入页面某些元素默认不需要被展示，而且后期也可能不需要被展示出来，这时候v-if性能好
        v-show是false就是dispaly:none给隐藏起来；频繁切换性能好

v-if也可以和v-else-if v-else等一起用，跟if-else if-else一样

六、列表渲染指令，基于一个数组来循环渲染一个列表结构

v-for:这里的item和index不光子元素可以访问，父元素本身也可以访问。

<tbody>
    <!-- 这里的item和index不光子元素可以访问，tr本身也可以访问 -->
     <tr v-for="(item,index) in list" :key="item.id">
        <td>{{index}}</td>
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
     </tr>
 </tbody>

官方建议只要用到v-for一定要绑定一个:key属性，而且尽量把id作为key的值，key值只能是字符串或数字类型，并且不允许重复；使用index的值当作key的值没有任何意义，因为index值不具有唯一性（只要顺序变了或者传入新值索引就会变），和每项之间没有强制绑定关系

label的for属性：for指向id，动态绑定id，用'重复部分'+item.id

<tr v-for="(item,index) in list" :key="item.id">
      <td>{{index}}</td>
      <td>{{item.id}}</td>
      <td>{{item.name}}</td>
  </tr>

元素删除：remove方法：用filter方法把要删除的过滤掉

this.list.filter(item=>item.id!==id)

添加元素：给文本框v-model.trim绑定一下，去除空格，from表单提交会自动刷新网页，因为form表单有submit事件，@submit.prevent='add',
数组尾部添加调用.push
往表单中添加项的逻辑：

1. 先把添加的品牌对象整理出来
2. 往this.list数组中push步骤一中得到的对象
3. 清空this.brand，让this.nextId自增1

过滤器：

只有vue2及以前的版本能用，用于文本的格式化，定义到filters节点下，本质是个函数。

应用场景：插值表达式和v-bind属性绑定。过滤器添加在js表达式的尾部 | 表示调用过滤器,过滤器中一定要有一个返回值,调用时以过滤器的值为优先项,要拿到过滤器前面的原值只需要加一个形参

私有过滤器和全局过滤器：
定义到vue示例中的过滤器都是私有过滤器，也叫局部过滤器。
全局过滤器：

Vue.filter('capi',str=>{})

两个参数，第一个参数是名字，第二个参数是处理函数
如果全局过滤器和私有过滤器名字一致，此时按照就近原则，调用的是私有过滤器

dayjs插件，安装后导入文件就可以使用dayjs()方法，直接可以调用得到当前时间，带参数调用得到指定时间dayjs(time).format(YYYY-MM-DD HH-mm-ss)

过滤器的其他用法：

1. 1.连续调用过滤器item.time | dateFormat | aa | bb;前面一个过滤器处理的结果作为下一个过滤器的形参，得到最后一个过滤器调用过的结果。
2. 本质是js函数，因为可以接收参数

   message | dateFormat(arg1,arg2) 

   过滤器处理函数的形参列表中，第一个参数永远都是管道符前面待处理的值，第二个函数开始，才是调用过滤器传递过来的arg1和arg2的值,接收函数要从第二个开始接收

   Vue.filter('dateFormat',(msg,arg1,arg2)=>{}

webpack四个现代化：模块化 组件化 规范化 自动化

侦听器：监视data里面的数据变化

watch侦听器：允许开发者监视数据的变化，从而针对数据的变化做一些设置;

• 方法格式侦听器：无法再刚进入页面的时候自动触发一次;如果侦听的是一个对象，对象中的属性改变了，不会触发对象的侦听器

  username(newVal,oldVal){
        console.log(newVal,oldVal)
    }

• 对象侦听器：可以通过immediate选项，让侦听器自动触发；可以通过deep选项让侦听器深度监听对象中每个属性的变化

  username:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
      },
      //默认值false，控制侦听器是否自动触发一次
       immediate:true,
      //默认值false,用于监听对象里属性的变化
      deep:true
   },

计算属性：指的是通过一系列计算之后，最终得到一个属性值，这个动态计算出来的属性值可以被模板结构或methods方法使用

计算属性写在computed里面，定义时候写成方法格式，调用时候用属性方法调用，任何一个属性变了都会重新求值

computed:{
    rgb(){
      return `rgb(${this.r},${this.g},${this.b})`
     }
  }

axios:是一个只专注于网络请求的库，导入库文件就可以直接用了

基本语法：

axios:({
  method:'',
  url:'',
  //url中的查询参数，get请求用params
  params:{},
  //请求体参数，post传参一般用data
  data:{}
}).then(result=>{})

调用axios方法的返回值是个Promise对象。axios给原本的数据封装了一下
如果调用某个方法的返回值是Promise实例，则前面可以添加await，只能用在被async修饰的方法中
解构赋值的时候用 ：进行重命名

1. 1.调用axios之后，使用async/await进行简化
2. 2.使用解构赋值，从axios封装的大对象中，把data属性结构出来
3. 3.把结构出来的data属性用：进行重命名，一般重命名为{data:res}

还有.get 和.post .delete属性，与上述基本语法一致，只是method不用写出来了

axios.get('url',{params:{}})
axios.post('url',{name:'zs',sex:'female'})

还有老师讲的找数据的原理非常的清晰，分享给大家~来源：b站黑马程序员