Vue3 框架基础随笔 (一)

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

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