VUE前端

最新推荐文章于 2024-07-20 16:46:53 发布

MXYang_ing

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量458

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/MXYang_ing/article/details/125601209

版权

使用VUE开发的时候，不需要js直接操作html的DOM元素元素，只需要管理js的变量值，html会自动更新这些值（双向绑定）。少量语句就可以实现原始方式大量编码才能实现的功能。

index.html <body>里面就一个元素，<div id="app"></div>表示本html绑定了一个id为app的VUE对象。body的app关联SRC/App.vue.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>back-manage</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

2.。.main.js· 定义了一个app的VUE对象，index.html就可以找到它了

new Vue({ //new Vue语句就是定义了一个VUE对象
el: '#app', //vue对象的id是app
router,
components: { App }, //vue的组件名是APP
template: '<App/>' //template 名是APP
})

3. Aapp.vue

App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。

.　将html、js、css写到一个后缀名.vue的文件中，区分这三种类型用<template>、<script>、<style>，这个.vue文件在打包的过程中会被转换成浏览器能识别的传统html、js、css。

<template>
    <div id="app" class="fillcontain">
        <!-- 对应的组件内容渲染到router-view中 -->
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
    }
</script>

<style lang="less">
    @import './style/common';
</style>

4.. index.js

讲解的是router目录下的index.js.

//这里的配置决定了App.vue里<router-view/>位置会展示什么内容
export default new Router({
routes: [
{
path: '/', //当用户访问http://localhost:8080/根目录也就是默认目录会被路由到HelloWorld组件，
//这个组件的所有内容会被在App.vue里<router-view/>显示出来
name: 'HelloWorld',
component: HelloWorld
}
]
})

MXYang_ing

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
VUE前端

使用VUE开发的时候，不需要js直接操作html的DOM元素元素，只需要管理js的变量值，html会自动更新这些值（双向绑定）。少量语句就可以实现原始方式大量编码才能实现的功能。index.html 里面就一个元素，表示本html绑定了一个id为app的VUE对象。body的app关联SRC/App.vue.<!DOCTYPE html><html> <head> <m...
复制链接

扫一扫