![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
艺术就是派大星220
这个作者很懒,什么都没留下…
展开
-
Vue-router
<body> <div id="app"> <h1>{{name}}</h1> <router-link to="/homeqqq" tag='button'>首页</router-link> <router-link to="/listqqq">列表页</router-link> <keep-alive include='www'&.原创 2021-09-30 11:43:57 · 66 阅读 · 0 评论 -
axios的配置
const axios=require('axios'); //创建axios对象axios.defaults.baseURL='http://192.168.56.100:8888'; //vue请求后端地址axios.defaults.timeout=1000; //多久超时axios.defaults.withCredentials= true; //携带cookie需要添加/** * 设置请求传递数据的格式(看服务器要求的格式).转载 2021-09-21 16:34:33 · 585 阅读 · 0 评论 -
Vuex (实现任意组件之间的数据交互)
<body> <div id="app"> <h1>{{name}}</h1> {{$store.state.color}} <bro1></bro1> <bro2></bro2> </div></body></html><template id='bro1'> <d.原创 2021-09-19 22:35:58 · 447 阅读 · 0 评论 -
vue自定义指令和动画transition
<body> <div id="app"> <h1 v-color123='col' v-permission='1'>{{name}}</h1> <div v-color123>{{name|money}}</div> <qqq></qqq> </div></body></html><scri...原创 2021-09-19 22:24:33 · 237 阅读 · 0 评论 -
vue一个关于v-model的面试题
题目要求:页面显示一个字符串以空格隔开例如‘天才 派大星’,下面设置两个input框,改变input的内容,前一个input框绑定字符串空格前的字符,后一个绑定空格后的字符图示:代码如下:<body> <div id="app"> <h1>{{name}}</h1> <!-- <input type="text" v-model='name'> --> ...原创 2021-09-19 22:21:36 · 688 阅读 · 0 评论 -
vue实现子组件和父组件之间的组件通信问题
拿案例来说明:要求:现要实现一个投票组件,点击支持,支持人数加一,总人数加1;点击反对,反对人数加一,总人数加一;支持率动态变化 支持率 = 支持人数/总人数<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> .原创 2021-09-16 23:37:09 · 501 阅读 · 0 评论 -
vue的生命周期函数
上图:<body> <div id="app"> <h3 id="title">{{name}}</h3> </div> <!-- IMPORT JS --> <script src="node_modules/vue/dist/vue.min.js"></script> <script> let vm = new Vue({ el: '#app', ..原创 2021-09-15 23:15:03 · 156 阅读 · 1 评论 -
vue中的组件化开发(全局组件,局部组件,插槽)
组件是可复用的 Vue 实例,且带有一个名字。组件提高开发效率,实现敏捷性开发VUE中的组件分为两种:全局组件/私有组件全局组件:创建组件后直接在页面中调取使用即可私有组件:需要在页面渲染的时候(new Vue)基于components注册一下才能使用全局组件全局组件使用模板Vue.component([name],[options]):[name]是组件的名字: 命名规范遵循两种模式 ...原创 2021-09-15 23:08:58 · 369 阅读 · 0 评论 -
vue数据驱动原理(object.definePeoperty)和视图驱动原理(v-model)的实现
vue双向数据绑定的实现原理Vue 主要通过以下 4 个步骤来实现数据双向绑定的: 实现一个监听器 Observer:对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。 实现一个解析器 Compile:解析 Vue 模板指令,将模板中的变量都替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更.原创 2021-09-15 21:52:47 · 417 阅读 · 0 评论 -
vue元素样式class和style的绑定
在项目中基于业务需求动态控制元素样式的时候,需要进行一些特殊的处理静态样式直接编写即可:<div class="box" style="margin: 20px auto;">使用v-bind:来设置行内样式在动态的STYLE中,基于对象方式处理 属性名:修改的样式 属性名使用驼峰命名法 fontSize zIndex ...属性值:设置的样式“值”<div class="static" v-bind:class="{ active: isAct...原创 2021-09-15 21:38:28 · 289 阅读 · 0 评论 -
vue的计算属性和侦听器(computed&&watch)
计算属性computed模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example">{{ message.split('').reverse().join('') }}</div>所以,对于任何复杂逻辑,你都应当使用计算属性代码案例:<body> <div id="app"> <h1>{...原创 2021-09-15 11:19:30 · 118 阅读 · 0 评论 -
vue过滤器的使用
过滤器可以用在两个地方:双花括号插值(小胡子语法)和v-bind表达式<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>案例使用:<body> <div id="app"> <h1>{{name}}</h1...原创 2021-09-15 10:55:03 · 71 阅读 · 0 评论 -
vue中的事件处理
vue可以用v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码(或者指定一个封装函数)v-on:实现点击事件处理<div id="app"> <!-- `greet` 是在下面定义的方法名 greet方法也可以传递实参--> <button v-on:click="greet($event)">Greet</button></div>var vm = new Vue({ el: '#ap.原创 2021-09-15 10:13:13 · 155 阅读 · 0 评论 -
vue 数据更改能触发视图更改原理(Object.defineProperty()方法)
数组变异方法简单来所,数组变异方法修改vue中数据可以使视图更新数组方法push , pop , unshift ,shift ,reverse ,splice , sort 在vue中 称为数组的变异方法普通数组方法修改vue中的数据,并不会引起视图更新forEach , map , filter , some , every, find , reduce , includes ......原创 2021-09-14 09:16:36 · 675 阅读 · 0 评论 -
Vue常用指令
vue指令写在标签的行内样式上v-model = '变量' 数据双向绑定 相当于 把 这个变量跟这个表单元素绑定在一起了;变量改变 表单元素的内容跟着改变,内容改变 变量也会跟着更新 v-bind 数据单向绑定,用于动态改变标签内的属性 ,代替 v-bind:src='变量' 是专门用来处理行内属性(src class style ...)的指令 ,v-bi...原创 2021-09-14 09:08:36 · 63 阅读 · 0 评论