重拾vue2-CSDN博客

Vue组件

一、组件介绍

每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点
每个组件模板只能拥有一个根标签
子组件的数据具有作用域，以达到组件的复用

二、局部组件

<div id="app">
    <local-tag></local-tag> <local-tag></local-tag> </div> <script> var localTag = { data () { return { count: 0 } }, template: '<button @click="btnAction">局部{{ count }}</button>', methods: { btnAction () { this.count ++ } } } new Vue({ el: "#app", components: { 'local-tag': localTag } }) </script>

三、全局组件

<div id="app">
    <global-tag></global-tag> <global-tag></global-tag> </div> <script> Vue.component('global-tag', { data () { return { count: 0 } }, template: '<button @click="btnAction">全局{{ count }}</button>', methods: { btnAction () { this.count ++ } } }) new Vue({ el: "#app" }) </script>

四、父组件传递数据给子组件

通过绑定属性的方式进行数据传递

<div id="app">
    <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag> </div> <script type="text/javascript"> Vue.component('global-tag', { props:['sup_data1', 'supdata2'], template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>' }) new Vue({ el: '#app', data: { sup_data1: '数据1', sup_data2: '数据2' } }) </script>

五、子组件传递数据给父组件

通过发送事件请求的方式进行数据传递

<div id="app">
    <global-tag @send_action='receiveAction'></global-tag> </div> <script type="text/javascript"> Vue.component('global-tag', { data () { return { sub_data1: "数据1", sub_data2: '数据2' } }, template: '<div @click="clickAction">发生</div>', methods: { clickAction () { this.$emit('send_action', this.sub_data1, this.sub_data2) } } }) new Vue({ el: '#app', methods: { receiveAction (v1, v2) { console.log(v1, v2) } } }) </script>

六、父子组件实现todoList

<div id="app">
    <div> <input type="text" v-model='value'> <button @click='click'>提交</button> </div> <ul> <item v-for='(e, i) in list' :key='i' :ele='e' :index='i' @delete='deleteAction' ></item> </ul> </div> <script type="text/javascript"> Vue.component('item', { props: ['ele', 'index'], template: '<li @click="item_click">{{ ele }}</li>', methods: { item_click: function () { this.$emit('delete', this.index) } } }) new Vue({ el: '#app', data: { value: '', list: [], }, methods: { click: function () { this.list.push(this.value) this.value = '' }, deleteAction: function (index) { this.list.splice(index, 1) } } }) </script>

七、搭建Vue开发环境

1、安装nodeJS

官网下载安装：https://nodejs.org/zh-cn/

2、安装脚手架

vue官网 => 学习 => 教程 => 安装 => 命令行工具(CLI)

安装全局vue：npm install -g @vue/cli

在指定目录创建vue项目：vue create my-project

进入项目目录启动项目：npm run serve 通过指定服务器路径访问项目页面：http://localhost:8080/

3、项目创建

babel：是一个 JavaScript 编译器。
eslint：是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

4、vue基础模板

<template>
	
</template>
<script>
    export default {
        
    }
</script>
<style scoped>
</style>

npm install -g vue-cli

vue init webpack my-project

npm install -g cnpm --registry=https://registry.npm.taobao.org

转载于:https://www.cnblogs.com/luck-L/p/9768423.html