vue入门及组件间传值代码

Posted 2020-11-10 stevenlii

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue入门及组件间传值代码相关的知识，希望对你有一定的参考价值。

vue是一种mvvm的方式，比起jquery的mvp的方式，可以较少操作dom，代码量也少很多。

vue有两种方式，一种是工程化的方式，一种是像jquery那样使用

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
嵌在前端代码的方式。
前期学习和做一般项目时，可以用第二种方式。以后可以用第一种方式。
这里提供一个示例代码，即vue组件化和组件传值的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="todoValue"/>
<button @click="handleBtnClick" >提交</button>
</div>
<ul>
<todo-item v-bind:content="item" v-for="item in list" @delete="handleDelClick"> </todo-item>
</ul></div>
<script>
Vue.component(‘todo-item‘, {
  props: [‘content‘],
        template:"<li @click=‘handleItemClick‘>{{content}}</li>",
        methods:{
            handleItemClick:function(){
                alert(‘aaa‘)
            }
        }
})
    
    var app = new Vue({
        el: "#root",
        data: {
         todoValue:"",
         list:[]   
        },
        methods:{
            handleBtnClick: function(){
                this.list.push(this.todoValue)
                this.todoValue = ""
            },
            handleDelClick:function(){
                this.list = []
            }
        }

    })
</script>
</body>
</html>

更多vue的方法，参考官网：

介绍 — Vue.js
https://cn.vuejs.org/v2/guide/index.html#%E8%B5%B7%E6%AD%A5

关于mvp与mvvm的本质区别

MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

GitHub - DMQ/mvvm: 剖析vue实现原理，自己动手实现mvvm
https://github.com/DMQ/mvvm

vue的组件通讯 - 一篇看懂极为表面朴实内在先进的vuejs组件技术-图灵社区
http://www.ituring.com.cn/article/273489

以上是关于vue入门及组件间传值代码的主要内容，如果未能解决你的问题，请参考以下文章

Vue中组件间传值常用的几种方式

vue的父子组件间传值以及非父子间传值

Vue3组件（18）组件间传值/共享的方法的汇总

你了解Vue组件间传值五大场景吗？

vue组件间传值