前端基础之组件

组件:实现应用中局部功能代码和资源的集合

非单文件组件

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<h1>{{msg}}</h1>

<!-- 3.编写组件标签 -->

<school></school>

<hr>

<student></student>

</div>

<script type="text/javascript">

//1.创建school组件

const school= Vue.extend({

template:`

<div>

<h2>学校名称:{{schoolName}}</h2>

<h2>学校地址:{{addr}}</h2>

<button @click="showName">点我提示学校名称</button>

</div>

`,

//不需要创建el配置项

data(){

return{

schoolName:'尚硅谷',

addr:'北京',

}

},

methods: {

showName(){

alert(this.schoolName)

}

}

})

//1.创建student组件

const student= Vue.extend({

template:`

<div>

<h2>学生名称:{{studentName}}</h2>

<h2>学生年龄:{{age}}</h2>

</div>

`,

//不需要创建el配置项

data(){

return{

studentName:'张三',

age:18

}

}

})

//1.创建hello组件

const hello=Vue.extend({

template:`

<div>

<h1>你好</h1>

</div>

`,

data(){

return{

name:'tim'

}

}

})

//2.注册全局组件

Vue.component('hello',hello)

//创建vm

const vm= new Vue({

el:'#root',

data:{

msg:'你好'

},

//2.组件注册(局部注册)

components: {

school,

student

}

})

</script>

</body>

</html>

组件的结构我们在template中使用。并且使用 ` ` 将其包裹

可以使用name配置项指定组件在开发者工具中呈现的名字

组件标准化写法

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<app></app>

</div>

<script type="text/javascript">

//定义student组件

const student=Vue.extend({

template:`

<div>

<h2>学生年龄:{{age}}</h2>

<h2>学生名称:{{name}}</h2>

</div>

`,data(){

return{

name:'尚硅谷',

age:18

}

}

})

//定义school组件

const school=Vue.extend({

template:`

<div>

<h2>学校地址:{{addr}}</h2>

<h2>学校名称:{{name}}</h2>

<student></student>

</div>

`,data(){

return{

name:'尚硅谷',

addr:'北京'

}

},

//注册子组件,局部

components: {

student

}

})

//注册hello组件

const hello= Vue.extend({

template:`

<div>

<h1>{{msg}}</h1>

</div>

`,

data(){

return{

msg:'hello'

}

}

})

//创建app组件

const app= Vue.extend({

template:`

<div>

<school></school>

<hello></hello>

</div>

`,

components:{

school,

hello

}

})

//注册组件

new Vue({

el:'#root',

components: {app}

})

</script>

</body>

</html>

我们在组件的创建的时候,需要将父组件定义在子组件的后面,并且,需要一个统一的app组件来作为所有组件的父组件,然后只将其注册到vm中即可

VueComponent 构造函数

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script> <!-- 引入Vue.js -->

</head>

<body>

<div id="root">

<school></school>

</div>

<script type="text/javascript">

//定义school组件

const school=Vue.extend({

template:`

<div>

<h2>学校地址:{{addr}}</h2>

<h2>学校名称:{{name}}</h2>

<button @click="showName">点我提示学校名</button>

</div>

`,data(){

return{

name:'尚硅谷',

addr:'北京'

}

},

methods: {

showName(){

console.log(this.name,this)

}

}

})

console.log('@',school)

new Vue({

el:'#root',

components: {

school

}

})

</script>

</body>

</html>

我们定义的组件本质上就是一个名为VueComponent的构造函数,我们在进行<school></school>的时候,vue会自动帮我们执行new VueComponent()

每次调用vue.extend(),放回的都是一个新的VueComponent,

在组件中,启动的this指向的是VueComponent,而在new Vue({})中的则是Vue

VueComponent Vue 联系

VueComponent.prototype.__proto===Vue.prototype ,VC能够同构隐式管理链能多去查找一步

VC也能去访问Vue原型上的属性、方法

也就是说,在Vue中添加的属性,VC通过隐式关系链就能访问到VM中的值

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

<div id="root">

<school></school>

</div>

<script type="text/javascript">

Vue.prototype.x=99

const school=Vue.extend({

template:`

<div>

<h2>学校地址:{{addr}}</h2>

<h2>学校名称:{{name}}</h2>

<button @click="showx">点我展示x</button>

</div>

`,data(){

return{

name:'尚硅谷',

addr:'北京'

}

},

methods: {

showx(){

console.log(this.x)

}

}

})

console.log('@',school)

const vm= new Vue({

el:'#root',

data:{

msg:'hello'

},

components: {

school

}

})

</script>

</body>

</html>


单文件组件

项目结构为

Student.vue与School.vue是我们创建的组件,App.vue是用于管理和引入这两个组件的,vm是在main.js中创建并且用于引入App.vue,index.html是文件的总入口和总div的创建

School.vue

<template>

<!-- 组件的结构 -->

<div class="demo">

<h2>学校名称:{{ name }}</h2>

<h2>学校地址:{{ addr }}</h2>

<button @click="showName">点我提示学校名称</button>

</div>

</template>

<script>

// 组件交互的代码

export default { //对外暴露

name:'School',//与vue文件命名一致

data() {

return {

name: '尚硅谷',

addr: '北京',

}

},

methods: {

showName() {

alert(this.name)

}

}

}

</script>

<style>

/* 组件的样式 */

.demo {

background: orange;

}

</style>

Student.vue

<template>

<div >

<h2>学生名称:{{ name }}</h2>

<h2>学生年龄:{{ age }}</h2>

</div>

</template>

<script>

export default {

name:'Student',

data() {

return {

name: '李四',

age:18

}

}

}

</script>

App.vue

<template>

<div>

<School></School>

<Student></Student>

</div>

</template>

<script>

//引入组件

import School from './School.vue'

import School from './Student.vue'

export default {

name:'App',

components:{

School,

Student

}

}

</script>

<style>

</style>

main.js

import App from './App.vue'

new VUe({

el:'#root',

template:`<App></App>`,

components: {

App

}

})

index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>单文件文件的语法</title>

</head>

<body>

<!-- 准备一个容器 -->

<div id="root"></div>

<script type="text/javascript" src="../js/vue.js"></script>

<script type="text/javascript" src="./main.js"></script> <!-- 入口文件 -->

</body>

</html>

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam8 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript