VUE前端

最新推荐文章于 2022-12-04 13:59:56 发布

原创最新推荐文章于 2022-12-04 13:59:56 发布 · 959 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍如何使用Vue.js框架简化Web应用开发流程。通过定义VUE对象与组件，结合路由配置，实现页面内容的自动更新及高效切换。

使用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
}
]
})