前端学习——Vue学习

后端漫漫

已于 2024-03-05 11:26:50 修改

阅读量1.6k

点赞数 13

分类专栏：前端文章标签： vue.js 前端学习

于 2024-02-23 16:55:46 首次发布

本文链接：https://blog.csdn.net/m0_46638350/article/details/136255502

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

文章目录

1. < el-form> 属性 model、prop、rules
2. v-bind 与 v-model
3. v-if 与 v-show
4. v-for 循环语句
5. 计算属性 computed
6. 监视属性 watch
7. 下拉框 el-select、el-option
8. 自定义事件
9. async与await实现异步调用
10. Vue执行流程
11. 引入依赖
12. 引入样式
13. 路由 router
14. $ 符号的使用
15. 全局导入

1. < el-form> 属性 model、prop、rules

我们大致了解的el-form 中 model的作用：目前看来主要是为了配合表单验证。里面的逻辑大概是，在el-form-item上写一个prop，这个prop左手对应着数据源（即用model.prop找到对应的数据源），右手对应着验证规则（即用rules.prop找到对应的规则），然后才能快乐的验证。

<el-form ref="form" :model="form" :rules="rules" label-width="100px">
	<el-form-item label="用户名" prop="name">
    	<el-input v-model="form.name"></el-input>
	</el-form-item>
</el-form>

// 在data/return中定义规则
	form: {
        name: '',//这里是空的但截图有值 因为该项目需要拿取后端传来的用户信息 但不影响阅读
    },

ru
les: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
}

在这里插入图片描述
1. 把model去掉后，看看效果

无论你输入什么，都是显示 “请输入用户名”，看来model的作用是为rules校验传递一个能提供被检测内容的源数据。

2. 把prop去掉后，看看效果

把prop去掉后直接失去验证效果

3. prop改为address，rules改为address，看看会发生什么

效果和第一种情况一样。

2. v-bind 与 v-model

v-bind是一个单向数据绑定，映射关系：Model->View，我们不需要进行额外的DOM操作，只需要进行Model的操作就可以实现视图的联动更新。
v-model是一个双向数据绑定，映射关系：View接受的数据,传给model,model的数据再传给view。把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。

3. v-if 与 v-show

语法

<标签 v-if="true/false"></标签>

<标签 v-show="true/false"></标签>

<!--true:显示   false:隐藏-->

原理

v-if：通过创建、销毁 dom元素的方式达到显示、隐藏效果(销毁后有一个占位符 )。
v-show：通过css控制样式style达成显示、隐藏效果。

使用

v-if 有更高的切换消耗，如果运行条件不大可能改变，则v-if 较合适。
v-show有更高的渲染消耗，如果需要频繁切换，则v-show 较合适。

4. v-for 循环语句

遍历数组元素

需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

遍历对象属性

可以通过一个对象的属性来迭代数据：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

5. 计算属性 computed

声明了一个计算属性 reversedMessage 。供的函数将用作属性 vm.reversedMessage 的 getter 。vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时vm.reversedMessage 也会更新。

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

在这里插入图片描述

6. 监视属性 watch

watch:{
    tipShow(newVal, oldVal){
    	console.log("原始数值为", oldVal);
    	console.log("修改数值为", newVal);
    } 
}

7. 下拉框 el-select、el-option

el-option的属性说明

label：这是给用户看的，当点击下拉菜单时，会出来选项，用户看到的选项就是这个
value：这是你点击某个label(option)之后，将对应的值给v-model绑定的值model
key：这个呢相当于身份令牌，唯一的，防止出错，虽然没有也行，但是官网推荐还是加上为好。

<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="用户姓名" prop="userId">
        <el-select v-model='queryParams.userId' style="" class="selectClass">
          <el-option v-for='item in userList' 
          			 :key='item.userId'
                     :label="item.nickName" 
                     :value="item.userId">
            {{ item.nickName }}
          </el-option>
        </el-select>
      </el-form-item>
   </el-form>

8. 自定义事件

这里的 pushData 就是自定义事件了

实现父子组件双向传递

方法一：

方法二：

9. async与await实现异步调用

// 获取待处理事件总数
    async getTotalCount() {
      let taskCount = await this.getTaskList();
      let maintenanceCount = await this.getMaintenanceList();
      let insuranceCount = await this.getInsuranceList();
      this.totalCount = taskCount + maintenanceCount + insuranceCount;
    },

    // 获取待审批任务列表
    async getTaskList() {
      // 构造参数
      let obj = {
        state: 0,
      };
      let data = {
        ...this.page,
        ...obj,
      };

      // 访问后端，获取待审批任务列表
      return new Promise((resolve, reject) => {
        taskList(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

    // 获取保养设备列表
    async getMaintenanceList() {
      let data = {
        ...this.page,
      };

      return new Promise((resolve, reject) => {
        searchMaintenance(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

    // 获取过期设备列表
    async getInsuranceList() {
      let data = {
        ...this.page,
      };

      return new Promise((resolve, reject) => {
        searchInsurance(data)
          .then((res) => {
            if (res && res.data) {
              resolve(res.data.total);
            }
          })
          .catch();
      });
    },

10. Vue执行流程

在这里插入图片描述

11. 引入依赖

注意：import引入一个依赖包，不需要相对路径。如：import Element from ‘element-ui’;

全局引入依赖（在main.js中引入）
一旦 MyLibrary 被安装，你就可以在任何组件中直接使用它提供的功能。

// 引入依赖
import Vue from 'vue'  
import MyLibrary from 'my-library'  
import App from './App.vue'  
  
// 安装插件
Vue.use(MyLibrary)   
  
new Vue({  
  render: h => h(App),  
}).$mount('#app')

// SomeComponent.vue  这里无需再引入，直接使用就行了
<template>  
  <div>  
    <button @click="myMethod">Click me</button>  
  </div>  
</template>  
  
<script>  
export default {  
  name: 'SomeComponent',  
  methods: {  
    myMethod() {  
      // 使用 MyLibrary 提供的方法  
      const result = MyLibrary.someMethod();  
      console.log(result);  
    }  
  }  
}  
</script>

非全局引入依赖

// SomeComponent.vue  
<template>  
  <div>  
    <!-- 使用 MyLibrary 提供的组件或功能 -->  
  </div>  
</template>  
  
<script>  
import MyLibrary from 'my-library'  
  
export default {  
  name: 'SomeComponent',  
  components: {  
    // 如果 MyLibrary 提供了组件，可以在这里注册  
    MyLibrary,
  },  
  mounted() {  
    // 使用 MyLibrary 提供的方法或功能  
    const instance = new MyLibrary.SomeClass();  
    instance.doSomething();  
  }  
}  
</script>

12. 引入样式

在main.js引入样式，就是引入了全局样式，那么你就可以在任何组件中直接使用它提供的样式。

// main.js  
import '@/styles/index.scss' // global css  
import Vue from 'vue'  
import App from './App.vue'  
  
new Vue({  
  render: h => h(App)  
}).$mount('#app')

13. 路由 router

Vue的路由是一种用于在单页面应用程序（SPA）中实现页面导航的机制。它允许用户在不重新加载整个页面的情况下，通过点击链接或触发事件来导航到应用程序的不同部分。Vue路由基于Vue.js框架，使用vue-router库来实现

在这里插入图片描述

14. $ 符号的使用

在 Vue.js 中，$ 符号经常用于特殊的属性或方法，以表示它们是由 Vue 框架添加的，而不是由用户定义的。例如：

$parent：如上所述，用于访问父组件。(this.$parent.clearClusterPoints(); )
$children：用于访问子组件。
$refs：用于访问已注册的引用信息。（this.$refs.myInput.focus()）
$emit：用于触发当前实例上的事件。(this.$emit(‘child-event’, ‘Hello from child!’); )
$slots：用于访问插槽。
$root：用于访问根实例。

使用示例

<template>  
  <div>  
    <input ref="myInput" type="text" />  
    <MyComponent ref="myComponent" />  
  </div>  
</template>

<script>  
export default {  
  methods: {  
    focusInput() {  
      this.$refs.myInput.focus(); // 直接调用输入框的 focus 方法  
    },  
    callChildMethod() {  
      this.$refs.myComponent.someMethod(); // 直接调用子组件的 someMethod 方法  
    }  
  }  
}  
</script>

注意事项

$refs 只会对已经渲染的 DOM 元素或子组件实例有效。如果你尝试在组件尚未挂载或卸载后访问 $refs，将会得到 undefined。
$refs 并不是响应式的，这意味着如果你更改了 $refs 所引用的元素或组件的状态，Vue 不会触发任何更新。
$refs 主要用于直接操作 DOM 元素或访问子组件实例，而不是作为数据获取的方式。
尽量避免过度使用 $refs，因为它会绕过 Vue 的正常响应式系统。在大多数情况下，你应该优先使用 props 和 events 来实现父子组件间的通信。

15. 全局导入

在main.js中导入样式

// main.js 或 main.ts  
import Vue from 'vue';  
import App from './App.vue';  
  
// 导入全局样式  
import './assets/css/global.css';  
  
Vue.config.productionTip = false;  
  
new Vue({  
  render: h => h(App),  
}).$mount('#app');

在main.js中导入全局函数

import Vue from 'vue';  
import App from './App.vue';  
import { myGlobalFunction } from './path-to-your-file/globalFunctions'; // 导入全局函数  
  
// 将全局函数添加到 Vue 原型上  
Vue.prototype.$myGlobalFunction = myGlobalFunction;  
  
Vue.config.productionTip = false;  
  
new Vue({  
  render: h => h(App),  
}).$mount('#app');

<template>  
  <div>  
    <button @click="callGlobalFunction">Click Me</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    callGlobalFunction() {  
      // 通过 this 访问全局函数  
      this.$myGlobalFunction();  
    }  
  }  
};  
</script>

在main.js中导入全局组件

import Vue from 'vue';  
import App from './App.vue';  
import MyGlobalComponent from './components/MyGlobalComponent.vue'; // 导入全局组件  
  
// 注册全局组件  
Vue.component('my-global-component', MyGlobalComponent);  
  
Vue.config.productionTip = false;  
  
new Vue({  
  render: h => h(App),  
}).$mount('#app');

<template>  
  <div>  
    <my-global-component></my-global-component> <!-- 使用全局组件 -->  
  </div>  
</template>  
  
<script>  
export default {  
  // ...其他组件选项  
};  
</script>