Vue框架——基本知识点+示例（2）

最新推荐文章于 2024-04-07 18:08:21 发布
最新推荐文章于 2024-04-07 18:08:21 发布
阅读量316 收藏
点赞数
分类专栏： 前端 Vue框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Whuiry/article/details/107902675
版权

01 总结

使用vue

1.引入框架；
2.实例化对象；
3.配置参数;**

vue指令

v-cloak
v-if 和 v-show
v-html 和 v-text
v-pre 和 v-once
v-model
v-bind
v-on
v-for

02 发微博

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <textarea name="" id="" cols="30" rows="10" v-model="val"></textarea>
    <button v-on:click="send()">发布微博</button>
    <ul>
        <li v-for="(item,index) in list">
            <p>{{item.con}} {{item.date}}</p>
            <span v-on:click="del(index)">X</span>
        </li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            val:'',
            list:[
                {
                    con:'昨日天气',
                    date:'20200706'
                },
                {
                    con:'昨日天气',
                    date:'20200706'
                },
                {
                    con:'昨日天气',
                    date:'20200706'
                }
            ]
        },
        methods:{
            send(){
                if (this.val==''){
                    alert('请输入内容');
                }else {
                    var date = new Date();
                    date = date.getFullYear()+'0'+(date.getMonth()+1)+'0'+date.getDate();
                    this.list.unshift({
                        con: this.val,
                        date: date
                    });
                    this.val=''
                }
            },
            del(a){
                this.list.splice(a,1);
            }
        }
    })
</script>
</body>
</html>

03 Tab栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul{
        overflow: hidden;
    }
    ul li{
        float: left;
        padding: 4px 10px;
    }
    .current{
        background-color: #FF6600;
    }
</style>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in listTop" v-on:click="change(index)" v-bind:class="{current:index==msg}">
            {{item}}
        </li>
    </ul>
    <section>
        <div v-for="(item,index) in listCon" v-show="msg==index">{{item}}</div>
    </section>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:0,
            listTop:[
                '公告',
                '规则',
                '论坛',
                '安全',
                '公益'
            ],
            listCon:[
                '公告内容',
                '规则内容',
                '论坛内容',
                '安全内容',
                '公益内容'
            ]
        },
        methods:{
            change(a){
                this.msg=a;
            }
        }
    })

</script>
</body>
</html>

04 v-if

1.if(){ }else if(){ }else{ }；
2.类似于之前的if else语句，else if语句可以有多个情况：
v-if
v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- if(){

    }else if(){

    }else{

    } -->

<ul id="app">
<!--    v-for遍历指定的次数-->

<!--    显示1~10的数字-->
<!--    <li v-for="n in 10">-->
<!--        {{n}}-->
<!--    </li>-->

<!--    只显示num=1-->
<!--    <li v-for="n in 10" v-show="num==n"></li>-->

<!--    类似于之前的if else语句 else if语句可以有多个情况-->
<!--    <li v-if="num==1">1</li>-->
<!--    <li v-else-if="num==2">2</li>-->
<!--    <li v-else>3</li>-->

    <li v-if="num==1">1</li>
    <li v-else>2</li>
</ul>
</body>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            num:1
        }
    })
</script>
</html>

05 watch监听数据

watch监听数据，有变化的时候执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="add()">按钮</button>
    {{num}}
    <br>
    {{msg}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:0,
            msg:'hello'
        },
        //watch监听数据,有变化的时候执行
        watch:{
            // 数据名(){} 要监听谁就写谁的名字
            num(){
                console.log('num发生变化了');
            },
            msg(){
                console.log('msg发生变化了');
            }
        },
        methods:{
            add(){
                this.num++;
                this.msg=this.msg+'1'
            }
        }
    })
</script>
</body>
</html>

06 computed

1.计算属性，效率比较高，数据存储在缓存里面。如果数据不变化去缓存读数据；
2.写在了computed里面，数据不会发生变化，除非里面的变量值发生改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <button v-on:click="add()">加法</button>
    <br><br>
    {{t}}
    <br><br>

<!--    每一次页面中有数据渲染的时候，都会重新渲染-->
    {{msg+num+Math.random()}}
    <br><br>

<!--    写在了computed里面，数据不会发生变化，除非里面的变量值发生改变-->
    {{n}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            num:1,
            msg:2,
            t:3
        },
        //计算属性，效率比较高，数据存储在缓存里面。如果数据不变化去缓存读数据
        computed:{
            n(){
                return this.msg+this.num+Math.random();
            }
        },
        methods:{
            add(){
                this.t++;
                // this.num++;
            }
        }
    })
</script>
</body>
</html>

07 自定义全局指令

1.自定义全局指令：Vue.directive(‘指令名字’,{钩子函数})；
2.使用指令：
①v-指令名字:参数 ；
②v-指令名字=参数(变量处理) ；
③无参数 v-指令名字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../../../../../17外包1班/FileRecv/library.js"></script>
</head>
<body>
<!--
    输入框聚焦
    autofocus在一些苹果手机上会有问题，所以一般用的是 选择标签.focus()

    定义指令实现自动聚焦
-->
<div id="app">
    <input type="text" id="txt">
    <button v-on:click="change()">切换</button>
    <button v-color:red v-if="show">{{msg}}</button>
    <p v-color:blue>dfghjg</p>
    <div v-color="yellow">waerdfgb</div>
    <div v-color>asdfgasfd</div>
</div>
<div id="box">
    <p v-color:orange>waesrgbn</p>
</div>

<script src="js/vue.js"></script>
<script>
// <!--自定义全局指令: Vue.directive('指令名字',{钩子函数})
// 使用指令 ①v-指令名字:参数 或者 ②v-指令名字=参数(变量处理) ③无参数 v-指令名字-->

    Vue.directive('color',{
        //钩子函数（框架提供的对外接口，可以进行操作） bind inserted unbind update 可选
        bind(el,obj){
            console.log(el,obj);
            console.log('绑定到元素身上了');
        },
        inserted(el,obj){
            console.log(el,obj)
        //    el当前标签,obj指令相关的参数
        //    obj.arg用户传递参数(通过 v-指令名字：参数 传递)
        //    obj.value(通过 v-指令名字=参数(变量处理) 传递)

        //    在inserted里面实现指令的功能
        //     if (obj.arg){
        //         //这串代码的意思是：如果 【v-指令名字：参数】 传递的 arg 存在，则执行el.style.color=obj.arg，
                   //否则传递的是 【v-指令名字=参数(变量处理)】 对象的 value ，执行el.style.color=obj.value;
        //         el.style.color=obj.arg;
        //     }else {
        //         el.style.color=obj.value;
        //     }

            //v-color
            el.style.background='red';
            console.log('标签插入到文档中了');
        },
        unbind(el,obj){
            console.log('解除绑定')
        },
        update(el,obj){
            console.log('数据有更新')
        }
    })

    new Vue({
        el:'#app',
        data:{
            //v-指令名字=参数(变量处理)，此时的yellow被当作变量处理，需要被定义
            yellow:'green',
            //v-if控制标签是否存在，可以用来检测unbind方法，标签变化可以引起标签解绑和数据更新
            show:true,
            msg:0
        },
        methods:{
            change(){
                this.show=!this.show;
                //检测update()方法
                this.msg++
            }
        }
    })

    new Vue({
        el:'#box'
    })
</script>
</body>
</html>

08 自定义局部指令

自定义局部指令 directives:{
指令名字:{
钩子函数 bind inserted update unbind
内部结构和全局指令一样
}
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-focus v-color>
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        // 自定义局部指令 directives:{
        //     指令名字:{
        //         钩子函数 bind inserted update unbind
        //         内部结构和全局指令一样
        //     }
        // }
        directives:{
            color:{
                inserted(el){
                    el.style.background='red';
                }
            },
            focus:{
                inserted(el){
                    //自动聚焦
                    el.focus();
                }
            }
        }
    })
</script>
</body>
</html>

09 自定义全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--    {{1 | mul}}-->
    {{1 | mul(98)}}
    <br>
    {{1 | mul}}

    <br>
    {{'aaa' | Cap}}
</div>

// <!--    过滤器处理数据-->
<script src="js/vue.js"></script>
<script>
    // Vue.filter('mul',(n)=>{
    //     if (n<10){
    //         return '0'+n+'元';
    //     }else {
    //         return n+'元'
    //     }
    // })

    //Vue.filter('过滤器的名字',(n,b,a)=>{}) 第一个参数代表的是要处理的数据 其余参数是可选参数
    //使用过滤器 {{所要处理的数据 | 过滤器名字}} 如果没有多余参数，直接数据即可，否则要加括号(12)
    Vue.filter('mul',(n,a,b)=>{
        if (a){
            console.log(a);
            return n+a;
        }else {
            console.log(b)
            return b+':没有传递参数';
        }
    })

    Vue.filter('Cap',(n)=>{
        return n.slice(0,1).toUpperCase()+n.slice(1,n.length);
    })

    new Vue({
            el:'#app'
            // data:{
            //
            // }
    })
</script>
</body>
</html>

10 自定义局部过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{'asdfg'|Cap}}
    <br>
    {{a | mul}}
    <br>
    {{1 | mul(123)}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        filters:{
            Cap(n){
                return n.slice(0,1).toUpperCase()+n.slice(1,n.length);
            },
            mul(n,a){
                // if (n<10){
                //     return '0'+n+'元';
                // }else {
                //     return n+'元'
                // }
                if(a){
                    return n+a;
                }else {
                    return '没有传递参数'
                }
            }
        }
    })
</script>
</body>
</html>

11 生命周期

生命周期指的是一个对象从创建到销毁的过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="app">
    <p id="txt">{{msg}}</p>
</div>

<script src="js/vue.js"></script>
<script>
// <!-- 生命周期指的是一个对象从创建到销毁的过程   -->
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello world'
        },
        beforeCreate() {
            console.log('beforeCreate....');
            console.log(txt.innerHTML);  //{{msg}}
            //打印$el 代表的是绑定的标签
            console.log(this.$el);  //undefined
            console.log(this.msg);  //undefined
        },
        created(){
            console.log('created....');
            console.log(txt.innerHTML);  //{{msg}}
            console.log(this.$el);  //undefined
            console.log(this.msg);  //hello world
        },
        //挂载之前
        beforeMount(){
            console.log('beforeMount....');
            console.log(txt.innerHTML); //{{msg}}
            console.log(this.$el); //<div id="app">...</div>
            console.log(this.msg); //hello world
        },
        //挂载成功
        mounted(){
            console.log('mounted....');
            console.log(txt.innerHTML);  //hello world
            console.log(this.$el);  //<div id="app">...</div>
            console.log(this.msg);  //hello world
        },
        // 销毁实例对象 vm.$destroy()
        beforeDestroy() {
            console.log('beforeDestroy....')
        },
        destroyed(){
            console.log('destroyed....');
        },
        beforeUpdate() {
            console.log('数据更新了');
        },
        updated(){
            console.log('数据更新完毕');
        }
    })
</script>
</body>
</html>

12 动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div>p{
        width: 100px;
        height: 100px;
        background-color: lime;
        transition: all 1s;
        opacity: 1;
        position: relative;
        left: 100px;
    }
    .c{
        opacity: 0;
        width: 0px;
        transform: rotate(360deg);
        left: 0px;
    }
</style>
<body>
<div id="app">
    <button v-on:click="change()" id="btn">淡入淡出</button>
    <p v-bind:class="{c:show}"></p>
    <h3>这是标题</h3>
<!--    {{change()}}类似于（computed.html那样）死循环的效果，会一直不断地渲染，直到报错，因为show在不断变化-->
</div>
<script src="js/vue.js"></script>
<script>
    setTimeout(()=>{
    //    选择标签.click() 自动触发click方法
        btn.click();
    },10)

    new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            change(){
                console.log(111);
                this.show=!this.show;
            }
        }
    })
</script>
</body>
</html>

13 transition

Vue中transition方法：
1.实现显示与隐藏；
2.用transition包裹实现动画的标签；
3.书写各个状态的类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    p{
        width: 100px;
        height: 100px;
        background-color: lime;
    }
/*<!--    离开的开始一瞬间-->*/
    .fade-leave{
        /*opacity: 1;*/
        /*width: 100px;*/
        transform:rotate(0deg) scale(1);
    }
    /*离开的结束一瞬间*/
    .fade-leave-to{
        transform:rotate(360deg) scale(0);
    }
    /*离开的过程*/
    .fade-leave-active{
        transition: all 2s;
    }
    /*进入的开始一瞬间*/
    .fade-enter{
        transform: rotate(360deg) scale(0);
    }
    /*进入的结束一瞬间*/
    .fade-enter-to{
        transform: rotate(0deg) scale(1);
    }
    /*进入的过程*/
    .fade-enter-active{
        transition: all 1s;
    }
</style>
<body>
    <div id="app">
        <button v-on:click="change()">动画效果</button>
        <transition name="fade">
            <p v-show="show"></p>

<!--    vue中transition方法:
        1.实现显示与隐藏；
        2.用transition包裹实现动画的标签；
        3.书写各个状态的类
-->
        </transition>
    </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            show:true
        },
        methods:{
            change(){
                this.show=!this.show;
            }
        }
    })
</script>
</body>
</html>

watch 与computed区别？

1.区别
watch中的函数是不需要调用的
computed内部的函数调用的时候不需要加()

watch：属性监听 监听属性的变化
computed：计算属性通过属性计算而得来的属性

watch：需要在数据变化时执行异步或开销较大的操作时使用
对于任何复杂逻辑或一个数据属性在它所依赖的属性发生变化时，也要发生变化，这种情况下，我们最好使用计算属性computed。

computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
computed中的函数必须用return返回最终的结果

当computed中的函数所依赖的属性如果没有发生改变的时候，那么调用当前函数的时候结果会从缓存中读取

watch：一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；

2.使用场景
computed 　　　　
　　　　当一个属性受多个属性影响的时候就需要用到computed
　　　　最典型的例子： 购物车商品结算的时候
watch
　　　　当一条数据影响多条数据的时候就需要用watch
　　　　搜索数据

Whuiry
关注
专栏目录
Vue时间过滤器（转换时间类型）
weixin_45067120的博客
06-02 5709
创建一个过滤器能造福很多从后台传过来的时间值1.在项目中创建一个Date.js包2.如何在页面.vue中引用3.把数据值转换为想要的格式：4.属性介绍（了解）： 1.在项目中创建一个Date.js包 Date.js源码: //给Date类添加了一个新的实例方法format Date.prototype.format = function (fmt) { //debugger; let o = { "M+": this.getMonth() + 1,
vue禁止点击事件_分享8个非常实用的Vue自定义指令
weixin_30582757的博客
01-30 6832
在 Vue，除了核心功能默认内置的指令 ( v-model 和 v-show )，Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令。然后在入口文件中进行 Vue.use() 调用。...
Vue框架——基本知识点+示例（4）
Whuiry的博客
08-10 297
01 路由定义 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <!-- 1.组件 定义组件 组件嵌套 组件传参 spa最直观的一个页面只有一个html --> <style> /*<!-- 默认类 用户点击到当前的内容,自动添加的类--
vue 3 学习笔记 (七)——vue3 中 computed 新用法
2401_84097883的博客
04-07 960
)})该示例过于简单，看不明白的可在文章后面阅读完整实例1。二、options 写法计算属性默认只有 getter ，在需要的时候也可以提供 setter。在vue2中用法如下：computed:{mul:{get(){ // num1值改变时触发},set(value){ // mul值被改变时触发mul 属性是 给num1 放大10，如果修改 mul 的值，则 num1 也随之改变。在 vue3 中 ：get:()=>{},})
Vue基础知识总结 10：使用vue-cli（vue脚手架）快速搭建项目
学Java，找哪吒
10-08 4万+
???? Java学习路线：搬砖工逆袭Java架构师 ???? 简介：Java领域优质创作者????、CSDN哪吒公众号作者✌ 、Java架构师奋斗者???? ???? 扫描主页左侧二维码，加入群聊，一起学习、一起进步 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? ...
vue页面中金额计算（加减乘除）
weixin_41778291的博客
09-29 8978
vue页面中金额计算（加减乘除） Vue.prototype.highPrecisionAdd = function (data1,data2) {// 加法 let r1,r2,m; // 获取每个参数的小数的位数 try{r1=data1.toString().split(".")[1].length}catch(e){r1=0} try{r2=data2.toString().split(".")[1].length}catch(e){r2.
前端：JS精确得到（加减乘除）的结果
weixin_41036393的博客
11-10 1672
//加法函数，用来得到精确的加法结果 //说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 //调用：Add(arg1,arg2) //返回值：arg1加上arg2的精确结果 function Add(arg1, arg2) { arg1 = parseFloat(arg1); arg2 = parseFloat(arg2); var r1, r2, m; try { r1 = arg1.t...
vue3+ts (源码+笔记+生命周期截图)
02-14
Vue3 中引入了多个关键知识点： 1. **Composition API**：Vue3 引入了一种全新的组件编写方式——Composition API，它允许开发者将功能模块化，提高代码复用性。与 Options API 相比，Composition API 更加灵活，...
web前端期末大作业：美食网站设计与实现——HTML+CSS+JavaScript休闲美食餐饮公司网站静态模板(6个页面)
08-10
### 知识点一：HTML5与CSS3的综合运用 ... - **CSS3的新特性**：CSS3引入了诸多新特性，例如响应式设计...通过对这些知识点的学习和实践，学生可以全面掌握前端开发的基本技能，并能够独立完成具有一定复杂度的网页项目。
Vue购物车——组件化.rar
05-01
总结，"Vue购物车——组件化"案例展示了Vue如何利用组件化思想构建一个购物车功能，涵盖了组件注册、父子组件间通信和数据单向绑定的关键知识点，这些是理解和掌握Vue.js框架的基础。通过学习和实践这个案例，开发者...
【前端热门框架【vue框架】】——条件渲染和列表渲染的学习的秒杀方式 (2).txt
最新发布
04-30
这类资源通常由经验丰富的开发者制作，他们能够将复杂的知识点拆解为易于理解的小步骤，并通过生动的例子进行演示。例如，在学习条件渲染时，可以通过观看如何使用`v-if`和`v-else`来控制不同组件的显示与否；而在...
文章：前端框架——Vue中所需要的静态资源.rar
12-23
在“文章：前端框架——Vue中所需要的静态资源.rar”这个压缩包中，很可能是为了配合介绍Vue.js开发时所需的静态资源，包括但不限于HTML模板、CSS样式文件、JavaScript代码、图片以及其他辅助开发的工具或库。...
20-vue第一天
梦格的博客
10-01 175
day01 Vue 是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架 vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合 使用Vue将helloworld 渲染到页面上 指令 本质就是自定义属性 Vue中指定都是以 v- 开头 v-cloak 防止页面加载时出现闪烁问题 <style type="text/css"> /* 1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
vue中将date转换成数字_vue 封装一个全局时间戳转换为YYYY-MM-DD hh:mm:ss过滤器
weixin_27013291的博客
01-17 964
const dateFilter= (time) => {if (!time) { // 当时间是null或者无效格式时我们返回空return ' '} else {const date = new Date(time) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000const dateNumFun = (num) => num < 10 ? `0${num}...
vue中v-if的常见使用
热门推荐
马优晨
04-01 31万+
使用过Vue的小伙伴一定使用过v-if 这个属性，但是这个属性主要是来干什么的呢,他得用途是那些？ 这里我总结了一下，v-if使用一般有两个场景： 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换 下面我写了两个例子，是Vue官方的简单实例。 第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。 第二个例子实现了...
vue中$el等属性
轻风细雨_林木木
05-07 5297
1. 属性： 只举例常见的部分属性 * vm.$el 获取Vue实例关联的DOM元素； * vm.$data 获取Vue实例的data选项（对象） * vm.$options 获取Vue实例的自定义属性（如vm.$options.methods,获取Vue实例的自定义属性methods） * vm.$refs 获取页面中所有含有ref属性的DOM元素（如vm.$refs.hello，获取页面中含有属性ref = “hello”的DOM元素，如果有多个元素，那么只返回最后一个） 2. $el 和 $r
点击触发其他dom元素：＜ $refs，$el ＞
Crazy_GirlLL的博客
01-21 822
要实现的效果是： 点击图上的span，展示下拉框select 结构展示： <div class="jobCon"> <a-select ref="selectCom" :value="jobIdItem.name" @change="changeStationName" style="width: 100%;opacity:0" :disabled="isNowOfferApproval"> <a-select-option :key="item.id"..
vue第二天
weixin_30273175的博客
05-23 185
# Vue第二天 ## 今日内容介绍 - v-on按键修饰符- 扩展品牌管理需求来学习新知识点- Vue中的AJAX请求- 跨域复习和JSONP- Vue的生命周期方法- 实现品牌管理案例的AJAX版 ## 今日内容学习目标 - 掌握v-on事件按键修饰符的作用- 记住自定义属性指令和元素指令的写法- 记住自定义过滤器的写法以及管道符|的使用- 能够分清楚私有过滤器和全局过滤器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值