实例化多个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 相关联
- assets
- 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
,第二部分也会被删除。