Vue学习（第四天）
一、组件化开发补充
1. children：查看父组件的所有子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
<button @click='btnClick'>按钮</button>
</div>
<template id="myTemplate">
<h2>我是子组件</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {},
components: {
myComponent: {
template: '#myTemplate',
methods: {
showMessagePlus() {
console.log('我是子组件的->showMessage方法----myComponent');
}
},
data() {
return {
name: '张三'
}
}
}
},
methods: {
btnClick() {
// in 获取数组下标
// of 类似于foreach循环
for (let c of this.$children) {
console.log(c.name);
}
}
}
})
</script>
</body>
</html>
2. ref：根据ref查看指定的子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component ref='myFirstRef'></my-component>
<my-component></my-component>
<button @click='btnClick'>按钮</button>
</div>
<template id="myTemplate">
<h2>我是子组件</h2>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {},
components: {
myComponent: {
template: '#myTemplate',
methods: {
showMessagePlus() {
console.log('我是子组件的->showMessage方法----myComponent');
}
},
data() {
return {
name: '张三'
}
}
}
},
methods: {
btnClick() {
console.log(this.$refs.myFirstRef.name);
}
}
})
</script>
</body>
</html>
3. parent与root：查看子组件的父组件与根组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myTemplate">
<div>
<h2>我是子组件</h2>
<my-other-component></my-other-component>
</div>
</template>
<template id='myOtherTemplate'>
<div>
<h2>我是子子组件</h2>
<button @click='btnClick'>按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
name: 'parentElement'
},
components: {
myComponent: {
template: '#myTemplate',
data() {
return {
name: '子组件的parent'
}
},
components: {
myOtherComponent: {
template: '#myOtherTemplate',
methods: {
btnClick() {
// console.log(this.$parent);
// console.log(this.$parent.name);
console.log('parent:'+this.$parent.name);
console.log('root:'+this.$root.name);
}
}
}
}
}
}
})
</script>
</body>
</html>
二、组件化开发高级
1. slot插槽的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 修改插槽的默认元素 -->
<my-component><hr></my-component>
<!-- 如果有多个值同时放到组件中进行替换时，一起作为替换元素 -->
<my-component><a href="">你好！</a></my-component>
<my-component><button>点击</button></my-component>
</div>
<template id="myTemplate">
<div>
<h2>我是上级</h2>
<!-- 设置插槽的默认元素 -->
<slot>
<h2>我是中级</h2>
</slot>
<h2>我是下级</h2>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: {
template: '#myTemplate',
}
}
});
</script>
</body>
</html>
2. 具名插槽的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component>
<div slot='center'>
<input type="text" placeholder="请输入你要搜素的商品">
</div>
</my-component>
</div>
<template id="myTemplate">
<div>
<slot name='left'><span>左边</span></slot>
<slot name='center'><span>中间</span></slot>
<slot name='right'><span>右边</span></slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: {
template: '#myTemplate'
}
}
})
</script>
</body>
</html>
3. 什么是编译的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component v-show='isShow'></my-component>
</div>
<template id="myTemplate">
<div>
<h1>这是子组件</h1>
<button v-show='isShow'>按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: {
template: '#myTemplate',
data: function() {
return {
isShow: true
}
}
},
},
data: {
isShow: true
}
})
</script>
</body>
</html>
4. 作用域插槽的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<my-component></my-component>
<my-component>
<template slot-scope='slot'>
<span>
{
{slot.languages.join(' - ')}}
</span>
</template>
</my-component>
</div>
<template id="myTemplate">
<div>
<slot :languages='languages'>
<ul>
<li v-for='item in languages'>{
{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好呀！'
},
components: {
myComponent: {
template: '#myTemplate',
data() {
return {
languages: ['Java', 'C#', 'JavaScript', 'Python', 'C++']
}
}
},
}
});
</script>
</body>
</html>
三、ES模块化的导入与导出
1. html内容
<!-- type的是module 由浏览器解析 -->
<script src="a.js" type="module"></script>
<script src="b.js" type="module"></script>
<script src="c.js" type="module"></script>
2. js内容
//导出
var flag = true;
function sum(num1, num2) {
return num1 + num2;
}
console.log(sum(10, 20));
// 第一种导出方式
export { flag, sum }
//第二种导出方式
export var name = '张三';
//第三种导出函数/类
//export-default 可以有一个且只能有一个
const city = '北京市';
export default city;
//导入
import { flag, sum } from './a.js';
if (flag) {
console.log('success');
} else {
console.log('fail');
}
import { name } from './a.js';
console.log(name);
//导入
import cityName from './a.js';
console.log(cityName);
//导入所有
import * as obj from './a.js';
console.log('name' + obj.name);
四、webpack的使用
1. 使用webpack命令进行打包
1.1 创建文件webpack.config.js文件
1.2 在该文件中编辑
module.exports = {
//要打包的文件
entry: './src/main.js',
//输出地址及文件名
output: {
path: './dist',
filename:'bundle.js'
}
}
1.3 动态的获取绝对路径
1.3.1 使用node包
const path = require('path');
1.3.2 命令
//命令
npm init
//参数设置
package name:meetwebpack
version:
description:
entry point:index.js
test command:
keywords:
author:
license:
is this ok?
生成package.json文件
1.3.3 npm install 命令
1.3.4 编辑webpack.config.js文件
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'./dist'),
filename:'bundle.js'
}
}
1.4 命令行输入webpack
2. npm run build 与 webpack的对应
2.1 编辑package.json文件
在"scripts"中设置"build": “webpack”
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC"
} {
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"t": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC"
}
2.2 使用npm run build进行打包
3. 局部安装webpack
npm install [email protected] --save-dev
//会多出一个node_modules文件夹
五、webpack中使用css文件
1. 编写.css文件并引入到响应的.js文件中
const { sum, mul } = require('./js/mathUtils.js');
console.log(sum(10, 20));
console.log(mul(10, 20));
//3.依赖css文件
require('./css/normal.css');
2. 安装css-loader
npm install --save-dev css-loader
3.安装style-loader
npm install style-loader --save-dev
4. 在webpack.config.js中进行配置
const path = require('path');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [{
test: /\.css$/,
// css-loader只负责将css文件进行加载
//style-cloader负责将样式添加到DOM中
//当有多个loader时，是从右向左
use: ['style-loader','css-loader']
}]
}
}