目录
3 v-slot: 插槽, 具名插槽 slot,slot-scope过时了 2.6.0使用v-slot
4 组件的data为什么是个函数然后返回对象,以前使用vm时都是个对象
5 scoped: style标签的scoped="scoped" 生成css的使用作用域只有当前组件内部的选择器生效
7 在使用计算属性的时候，函数名和 data 数据源中的数据可以 同名吗？
14、对于 Vue 中响应式数据原理的说法，下列哪项是不正确的？
组件基础（面试）
组件一：
<div id='app'>
<Box></Box>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
Box: {
template: `<div>
<h1>6666</h1>
<p>hello</p>
</div>`
}
},
})
</script>组件二：
<div id='app'>
<Box></Box>
</div>
<script>
let a1 = {
template: `<div>
<h1>6666</h1>
<p>hello</p>
</div>`
}
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
//注册组件
Box: a1
}
})
</script>组件三：
<div id='app'>
<Box></Box>
</div>
<script type="module">
//1.导入
import Box from "./componnets/Box.js"
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
Box
}
})
</script>组件四：
<div id='app'>
<Box></Box>
<Box2></Box2>
</div>
<script type="module">
//1.导入
import Box from "./componnets/Box.js"
var vm = new Vue({
el: '#app',
data: {},
methods: {},
components: {
//2.注册组件
Box,
Box2:{
template:`<div>
<h1>666-box2</h1>
<p @click="fn">{
{msg}}</p>
</div>`,
data:function(){
return {msg:"msg66666"}
},
methods:{
fn(){console.log("Box2组件的方法")}
},
filters: {},
watch: {},
computed: {},
directives: {},
beforeCreate() {},
}
},
filters: {},
watch: {},
computed: {},
directives: {},
beforeCreate() {},
})
</script>1.全局组件:
全局:所有组件共同的功能(指令,过滤器,组件)
组件的属性不能用大写字母
注册组件时，组件名不要用系统已经使用过的，组件template模板中，只能有一个根元素
组件的名字可以用驼峰命名法,但是使用的时候必须用连字符
全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)注册的组件不要跟系统标签同名
2.局部组件:
局部:只有当前组件的功能(指令,过滤器,组件)
一个vm（根组件）实例可以有多个局部组件,但是只能供当前vm实例使用
3.组件的嵌套:
.vue文件既可以是一个页面,也可以是一个组件
它可以被别人.vue文件引入 然后作为组件使用
<style type="text/css">
.app {
width: 400px;
height: 900px;
background-color: gold;
}
.box1 {
width: 200px;
height: 200px;
background-color: darkorange;
margin: 20px;
}
.box11{
width: 100px;
height: 50px;
background-color: hotpink;
margin: 20px;
}
</style>
<div id='app' class="app">
<Box1></Box1>
<Box1></Box1>
<Box2></Box2>
<p>{
{msg|box1tool}}</p>
<p v-color2="'blue'" v-color>{
{msg|alltool1}}</p>
<allbox></allbox>
</div>
<script>
// 全局:所有组件共同的功能(指令,过滤器,组件)
// 局部:只有当前组件的功能(指令,过滤器,组件)
Vue.filter("alltool1",function(str){
return str+"-alltool1"
})
Vue.filter("alltool2",function(str){ //注册过滤器
return str+"-alltool1"
})
Vue.directive("color",function(el,obj){ //注册全局自定义指令
el.style.color=obj.value||"red"
})
Vue.component("allbox",{
template:"<div>6666allbox</div>"
})
var vm = new Vue({
el: '#app',
data: {
msg:"appdata"
},
methods: {},
components: {
Box1: { // 不能访问上面的data
template: `<div class="box1">
<p>{
{msg|box1tool}}</p>
<p v-color2="'blue'" v-color>{
{msg|alltool1}}</p>
<Box11></Box11>
<allbox/>
</div>`,
data: function() {
return {
msg: "hello"
}
},
methods: {},
filters: {
box1tool(str) {
return str + "box1-filter"
}
},
directives:{
color2:{
inserted(el,obj){
el.style.background=obj.value||"red"
}
}
},
components:{
Box11:{ //组件的嵌套
template:`<div class="box11">
<h1>box11</h1>
</div>`
}
}
},
Box2:{
template:`<div>
<h1>{
{msg|box1tool}}</h1>
<h1>{
{msg|alltool1}}</h1>
</div>`,
data:function(){
return {
msg:"box2data"
}
}
}
}
})
</script>4.单文件组件:
vue create init ==>下载后启动，就会自己生成vue页面
引入:@1官方脚手架 @2挂载vm对象 @3组件引入并渲染到vm中
单文件组件也有全局组件和局部组件
只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册
引入文件时:一般使用相对路径 上一下用../ 同级使用./ 下级使用/ @ 代表src文件夹注册的组件名不能跟Vue中的和原生DOM的重名，注册的名字是驼峰，使用时就用连字符
注册的组件，使用时可以用双标签也可以用单标签：如果有插槽必须使用双标签
如果.Vue的script注释了，在打包的时候Vue的打包环境，会帮我们把这个文件解析为一个对象，然后给这个对象添加一个template属性，值为解析的<template>页面模板
==>所以.Vue文件中可以没有script，style标签，但是不能没有template（注册组件的时候有就可以了，没有导出语法，加载器 脚手架会去创建对象）
（至少有一个模板或者render函数）
不写script标签==>称为静态组件
每一个组件内部只能有一个根元素，不要在根元素上写v-for
style标签可以写多个，也可以不写
在项目下创建vue.config.js 就是vue的打包配置文件:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false//关闭eslint的严格模式检测
})
<div id="app">
<nav1 son-proprety="子组件使用时属性传进去的值"></nav1>
<content1 img2src="./img/2.png"></content1>
</div>
<div id="app2">
<nav1 son-proprety="子组件使用时属性传进去的值2"></nav1>
<content1 img2src="./img/2.png"></content1>
</div>
<script type="text/javascript">
//祖册全局组件
Vue.component("nav1",{
data(){return {sondata:"子组件的数据"}},
template:`<div><h1>{
{sondata}}</h1><p>{
{sonProprety}}</p></div>`,
props:["sonProprety"]
})
// let content1={
// data(){return {img1:"./img/1.png"}},
// template:`<div><img :src="img1"/><img :src="img2src"/></div>`,
// props:["img2src"]
// }
new Vue({
el:"#app",
data:{},
components:{
// content1
//注册局部组件
content1:{
data(){return {img1:"./img/1.png"}},
template:`<div><img :src="img1"/><img :src="img2src"/></div>`,
props:["img2src"]
}
}
})
new Vue({
el:"#app2",
data:{}
})
</script>组件一：
index.html
<style type="text/css">
.nav1{
width: 100%;
height: 40px;
background-color: gainsboro;
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
}
.nav1 div{
margin-left: 20px;
l
最低0.47元/天 解锁文章
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
