Vue学习笔记03

最新推荐文章于 2024-08-31 22:02:55 发布

小十一 cy

最新推荐文章于 2024-08-31 22:02:55 发布

阅读量52

点赞数

文章标签： vue.js javascript 学习

本文链接：https://blog.csdn.net/weixin_52521356/article/details/124607571

版权

Vue框架学习03

自定义事件

使用this.$emit(‘自定义事件名’,参数),

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>hello Vue!</h1><!--需要刷新才可以变化-->
<!--view层 模板-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>
<!--虚拟dom,模块化-->
<!--可在界面中更改后，界面数据即发生变化-->

<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot：插槽
    Vue.component("todo", {
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
             </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template:'<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        //只能绑定当前组件的方法
        template:'<li>{{item}}----{{index}} <button @click="remove">删除</button></li>',
        methods: {
            remove :function (index){
                //this.$emit();自定义事件方法
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "names",
            todoItems: ['cy','ccyy','cccyyy']
        },
        methods: {
            removeItems :function (index){
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);
            }
        }
    });//双向绑定
</script>

</body>
</html>

Vue 入门小结

核心：数据驱动，组件化

优点：借鉴了AngulaJS的模块化开发和React的虚拟Dom
在这里插入图片描述

v-if
v-if…else
v-if…else if…
v-on绑定事件，简写@
v-bind给组件绑定参数，简写：
v-for 循环事件
v-model 数据双向绑定

组件化：

组合组件slot插槽
组件内部绑定事件需要使用到this.$emit(“事件名”,参数);
计算机属性的特色，缓存计算数据

Vue是纯粹的视图框架，并不包含，比如AJAX之类的通信功能，我们需要使用Axions框架做异步通信;

说明：

Vue的开发都是要基于NodeJS，实际开发采用vue-cli脚手架开发，vue-router路由，vuex做状态管理；Vue UI，界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品)来快速搭建前端项目。

小十一 cy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记03

Vue框架学习03自定义事件使用this.$emit(‘自定义事件名’,参数),<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><h1>hello Vue!</h1><
复制链接

扫一扫