v-bind:class的使用1:第一种使用方式v-bind:class='[a,b,c]'形式的用法a b c是data中的数据2:第二种使用方式v-bind:class='{}'形式的用法当然也可以配合着数据一起使用3:第三种使用方式(其实和第二种方式是一样的)v-bind:class='json',引号里可以直接存放一个json类型的变量，其实也就是第二种形式的写法，换了一个地方而已。v-bind:style的使用1:第一种使用方式2:第二种使用方式(其实就是第一种方法的位置换了一个地方)3:第三种用...
目录前言Vue没有Proxy会怎么样？proxy开始前言在讲解Proxy之前，我们有些前置知识点是必要掌握的：Object相关静态函数Reflect相关静态函数简单说明知识盲点名称介绍Object.isExtensible()方法判断一个对象是否是可扩展的（是否可以在它上面添加新的属性）Object.setPrototypeOf()方法设置一个指定的对象的原型 ( 即, 内部[[Prototype]]属性）到另一个对象或nullObject.preventExtensions()方法让一个对象变的不可扩展，也就是永远不...
vue中的周期函数=生命周期函数=生命周期钩子=生命周期事件 说白了就是创建一个实例对象后，从创建 运行 以及销毁中所发生的事件：什么是生命周期：从vue实例的创建 运行 销毁过程中会伴随各种各样的事件，这些事件统称为周期函数1.创建期间的周期函数：beforecreate():实例在内存中刚被创建出来，此时还没有初始化好data和methods属性created():实例已经在内存中创建好，此时data和methods已将ok,此时还没有编译模板beforemount(...
1.动画基础使用：给哪个元素添加动画，只需要给元素用<transition>标签包裹起来就可以<transition><div class="box" v-show=‘isShow‘></div> </transition>之后去样式中设置6个类名即可 .v-enter {opacity: 0;}.v-enter-to {opacity: 1;}.v-enter-active {transition: all 2s;}.v-leave {opacity: 1;}.v-leave-to {opacity: 0;}.v-leave-active {transition: all 2s;}如果页面中有多个元素需要添加不同的动画，那么只需要给<tran...
最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和 $route。router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,que...
Vue中监听input框在输入之后按下回车的事件：可以在input的属性中添加@keyup.enter="方法名称"问题描述：当输入结束时，按enter键，页面刷新，不希望刷新问题分析：当form表单中，只有一个输入框时，按Enter键，会导致表单提交，会刷新页面解决方案：网上提供了在form上添加@submit.native.prevent发现容易出现不可预测问题最终找到：在input元素上添加阻止默认表单提交事件onkeypress="if(event.keyCode == 13) return false;"——...
简单了解provide和injectprovide 和 inject 主要为高阶插件。并不推荐直接用于应用程序代码中。provide 和 inject因为组件引入的层次过多,子孙想要获取祖先组件的内容不仅麻烦代码结构也容易混乱,这时候我们需要使用provide 和 injectprovide和inject需要一起使用 在这里不论子组件有多深，只要调用了inject就可以注入provider中的数据。而不是局限于只能从当前父组件的prop属性来获取数据。我们也可以把依赖注入当作大范围可用的p...
大家好，今天为大家讲解一下 Vue 中的观察者，及发布和订阅的实现1、首先我们来创建一个观察者。/*** 观察者*/ class Watcher{constructor(vm,expr,cd){this.vm = vm;this.expr = expr;this.cd = cd;//存放旧值this.oldValue = this.get();}get(){ //获取旧值Dep.target = this; //先把自己放到 this 上//取值时 把这个观察者和数据关联起来let value = CompileUtil.getVal(this.vm,this.expr);Dep.target = null; //不取消 任何值...
class样式绑定： <!DOCTYPE html> <html> <head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="./vue.js"></script><!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> --><style type="text/css">.activated{color: red;font-weight: bold;}</style> </head> <body><div ><div @click="handleDivClick" :><h1>hello world</h1></div></...
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。--官网简介注意：只要想要在Vue中直接操作DOM元素，就必须用ref属性进行注册;https://www.cnblogs.com/web-cuicui/p/12629079.html在这块中，引用ref这个属性只要是为了操作下拉框。原文：https://www.cnblogs.com/web-cuicui/p/12637400.html
参考官网资料解决： 原文：https://www.cnblogs.com/xiaojitui/p/12966224.html
前端Vue后端Django如何使用csrf? 后端Django在settings.py中将注释掉的csrf中间件取消注释（如果之前注释过）‘django.middleware.csrf.CsrfViewMiddleware‘,前端Vue的main.js中加上如下代码： import Axios from ‘axios‘let getCookie = function (cookie) {let reg = /csrftoken=([\w]+)[;]?/greturn reg.exec(cookie)[1]}Axios.interceptors.request.use(function(config) {// 在post请求前统一添加X-CSRFToken的header信息l...
Vue中的Class Component使用指南本文由官方文档进行翻译而来，限于笔者英文能力和对技术理解能力有限，翻译或有不准确和出错之处，请多多包涵，可于评论中点出。 原文地址：Vue Class Component一般性指引使用@Component注解，将类转化为 Vue 的组件，以下是一个示例import Vue from ‘vue‘ import Component from ‘vue-class-component‘// HelloWorld class will be a Vue component @Component export default class HelloWor...
1.计算属性的特殊，只能当属性进行使用。2.计算属性由两部分，平常这样写 computed: {//计算有几个完成的事情add: function() {var sum = 0;this.todos.some(item => {if (item.completed == true) {sum++;}})return sum;}}实际上就是使用了get方法，当item.complete的值进行变化的时候，就会自动触发。当用全选按钮进行全选的时候， // 使用计算属性的方式处理全选的联动效果toggleStat: {get() {console.log("调用了get");retu...
1.组件是什么 组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。通常一个应用会以一棵嵌套的组件树的形式来组织；1.1组件的声明及使用 全局组件<body><div id="app"><!-- 用全局组件的名称作为HTML的标签 --><myzujian></myzujian></div></body> <script>//设置全局组件Vue.component("myzujian",{template:"<h2>我是全局组件</h2>"});var app=new Vue({el:"#app"...