Vue의 전환
非单文件组件
非单文件组件的사용
const school = Vue.extend({
//定义组件时不使用el,因为所有的组件都将使用vm管理
template:`
<div></div>
`,
data(){
return{
schoolname:'atguigu',
address:'beijing'
}
},
methods(){
}
})
data写成函数 --- 避免组件复用时,数据存在引用关系
局部注册组件
//创建vm
new Vue({
//决定组件放在哪个容器下
el:'#root'
//注册组件
components:{
school
}
})
全局注册组件
vue.component('school',school)
<school></school>
의미:
组件的命名
首字母大写:School(推荐写法)
首字母大写(kebab-case命名):MySchool(推荐写法)
组件标签的写法
不使用脚手架时, 会导致后续组件无法渲染
const school = Vue.extend({...})
简写为:
const school = {...}
组件的嵌套
new vue({
el:'#root',
components:{
app
}
})
const app = Vue.extend({
components:{
school,
student
}
})
VueComponent
이것은:
Vue의 가상 머신은 VM
组件的内置关系
vm에는 모든 vc가 있습니다.
单文件组件
App.vue
App.vue为入口文件, 通过App.vue来管理所有组件
需要在App.vue中,引入,注册,使用组件
<template>
<div>
<School></School>
<Student></Student>
</template>
<script>
//引入组件
import School from "./School";
impotr Student from "./Student";
//控制组件的交互
export default {
name:'App',
//注册组件
components: {
School,
Student
}
}
</script>
<style></style>
main.js
通过main.js管理App.vue
需要引入, 注册, 使用 App.vue , 使用el指定容器
import App from "./App.vue"
new Vue({
el: '#root',
})
index.html
index.html에서 中创建容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
</html>
Reference
이 문제에 관하여(Vue의 전환), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/huyixi/vuede-zu-jian-18i9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
