Vue心得

VUE2

1.模式:MVVM

M：model    数据模型，data[数据state]

V：view       视图，模板，template

VM: viewModel(封装dom) 数据绑定：v-bind   ;    事件绑定： v-bind 

2.Vue实例

模块化、一切皆模块，一个模块是html/css/js的一个完整功能单元。

理解：可看作一个自定义标签。      
      vue实例代理了data、methods中变量的访问 

      vm.状态  （data中声明的属性）
      vm.方法   (methods中声明的方法)
      
      根组件（模块）：根组件只会出现一次，所以不会出现 data 数据共享
        let options = {
          data:{},
          methods:{

              },
          created(){    

               this             //  凡是用到this的，都指向当前实例
          },
        }
        let vm = new Vue(options)
      组件（模块）
        let options = {
          data:function(){        
            return {}     // return表示每次调用该组件，就会初始化一个对象 
          },
          methods:{

          },
          created(){

          }
        }
        Vue.component('my-info',options)    // 注册组件

        <my-info/>
        <my-info/>
        <my-info/>    // 此时相当于调用三次 my-info组件 

3. 渲染
     理解： 将状态显示到视图中 model -> view      
      1. 双大括号
        可以存在任意变量或者表达式
        变量：
          {{ msg }}         // data:{msg:'hello'}
        方法：
          {{ foo() }}       // methods:{foo(){}}
        表达式：
          {{ JSON.stringify(obj) }}   // data:{obj:{}}
          {{ msg?msg:'hello' }}   // data:{msg:''}

 <div id="app">
    <div>{{msg}}</div>
    <div>{{JSON.stringify(obj)}}</div>
    <div>{{foo()}} </div>
    <div>{{foo()}} </div>
    <div>{{foo()}} </div>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        msg:'hello vue',
        obj:{name:"terry"}
      },
      methods:{
        foo(){
          console.log('this is foo');
          return "hello foo";
        }
      }
    })
  </script>

  2. 指令(内置指令)   ：帮助我们操作底层dom
        v-on:eventType.事件修饰符= '事件处理函数（声明在methods）'

           事件修饰符
          <form v-on:submit.prevent="">   //绑定一个事件，并且阻止它的默认行为
          <form v-on:submit.stop="">     //  绑定一个事件，并且阻止冒泡
          <form v-on:submit.once="">    //   绑定一次，之后不再绑定
          <form @submit="">（简写）
          eventType
            dom类型： click 、submit、hover...
            自定义类型：dd、(组件通信)

         v-bind:属性名='属性值'
              <img src="" />    常量
             <img v-bind:src=" " />  变量、表达式；   简写： <img :src=" " />  变量、表达式

        v-for=" "  ：数组或对象遍历
          // data:{arr:[{},{},{}]}
          <ul>
            <li v-for="item in arr" :key="item.id"></li>             //   ‘:key=’   此时指定一个唯一值
          </ul>
        v-if=‘ ’
        v-else-if
        v-else

        v-show

        v-bind:model=""【通常应用在form元素中】
        v-model【通常应用在表单元素中】
          双向数据绑定
          1. 将msg值作为input的默认值
          2. 用户如果操作了表单，v-model会将表单元素中的值映射到msg中
          <input v-model="msg">

          v-html
          将html输出，并且解析

data为什么为函数？
              为了避免多个组件共享一个变量

v-for中为什么要使用 key ？

                  便于diff算法计算。

 计算属性与监听器

 1. 计算属性
        1) 定义
          像函数一样定义，但是无法接收参数
  

computed:{
        students_male(){
          console.log('计算====');
          return this.students.filter(item=>item.gender==='male')
        }
      }

        2) 调用
          就像属性一样被调用，不加括号

<ul>
      <li v-for="s in students_male" :key="s.id">
        {{s.id}}
        {{s.name}}
        {{s.gender}}
      </li>

        3) 特性
          1. 多次调用同一个计算属性，计算属性函数会执行一次

 <ul>
      <li v-for="s in students_male" :key="s.id">
        {{s.id}}
        {{s.name}}
        {{s.gender}}
      </li>
    </ul>
    <ul>
      <li v-for="s in students_male" :key="s.id">
        {{s.id}}
        {{s.name}}
        {{s.gender}}
      </li>
    </ul>

此时，根据控制台，我们可以看见虽然代码调用了两次计算属性，但控制台只用了一次
         

2. 当被计算的属性发生变化，计算属性函数会重新执行

 计算属性与方法的区别：

   methods:{
       
           students_male(){
           console.log('执行====');
           return this.students.filter(item=>item.gender==='male')
         }
      }

调用：此时我们发现：方法调用需要加括号

<ul>
      <li v-for="s in students_male()" :key="s.id">
        {{s.id}}
        {{s.name}}
        {{s.gender}}
      </li>
    </ul>
    <ul>
      <li v-for="s in students_male()" :key="s.id">
        {{s.id}}
        {{s.name}}
        {{s.gender}}
      </li>
    </ul>

打开控制台，我们发现，此时执行了两次

  2. 监听器
        无需点击搜索按钮，就可以进行搜索

 定义
          {
            data:{
              msg:'',
              obj:{}
            },
            watch:{
              msg(newVal,oldVal){

              },
              obj(newVal,oldVal){

              }
            }
          }

实例：

<div id="app">
    {{msg}}
    <div>
      <input type="text" v-model="msg">
    </div>
    {{params}}
    <div>
      <input type="text" v-model="params.name">
      <input type="text" v-model="params.type">
    </div>
  </div>
  <script>
    new Vue({
      el:'#app',
      data:{
        msg:"hello world",
        params:{
          name:"",
          type:""
        }
      },
      watch:{
        msg:{
          handler:(newVal,oldVal)=>{
            alert(newVal+'-'+oldVal);
          },
          deep:false
        },
        // 'params.name' : function(newVal,oldVal){
        //   alert(JSON.stringify(newVal)+'-'+JSON.stringify(oldVal));
        // },
        params:{
          deep:true,
          handler:function(newVal,oldVal){
            alert(JSON.stringify(newVal)+'-'+JSON.stringify(oldVal));
          }
        }
      }
    })
  </script>

8) 模块化(组件)
      vue中模块是最小组成单元
      1. 组件定义
        vue参数的定义过程
        let List = {
          template:`
            <div>
              <div v-for="">
                {{}}
              </div>
            </div>
          `,
          data(){
            return {

            }
          },
          methods:{}
        }
      2. 组件注册
        1) 全局注册
          将组件注册到Vue上，所有组件均可用
          Vue.component('list',List)
        2) 局部注册
          将组件注册到某个组件内部，只有该组件才能使用这个组件
          let ArticlePage = {
            template:``,
            data(){
              return {

              }
            },
            components:{
              'list':List
            }
          }
      3. 参数传递
        组件内部如何接受传递的参数？
          形参
          let List = {
            props:['data']
          }
          
          形参、类型限制
          let List = {
            props:{
              data:Array
            }
          }

          形参、类型限制、校验
          let List = {
            props:{
              data:{
                type:Array,
                default:[],
                validator:function(val){
                }
              }
            }
          }
        如何传递参数？如何传递number/boolean
          参数传递实际上就是属性绑定