VUE框架基础部分随笔

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue可以使用简单的代码实现一个单页面应用。

基本格式

Vue通过模板语法来声明式的将数据渲染进DOM:

例如：

<div id = "app">

    {{ message }}

</div>

通过{{ }}即可将数据绑定至message位置

<script>

const data = {

    data(){

      return {

         message : 'hello Vue !'

    }

  }

}

Vue.createApp(data).mount('#app')

</script>

通过以上方法即可成功创建一个Vue实例！

响应式框架

在一个Vue实例中所有数据都是响应式的{{}}中的数据会根据Vue实例中绑定的数据的实时变化发生改变。

Data中Created,methods,watch的区别

在一个Vue实例中，Vue为用户定义了五个函数执行区域，不同的区域在Vue生命周期的不同时间执行，因此可以用于不同情况。

<script>

const data = {

    data(){

      return {

         message : 'hello Vue !'

        }

    },

    methods: {

    },
    mounted: {

    }

    watch: {

    },

    create: {

    }

}

Vue.createApp(data).mount('#app')

</script>

执行时间或作用：

created:在html加载完成之前执行先执行父组。

件再执行子组件。

mounted:在html加载完成之后执行先执行子组件再执行父组件。

methods:事件方法执行。

watch:监听一个值的变化，变化后执行。

指令

Vue中提供的特殊属性包括：v-bind , v-on , v-model。

V-bind指令

v-bind 属性:通过此属性可以绑定元素中属性的值借此实现属性的动态绑定。

例如：

vue代码：

<div id='app'>
　　<p v-bind:display='switch' >人生何处不相逢</p>
</div>

javascript代码：

<script>

const data = {

    data(){

　　　　return {

　　　　　　switch: 'none'

　　　　}

　　}

}

</script>

Vue.createApp(data).mount('#app')

</script>

以上代码即可实现动态控制<p>元素显示与隐藏。

V-on指令

v-on属性:通过此属性可以为元素添加一个事件监听器，来提高用户的交互

例如:

vue代码:

<div id='app'>

　　<buttomv-on:click='tijiao'' >提交</buttom>

</div>

javascript代码:

<script>

const data = {

    data() {

　　　　return {

　　　　}

　　}

　　methods: {

　　　　tijiao(){

　　　　　　//事件提交执行的函数

　　　　}

　　}

}

Vue.createApp(data).mount('#app')

</script>

用户点击button按钮是 vue将会调用tijiao()函数。

V-model指令:

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

例如：

vue代码：

<div id="app">

  <p>{{ message }}</p>

  <input v-model="message" />

</div>

javascript代码：

const data = {

  data() {

    return {

      message: '撑伞也是雨中人'

    }

  }

}

Vue.createApp(data).mount('#app')

以上代码即可实现用户输入与元素的双向绑定。

V-if指令:

v-if指令的值绑定data中的元素的值true或false 来控制元素的显示或隐藏。

V-for指令:

v-for指令可以实现列表渲染。

例如:

vue代码:

<div id="app">

  <ol>

    <li v-for="todo in todos">

      {{ todo.text }}

    </li>

  </ol>

</div>

javascript代码:

const data = {

  data() {

    return {

      todos: [

        { text: '落日归山海' },

        { text: '陪伴成告白' }

      ]

    }

  }

}

Vue.createApp(data).mount('#app')

构建一个组件化单页面应用

vue可以组件树的构建方式来实现一个应用程序。

通过把页面中的一部分分为不同组件实现组件化编程，提高代码的可维护性。

vue框架基本目录结构:

|--node_modules 已安装的依赖

|--public 目录存放公共资源文件 如image icon等

|--src |--assets 目录储存公共样式，图标等

       |--components 目录储存自己编写的组件文件

       |--router 目录存储页面路由规则

       |--views 目录存放自己编写的页面

       |--plugins 目录存放element等配置文件

       |--app.vue 文件是页面的入口

       |--main.js 文件是js文件的入口 你需要在这里把js文件引入进去

|--ststic 目录存放一些图片图标等静态资源

组件

app.vue文件默认结构:

<template>

    <div id = 'app'>

        项目主页

    </div>

</template>

<script>

  data () {

    return {

  }

}

</script>

<style  scoped>



</style>

main.js文件默认结构:

<script>

//    项目的入口文件 每次项目初始化都会加载此文件

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import './plugins/element.js'

import axios from 'axios'

Vue.config.productionTip = false

axios.defaults.baseURL = ''

Vue.prototype.$http = axios

new Vue({

  router,

  render: h => h(App)

}).$mount('#app')

</script>

路由

通过 Vue-router 技术实现页面的路由。

vue代码

<template>

    <router-link to='/admin'>页面跳转</router-link>

    <router-view></router-view>

</template>

javascript代码

//

// index.js 文件为编写路由的核心文件

//

import Vue from 'vue' // 引入vue

import VueRouter from 'vue-router' // 引入vue-router路由

import AboutMe from '../components/admin.vue' // 引入组件 <--

Vue.use(VueRouter) // Vue全局使用Router

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push (location) {

  return originalPush.call(this, location).catch(err => err)

}

const routes = [ // 配置路由 这里是一个数组

  {

    path: '/admin',

    name: 'admin',

    component: admin

  }

]

const router = new VueRouter({

  routes

})

export default router

下列代码实现路由 可以理解为html的<a>标签 。
<router-link to='/admin'>页面跳转</router-link>


将路由结果组件渲染到router-view中。

<router-view></router-view>

在vue应用程序中通常通过编写模块组件的方式由浅入深，自底向上的方式来实现一个大规模的应用程序。

下一篇继续了解:

1 . 使用vue创建多页面网站方法。

2 . 通过 Axios 技术发起http请求实现与后端接口的交互。

3 . 了解element-ui 组件便捷成型工具。

4 . vue-router深入理解。

16:08:46

本文章为作者个人总结，如有错误请指正。

巴特西

Vue3 框架基础随笔 (一)