Vue从入门到精通

白俊遥博客

vue基础

  1. vue:渐进式javascript框架 渐进式声明式渲染→组件系统->客户端路由>集中式状态管理- >项目构建

  2. vue的基本使用:

  • 传统开发模式对比 原生js jquery js框架

  • vue helloword初步实现

创建vue()对象-》el:对象选择器data:数据对象{{}}:插值表达式
  1. 前端渲染 模板(html)+数据(ajax获取) = 渲染

    1. 原生js 字符串拼接的方式添加到html标签中 风格差异大,后期维护困难

    2. 前端模板引擎 thinkphp框架 代码规范,方便维护;没有提供专门的事件机制

    3. 模板语法

  2. 模板语法

    1. 如何动态处理属性

    2. 如何处理事件

      <input type="button" v-on:click='handle()'/>//简写形式<input type="button" @click="handle()"/>
    3. 事件的函数绑定

    4. 事件参数传递

      <div v-text="num"></div><button @click="handle('ww',$event)">按钮</button>var vm =new vue({    el:"#app".    data:{        num:0
          },
          methrods{        handle:function(t,event){            //获取事件对象的值
                  //event为事件对象
                  console.log(event.target.innerHTML)
              }
          }
      });
    5. 事件修饰符

      //阻止冒泡<button @click.stop="handle()"></button>\//阻止默认行为 将不再执行页面跳转而执行handle()方法<a href="www.baidu.com" @click.prevent="handle()"></a>
    6. 按键修饰符

      <button @keyup.enter="handle()">//自定义按键修饰符定义按键a,当按下a建时执行该操作<button @keyUp.a="handle()"></
      <script>
          Vue.config.keyCodes.a = 65;
      </script>
    7. v-clock指令 插值表达式存在“闪动”问题,该指令先通过样式隐藏,替换完值之后再显示最终的值。

      [v-clock]{
          display:none
      }<div v-clock>{{}}</div>
    8. v-text:填充纯文本

      <div v-text="msg"></div>
    9. v-html:填充html文本,存在跨域安全问题,信任本网站内容,不可信任用户提交内容。

      <div v-html="msg"></div>var vm = new vue({    el:"",    data:{        msg:"<h1>好好学习</h1>"
          }
      });
    10. v-pre:原样输出内容,跳过编译过程

      <div v-pre>{{msg}}</div>//输出内容 :{{msg}}
    11. v-once:只编译一次,不再参与数据的响应式,提高性能 1.数据的响应式:页面的变化引起数据的变化

      <div v-once v-text="msg"></div>
    12. 双向数据绑定:

    13. 添加v-clock样式

    1. 差值表达式

    2. 指令 指令的本质就是自定义属性

      //动态绑定数据,inpt值发生变化,div值随着变化,相应div值发生变化,input值同时发生变化
                  <div id='app'>
                      <div v-text='msg'></div>
                      <input type='text' v-model/>
                  </div>
                  
                  var vm = new vue(
                      el:"#app",
                      data:{
                          msg:'好好学习'
                      }
                  );
    3. 事件绑定

          <div id="app">
              <div v-text="num"></div>
              <button @click="handle()">按钮</button>
          </div>
          <script>
              var vm = new vue({
                  el:"#app",
                  data:{
                      num:0
                  },
                  methods:{
                      handle:function(){                //this 即vm对象 this === vm
                          this.num++
                      }
                  }
              });    </script>
    4. 属性绑定 :动态改变属性的值

      //简写形式<a :href="url">百度</a><a v-bind:href="url">百度</a><button @click="handle()"></button><script>
          methods:{
              handle:function(){            this.url = "http://www.google.com"
              }
          }
      </script
    5. 样式绑定:动态修改页面样式

      //demo是class名,isTrue是属性值,通过方法改变样式//对象语法<div :class="{demo:isTrue}"></div>//数组语法 同时绑定两个属性<div :class="[demo,demo1]"></div>
  3. 分支循环结构

  4. 表单操作 用户交互

    1. 获取表单数据的基本操作

    2. 表单修饰符

      //number :转化为数值
          <input type="number" v-model.number='age'>
      //trim :去掉开始和结尾的空格//lazy:将input事件切换为change事件 失去焦点再触法
  5. 自定义志指令 13个内置指令不能满足业务需求

    1. 自定义指令的语法规则

      //默认获取文本框焦点//带参数的全局自定义指令 v-color必须是对象类型的参数<input type='text' v-color="{c1:'red',c2:'blue'}"<script>
          Vue.directive('color',{        inserted:function(el,color){
                  el.style.backgroundColor = color.value.c1//给对象el的背景色赋值为红色 
              }
          });</script>//自定义局部指令var vm = new vue({    el:'',    data:{
              
          },    directives:{        color:{            inserted:function(el,c){
                      el.style.backgroundColor = c.value.c1
                  }
              }
          }
      })
  6. 计算属性 表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁

    //过去方法//使用计算属性<div>{{reserve}}</div>new Vue({
        el:'',
        data:{
            msg:"hello"
        },
        cumputed:{
            reserve:functtion(){//调用方法名reserve完成hello的字符串翻转
             retuen   this.msg.split('').reverse().join('');
            }
        }
    })
    1. 计算属性与方法的区别 计算属性会基于依赖的数据存在缓存中,多次调用执行一次,若数据发生变化,则调用一次之后存在缓存当中;函数每次调用都会执行

  7. 过滤器 格式化数据,如将字符串首字母转换成大写,格式化时间日期

    <div>{{msg | filt1 | fil2}}</div}//可同时使用两个过滤器<div :abc='msg | filt1 | filt2'>//v-bind也可以绑定过滤器
      //两种创建过滤器的方法Vue.filter('filt3',function(val){
        
    })new Vue({
        el:'',
        data:{
            msg:'hello'
        },
        filters:{
            filt1:function(val){            return val+'123'  //显示结果为hello123
            },
            filt2:function(val){            return val+'456'  //显示结果为hello456
            }
        }
    })
  8. 侦听器 数据发生变化,即调用侦听器绑定的方法 应用在数据执行时异步的操作,或者是内存开销较大的操作

    <div id="app">
    		<input type="text" name="" id="" value="" v-model="firstname"/>
    		<input type="text" name="" id="" value="" v-model="lastname"/>
    		<div >{{fullname}}</div>
    </div>new Vue({    el:'#app',
        data:{
            firstname:'',
            lastname:'',
            fullname:''
        },
        watch:{
            //侦听器监听data中的数据变化,数据发生变化则调用方法,并保存在缓存中
            firstname:function(val){
                
            },
             lastname:function(val){
                
            }
        }
    })
  9. 生命周期

  10. 响应式修改数组数据

    vm.$set(vm.arr,id,值)Vue.set(vm.arr,id,值)

vue组件化开发

  1. 组件化开发思想 标准 分治 重用 组合

    1. 组件化规范: Web Components

  2. 组建注册

    Vue.component('组件名称',{
        data:'组件数据',
        template:组件模板内容})
    
    <div id='#app'>
        <button-count></button-count>
    </div>
    Vue.component('button-count'{
        data:function(){        return{            count:0
            }
        },
        template:'<button @click="addNum()">点击了{{count}}次</button>,
        methrods:{
            addNum:function(){
                this.count++
            }
        }
    })
    <div id='app'>    <button-msg></button-msg></div>new Vue({    el:'#app',    data:{        msg:'heollo'
        },    component:{        'button-msg':buttonmsg,
        }
    })var buttonmsg={    data:function(){        return {            this.msg
            }
        }
        template:'<div>{{msg}}</div>',
    }
    1. 命名方式 驼峰 -
      如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签模板中,必须使用短横线的方式使用组件

    1. 注意

    2. 局部组件注册 只能在父组件中使用

    3. 全局组件注册语法

  3. Vue调试工具用法

  4. 组件间数据交互

    1. props属性值类型 字符串String 数值Number 布尔值Boolean 数组Array 对象Object 传递数据原则:单向数据流

    2. 子组件向父组件传值

      <div id='app'>    <div>{{msg}}</div>
          <btn-max @btn='handle($event)'></btn-max>//子组件通过固定形式的$event传值</div>
      Vue.component('btn-max',{
          template:'<button @click="$emit('btn',5)"></button>'})new Vue({    el:"#app",
          data:{
              
          },
          methords:{
              handle:function(val){
                  
              }
          }
      })
    3. 单独的事件管理中心管理组件间的传值 兄弟之间的信息传递

    4. 非父子组件的传值

    5. 子组件通过自定义事件向父组件传递信息,父组件监听子组件的事件

    1. 父组件向子组件传值

      <div id='app'>
          <div>{{str1}}</div>    //在父组件中通过给子组件绑定动态属性值的方式向子组件传递数据,子组件中可通过props接收值
          <show-msg :info='str2'></div>    //显示结果为   好好学习,天天向上---毛主席</div>
      Vue.component('show-msg',{
          props:['info'],//通过props的形式接收父组件已属性的方式传递的值
          data:function(){        return {
                  str3:'毛主席'
              }
          },
          template:'<div>{{info+"----"+str3}}</div>'})new Vue({
          el:'#app',
          data:{
              str1:'好好学习',
              str2:'天天向上'
          }
      })
  5. 组建插槽

  6. 基于组件的案例


白俊遥博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论