实例的生命周期函数（官方11个）：beforeCreate：在实例部分（事件/生命周期）初始化完成之后调用。created：在完成外部的注入/双向的绑定等的初始化之后调用。beforeMount：在页面渲染之前执行。mounted：dom 元素在挂载到页面之后执行。首次加载页面时，不会走这两个钩子，只有当数据发生改变时才会执行：beforeUpdate：数据改变，还没重新渲染之前执行。updated：渲染数据完成之后执行。执行销毁需要调用：vm.$destroy()beforeD...
render函数使用 1.介绍：我们可以使用javascript动态的插件元素模板，不使用template使用js来创建// child.vue
<script>
export default {props: {myData: Array
},// render函数：第一个参数是html标签，或者是一个对象，或者是一个函数，第二个参数是元素的相关配置。render: function (h) {return h(‘h1‘, {// class属性‘class‘: {foo: true,bar: false},// 组件的props props: {myData: Array},// style属性 sty...
首先构建一个测试demo如下图:接着来探讨路由配置界面import Vue from ‘vue‘
import Router from ‘vue-router‘
// import HelloWorld from ‘@/components/HelloWorld‘
Vue.use(Router)const router = new Router({routes: [{path: ‘/‘,name: ‘HelloWorld‘,component: resolve => require([‘@/components/HelloWorld‘], resolve)}, {path: ‘/login‘,name: ‘login‘,component: resolve => require([‘@/components/lo...
在vue中使用函数对字符串做相应的处理：split：分割字符，将每个字符分割为一个数组值；reverse：将字符进行逆序排序；join：将字符连接；最终输出结果。原文：https://www.cnblogs.com/KKSoft/p/11619903.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Document</title><style>.show1 {color: blue;cursor: pointer;}</style></head><body><div id="app"><p>vue的过滤器</p><div>价钱：{{getPrice(80)}}</div><div>{{jishu()}}</div></div></body><script src="vue.js"></script><script>new Vue({el: ‘#app‘,data: {books: [{id: 1...
Vue,品牌列表案例（仅添加,删除，搜索，全局过滤器，私有过滤器，日期填充，自定义按键修饰符，全局自定义指令文本框获取焦点，bind函数拿到传递的颜色值，自定义私有指令和指令函数的简写） p34 p35 1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title></title> 6<script src="../js/vue.js"></script> 7<link rel="stylesheet" type="text/css" href="../css/bootstrap.css"/> 8</head> 9<body> 10<di...
在日常开发中有很多场景我们都需要用到节流函数和防抖函数，比如：实现输入框的模糊查询因为需要轮询ajax，影响浏览器性能，所以需要用到节流函数；实现手机号、姓名之类的的验证，往往我们只需要验证一次，这个时候我们就需要用到防抖函数；但是网上的很多资料都是不够具体和便于理解。
基本代码如下 <el-input placeholder="请输入搜索内容" suffix-icon="el-icon-search" class="searchItem searchInput" v- model.trim=...
什么是 DOM？如果我们把这个 HTML 加载到浏览器中，浏览器创建这些节点，用来显示网页。所以这个HTML映射到一系列DOM节点，然后我们可以使用JavaScript进行操作。例如：let item = document.getElementByTagName(‘h1‘)[0]
item.textContent = "New Heading"
VDOM网页可以有很多DOM节点，这意味着DOM树可以有数千个节点。这就是为什么我们有像Vue这样的框架，帮我们干这些重活儿，并进行大量的JavaScript调用。然而，搜索和更新数...
官网文档：https://vuex.vuejs.org/zh-cn/api.html 最底部mapState此函数返回一个对象，生成计算属性 - 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。mapState可以声明多个需要在组件中引入：import { mapState } from ‘vuex‘...mapState({ // ... }) 对象展开运算符 mapGetters将store中的多个getter映射到局部组件的计算属性中组件中引入import { mapGetters } from ‘vuex‘ 组件的compute...
计算有多少条数据，并显示数据的个数（有两种方法，一种是函数的写法，一种是属性的计算使用computed）<template> 函数的写法 ：{{getResourceListLength()}} 计算属性的写法：{{getResourceListLength}}</template> <script>import {toRefs, reactive,computed} from "vue";import ResourceList from ‘@/components/ResourceList.vue‘; export default { components:{ ResourceList, },setup(){ cons...
在vue项目中，我们可以自定义组件，像element-ui一样使用Vue.use（）方法来使用，具体实现方法：1.首先新建一个Cmponent.vue文件// Cmponent.vue
<template><div>我是组件</div>
</template><script>export default {}
</script><style scoped>div{font-size:40px;color:#fbb;text-align:center;}
</style>2.其次在同一目录下建立index.js文件,在这个文件中使用install方法来全局注册该组件import component from ‘./Cmponent.vue...
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script><style>.ball {width: 15px;height: 15px;border-radius: 50%;background-color: red;}</style></head><body><div id="app"><input type="button" value="快到碗里来...
目标:封装一个 搜索组件 <子组件需要传一个或者多个搜索参数到父组件,然后父组件执行列表查询函数>1.子组件1 <div>
2 <input v-model="listQuery.keyword">
3 <span>筛选搜索</span>
4 <el-button @click="search" >查询搜索</el-button>
5 </div>methods: {search(){//this.$emit(‘父组件名称‘,传到父组件的参数);this.$emit(‘searchListZ‘, this.listQuery);this.$parent.getList(...
action与Mutation类似，Mutation用于同步函数，action用于异步函数。异步函数需要通过先action再传递到mutations，这样才能被Devtools记录下来。使用方法1 组件发布行为 dispatchsrc\App.vue methods:{addition(){this.$store.commit(INCREMENT)},updateInfo(){// this.$store.commit(‘updateInfo‘)this.$store.dispatch(‘aUpdateInfo‘)}}2 传入actions src\store\index.js actions:{//context 上下文 aUpdateInfo(cont...
<!DOCTYPE html>
<html><head><title></title><script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script></head><body><div id="app"><p>{{ message }}</p></div><script type="text/javascript">var app = new Vue({el: ‘#app‘,data: {message : "xuxiao is boy" },beforeCreate: function () {console.group(‘beforeCreate 创建前状态===============》‘);console.log("%c%s", "color:red"...
