输入等dom为什么会有高亮显示?

单文件组件的代码写法:在App.vue中写:
- <div>
- hello world--{{myname}}
- div>
-
- <script>
- // export default是ES6的导出规范
- // 可以写成ES6的代码,因为安装了babel,会自动帮你把ES6转换为ES5的,就少了很多兼容性问题了
- export default {
- data () {
- return {
- myname: 'yiyi'
- }
- }
- }
- script>
- <style>
- div{
- background: skyblue;
- }
- style>
(1)引入全局的子组件:
(建议:文件夹用小写,组件用大写开头,好看方便;)

- import navbarItem from './mycomponents/NavbarItem.vue'//引入子组件
- import Vue from 'vue'//引入vue
- Vue.component('navbar-item', navbarItem)//注册子组件
完整代码:
- <div>
- hello world--{{myname}}
- <navbar-item>navbar-item>
- div>
-
- <script>
- import navbarItem from './mycomponents/NavbarItem.vue'
- import Vue from 'vue'
- Vue.component('navbar-item', navbarItem)
-
- // export default是ES6的导出规范
- // 可以写成ES6的代码,因为安装了babel,会自动帮你把ES6转换为ES5的,就少了很多兼容性问题了
- export default {
- data () {
- return {
-
- myname: 'yiyi'
- }
- }
- }
- script>
- <style>
- div{
- background: skyblue;
- }
- style>
结果:

(2)引入局部的子组件:
import navbarItem from './mycomponents/NavbarItem.vue'
- export default {
- data () {
- return {
- myname: 'yiyi'
- }
- },
- components: {
- navbarItem: navbarItem// 当key和value名称一样时,可以省略value
- // navbarItem
- }
- }
完整代码:
- <div>
- hello world--{{myname}}
- <navbar-item>navbar-item>
- div>
-
- <script>
- import navbarItem from './mycomponents/NavbarItem.vue'
- // import Vue from 'vue'
- // Vue.component('navbar-item', navbarItem)
-
- // export default是ES6的导出规范
- // 可以写成ES6的代码,因为安装了babel,会自动帮你把ES6转换为ES5的,就少了很多兼容性问题了
- export default {
- data () {
- return {
- myname: 'yiyi'
- }
- },
- components: {
- navbarItem: navbarItem// 当key和value名称一样时,可以省略value
- // navbarItem
- }
- }
- script>
- <style>
- div{
- background: skyblue;
- }
- style>
结果:
