vue 菜菜芥籽学习笔记 ---01

vue：用于构建用户界面的渐进式js框架

渐进式：vue可以自底向上逐层的应用（可以引入各种vue插件）

特点：

1. 组件化模式，复用。

2. 声明式编码，不需要操作DOM /命令式编码

3. 使用虚拟DOM+Diff算法。复用DOM节点

   1.创建Vue实例（根Vue实例）

   var vm = new Vue({
       
   })

   一个vue应用由一个new Vue 创建的根Vue实例，以及可选的嵌套的，可复用的组件数组组成。

   选项/DOM ：

   1. el：（string/element）

      1. 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标

      2. 只在用 new 创建实例时生效

      3. 在实例挂载之后，元素可以用 vm.$el 访问。

   选项/数据：

   1. data: 一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”

   2. methods:表示所有的能被调用的function。

      1. methods中函数可以直接访问data或者methods中的其他method

   3. computed:计算属性

      1. 计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算

   4. watch：监听

   2. 在vue实例中我们可以一个methods属性，表示所有的能被调用的function

   var app3 = new Vue({
     el: '#app-3',
     data: {
       seen: true,
       list:[],
     },
     methods: {
             save() {
               if (this.txt) {
                 this.list.push(this.txt);
                 this.txt = "";
               }
             },
             saveData() {
               this.people.push({ ...this.person });// 扩展运算符，浅拷贝
               this.person.name = "";
               this.person.desc = "";
             },
           },
     
   })
   ​
   
   <button @click="clickHandle()">+3</button>
    //不写参数默认传event（e）
   <button @click="clickHandle2(4)">+n</button>

   模板语法:

   {{}}：大括号中间是内容是js表达式。

   <h1>当前的count为:{{count}}</h1>
   <button v-on:click="count++">+1</button>

   vue调接口取数据：

   1. 启动接口：（readme）

      1. pm2插件：守护进程，npm i pm2 -g /pm2 start

   2. fetch进行AJAX请求

      1. fetch("接口路径").then(res=>res.json()).then(res)=>{

      }

   指令（v-:前缀，表示是vue提供的特殊）

   1. v-bind：属性绑定 （简写为 ：）

      v-bind:title="message"
      ​
      
      <div class="ball" :style="changeball">
      <button @click="changeTo('pink')">粉色</button>
      ​
      
       methods: {
                changeTo(color) {
                  this.changeball = {
                    backgroundColor: color,
                  };
                },
              },

   2. v-if: 控制标签的显示和隐藏

      1. 不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构

      <p v-if="seen">  显示</p>;
      //隐藏
      button v-if
      
       
      var app3 = new Vue({
        el: '#app-3',
        data: {
          seen: true
        }
      })

   3. v-show：建议使用。不需要新增

   4. v-if与v-else:成对出现。二选一

   5. v-on:事件绑定（简写为 @）

      1. 常用：click ，点击

      2. keyup：键盘抬起。

         1. 按键修饰符：@keyup.alt.ctrl.enter

      3. keydown：按下获取上一次的值

      ​

   6. v-model:语法糖，语法的集合。相当于同时绑定了输入框的input事件和value值

      1. v-model.trim: 去除空格

      2. v-model-number：滑块

   7. 引用类型数据赋值解决：扩展运算符，浅拷贝

       methods: {
                save() {
                  if (this.txt) {
                    this.list.push(this.txt);
                    this.txt = "";
                  }
                },
                saveData() {
                  this.people.push({ ...this.person });// 扩展运算符，浅拷贝
                  this.person.name = "";
                  this.person.desc = "";
                },
              },

   8. 样式绑定： ：class=“arrClass”

      1. 数组，每一项都生效

      data:{
          arrClass:[a,b,c],
          
      }

      1. 对象，属性名表示样式名，属性值是bool值。

         data:{
             objClass:{
             a:true,
             b:false,
             },
             
         }

   9. v-for（point）：循环展示数据，可以循环：字符串，数组，对象，数字