文章目录
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>