vue基础学习记录（二）

实例化多个Vue对象

HTML：

	<div id="vue-app-one">    	    <!-- 第一个实例的内容  -->
       <h2>{{title}}</h2>
       <p>{{greet}}</p>
	</div>
	
   	<div id="vue-app-two"> 			<!-- 第二个实例的内容 -->
       <h2>{{title}}</h2>
       <p>{{greet}}</p>
       <button v-on:click="changeTitle">change App One Title</button>		<!-- 改变第一个实例的title -->
  	</div>

JS：

	var one = new Vue({                                // 实例化第一个对象
		el:'#vue-app-one',
		data:{
			title: "app one的内容"
		},
		methods:{
		
		},
		computed:{
			greet:function(){
				return "Hello App One";
			}
		}
	});
	
	var two = new Vue({  						// 实例化第二个对象
		el:'#vue-app-two',
		data:{
			title: "app two的内容"
		},
		methods:{
			changeTitle:function(){  				// 改变第一个实例对象的title
				one.title = "已经改名了!";
			}
		},
		computed:{
			greet:function(){
				return "Hello App Two";
			}
		}
	});
	
	two.title = "app two的title也发生变化了!";      // 直接改变two对象的title

初识组件的应用

HTML：

	<div id="vue-app-one">
        <greeting></greeting>     // 调用公共子组件
    </div>

    <div id="vue-app-two">
        <greeting></greeting>
    </div>

JS：

	var data = {
		name: "Bukcy"
	}
	Vue.component("greeting",{
		template:`
				<p>
					{{name}}大家好，给大家介绍一下我的女朋友@关晓彤
					<button v-on:click="changeName">改名</button>
				</p>
				`,
		data:function(){
			return data
		},
		methods:{
			changeName:function(){
				this.name = "Henry"
			}
		}
	})
	
	
	
	new Vue({
		el:'#vue-app-one'
	});
	
	new Vue({
		el:'#vue-app-two'
	});

搭建脚手架Cli

第一步： 先安装Node，默认安装即可
在终端验证node版本: node -v ， npm版本： npm -v

第二步： 安装vue-cli

	Windows:
		$ npm install -g @vue/cli
		# OR
		$ yarn global add @vue/cli
	Mac：
		$ sudo npm install -g @vue/cli

验证 vue-cli 是否安装成功：

	$ vue  --version

第三步： 创建一个基于 webpack 模板的新项目

	$ vue init webpack vue-playlist

创建过程中会出现

 	Project name       							 // 项目名称
 	Projcect description							// 项目描述
 	Author												// 作者
 	Vue build											// Runtime （默认）
 	Install vue-router								// 路由，根据需要安装，用不到可以不装
 	Use ESLint to lint your code			// 安装之后会代码会非常严谨
 	Setup unit tests with Karma + Mocha   
 	Setup e2e tests with Nightwatch?	

进入项目目录：

	$ cd vue-playlist

安装依赖：

	$ npm install

运行：

	$ npm run dev

运行初始化项目截图

介绍SRC文件流程及根组件App

• src
  • assets 对应的图片
  • components 对应的组件
  • App.vue 根组件
  • main.js 入口文件与app.vue 相关联
• index.html 入口文件

index.html -> main.js -> App.vue

组件嵌套

全局注册组件
main.js

	import Users from './components/Users'
	// 全局注册组件
	Vue.component("users",Users)  // 第一个"users"是我们自定义的一个名字，第二个Users是对应的组件

App.vue

	<template>
	  <div id="app">
	    <users></users>   <!-- 注册后的全局组件，可以当做标签使用 -->
	  </div>
	</template>

提示：基本上都是使用局部的组件，一般不会使用全局组件。

局部注册
App.vue

	<template>
	  <div id="app">
	 	 <users></users>			<!-- 3、调用子组件 -->
	  </div> 	
	</template>
	
	<script>
	
	// 局部注册组件
	import Users from './components/Users'      // 1、引入子组件
	
	export default {
	  name: 'App',
	  data () {
	    return {
	    }
	  },
	  components:{        // 2、注册子组件
	    "users":Users 	 		// 第一个"users"是我们自定义的一个名字，第二个Users是对应的组件
	    // Users				// 省略写法
	  }
	}
	</script>

组件CSS作用域

子组件默认会继承父组件的公共样式，在style 中添加 scoped属性，该组件的样式就不会继承父组件的默认样式。

父组件

	<style scoped>
		h1{
		 	color: purple;
		}
	</style>

子组件

	<style scoped>
		h1{
			color: green;
		}
	</style>

效果截图

属性传值Props

父传子

App.vue

	<template>
	  	<div id="app">
	    	<users v-bind:users="users"></users>   <!-- 第一个"users"是子元素接收的名字（自定义），第二个users是需要传递的值 -->
	  	</div>
	</template>

Users.vue

	export default {
		  // props: ["users"],        // 这种写法也可以，会比较不严谨 
		  props:{					  // 这种写法是官方建议的，会指定的值类型
		      users:{
		          type:Array,
		          required:true
		      }
		  },
	}

子传父

App.vue

	<template>
	  <div id="app">
	  	<!-- 绑定一个子组件注册事件titleChanged，对应的方法updateTitle(),接收参数 $event 一定是这个参数!!! -->
	    <app-header v-on:titleChanged="updateTitle($event)" v-bind:title="title"></app-header>
	  </div>
	</template>
	
	<script>
	export default {
	  data () {
	    return {
	      title:"传递的是一个值,(number string boolean)"
	    }
	  },
	  methods:{
	    updateTitle(title){         // title接收子组件传过来的值
	      this.title = title;       // 传递过来的值覆盖原来的title
	    }
	  }
	}
	</script>

Header.vue

	<template>
	  <header v-on:click="changeTitle">
	    <h1>{{title}}</h1>
	  </header>
	</template>
	
	<script>
	export default {
	  methods:{
	    changeTitle:function(){
	      this.$emit("titleChanged","子向父组件传值"); // 注册titleChanged的事件，并传递参数
	    }
	  }
	};
	</script>

效果截图

点击header部分，子组件传递的title就会覆盖父组件的title值

点击前

点击后

传值和传引用

传值： string number boolean
引用： array object

传值

App.vue

	export default {
	  data () {
	    return {
	 		 title:"传递的是一个值,(number string boolean)"
	    }
	  }

Header.vue

	export default {
	  methods:{
	    changeTitle:function(){
	      this.title = "changed";
	    }
	  }
	};

App.vue传递一个值给Header.vue和Footer.vue，Header.vue 改变传递过来的值，Footer.vue的值不会改变

效果截图
值未改变

Header.vue的值改变，Footer.vue的值不会改变

传引用

改变一个地方的值，全部地方都会改变

上下两部分是传了相同的引用

点击按钮，删除上部分的最后一个div，第二部分也会被删除。