Vue从入门到精通

  • 李乐童
  • 2020-11-12 14:34:42
  • 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. 基于组件的案例


本文为李乐童原创文章,转载无需和我联系,但请注明来自李乐童博客liletong.cn

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