vue 学习笔记 2

课程来源

基础部分

slot

这东西好像被废弃了,以后使用 v-slot((

比如淘宝手机版顶上,可能是搜索框,可能是没有搜索的导航条。这个地方就写个插槽然后插上对应的组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
<div id="app">
<cpn><button>button</button></cpn><!-- 这就插到插槽里头了。写多个的话会一起替换掉 slot -->
<cpn><h2>qwq</h2></cpn>
</div>
<template id="cpn">
<div>
<h2>slot 在下头</h2>
<slot></slot><!-- 里头可以写个默认的 -->
</div>
</template>
<script>
const app = new Vue({
el: "#app",
components: {
cpn: {
template: "#cpn"
}
}
});
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
<div id="app">
<cpn><button>button</button></cpn>
<cpn><button slot="right">toRight</button></cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>left</span></slot>
<slot><span>middle</span></slot>
<slot name="right"><span>right</span></slot>
</div>
</template>

父组件模板的所有东西都会在父级作用域内编译,子组件的在子级作用域里编译。如果子组件有数据,父组件想把数据改一改放到子组件的插槽中去,因为编译作用域的存在,不能直接在父组件里头用 mustache 语法写子组件的数据。新版本作用域插槽要用 v-slot。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<body>
<div id="app">
<cpn>
<template v-slot="qwq"><!-- 获得子组件的数据 -->
<div v-for="item in qwq.data">
{{ item }}
</div>
<h1>{{ qwq.data2 }}</h1>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data="lan" :data2="nal"></slot><!-- 把子组件的数据绑到喜欢的名字上 -->
</div>
</template>
<script>
const app = new Vue({
el: "#app",
components: {
cpn: {
template: "#cpn",
data() {
return {
lan: ['a', 'b', 'c'],
nal: 19
}
}
}
}
});
</script>
</body>

模块化

1
2
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
1
2
3
4
5
6
7
8
var a = 10;
export {a}//1
export function sum(a, b) {//2定义时导出
return a + b;
}
export default function (str) {//3匿名导出
console.log(str);
}
1
2
3
4
5
6
import {a, sum} from "./aaa.js"//导入普通的
console.log(a);
console.log(sum(1, 3));

import addr from "./aaa.js"//导入 default 的
addr("nihao")

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js"
},
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
}

main.js

1
2
3
4
5
6
import {sum, mul} from "./js/mathUtils.js";

console.log(sum(1, 3));
console.log(mul(2, 3));

require("./css/style.css");//css也要引用。用先 css-loader 再 style-loader,和上面写的顺序相反。

顺带一提,箭头函数的 this 是向外层作用域一层一层查找 this,直到查找到。

Vue Cli

router

单页面富应用 SPA,就是在前后端分离的基础加上了前端路由。

打赏
  • © 2018-2020 poorpool
  • Powered by Hexo Theme Ayer
    • PV:
    • UV:

请我喝杯草莓芝士奶盖吧~

支付宝
微信