重拾vue2

Vue组件

1、组件介绍

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

2、局部组件

<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> 

3、全局组件

<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> 

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

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

<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> 

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

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

<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> 

6、父子组件实现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> 

7、搭建Vue开发环境

一、安装nodeJS

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

二、安装脚手架

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

安装全局vue：npm install -g @vue/cli 在指定目录建立vue项目：vue create my-project 进入项目目录启动项目：npm run serve 经过指定服务器路径访问项目页面：http://localhost:8080/ 

三、项目建立

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

四、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