Vue
Jookerone
这个作者很懒,什么都没留下…
展开
-
无法将“xxx”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次
在命令前添加npx原创 2021-10-15 18:13:58 · 8423 阅读 · 4 评论 -
vue优化:
把非首屏的组件变成异步组件,异步加载。//Ensure a function is called only once function once(fn:Function): Function{ let called = false; return function(){ if(!called){ called = true; fn.apply(this,arguments) .原创 2021-09-18 23:51:03 · 54 阅读 · 0 评论 -
Math.floor和 | 0
或0 的作用跟Math.floor一样都是向下取整原创 2021-09-13 18:07:12 · 188 阅读 · 0 评论 -
nextTick
数据虽然变化了,但dom还没更新,可以用 await nextTick();原创 2021-09-11 16:56:42 · 84 阅读 · 0 评论 -
path.resolve
path(__dirname, '../', 'src/web/test.js')__dirname: 当前文件所在的目录,'../' : 当前文件所在的目录的上一级目录,'src/web/test.js': 该上一级目录里面的src/web/test.js文件原创 2021-08-21 15:35:43 · 106 阅读 · 0 评论 -
watchEffect 防抖
watchEffect(onInvalidate => { console.log('execute watchEffect:' + val.value); let timer = setTimeout(() => { console.log(val.value); }, 1000); onInvalidate(() => { //初次不会执行,第二次开始就率先执行 console.log('execut原创 2021-08-01 18:42:13 · 228 阅读 · 0 评论 -
vuex 跨过了commit 直接修改state的数据会怎样?
如果直接this.$store.state = xxx ;的话Chrome的vue devtool 插件就无法监听观察到state的变化;所以必须通过commit 给mutation来修改state的数据原创 2021-06-03 00:10:41 · 482 阅读 · 2 评论 -
v-show
v-show 的机制是加载后,根据条件判断是否显示switch 比较用的是全等(非整数 | 0) == Math.floor(非整数)原创 2021-06-02 21:32:52 · 62 阅读 · 0 评论 -
vue 面试题
1.v-html会覆盖子元素,并且有xss危险2,computed和watchcomputed有缓存,即data不变则不会重新计算watch如何深度监听?watch监听引用类型,拿不到oldVal,因为指针的指向相同3.class 和 stylev-for和v-if不能一起使用兄弟组件通讯:1,先在event.js定义一个new Vue();import Vue from "vue";export default new Vue();2,然后在组件中引入该vue实例import原创 2021-05-29 17:30:57 · 139 阅读 · 0 评论 -
vuex
1.想改变数据,vuex 要求第一步,必须派发一个actionthis.$store.dispatch(‘change’);然后在vuex的index.js里的//mutation里面只允许写同步代码,不允许写异步代码,异步代码放在actionsmutaitions:{//第4步,对应的mutation 被执行change(){//第5步,在mutation里面修改数据this.state.name = ‘lee’;}},actions:{//第2步,store感知到你触发了一个叫做原创 2021-05-25 14:15:14 · 55 阅读 · 0 评论 -
mixin 混入
组件data,methods优先级高于mixin data,methods优先级生命周期函数 ,先执行mixin里面的,再执行组件里面的自定义的属性,组件中的属性优先级高于mixin属性的优先级原创 2021-05-25 13:35:59 · 54 阅读 · 0 评论 -
vue 过渡 动画
动画<style> @keyframes leftToRight { 50% { transform: translate3d(200px,200px,0) } } .animation{ animation: leftToRight 2s; }</style>过渡<style> .transition{ transition:background-color 3s ease } .blu原创 2021-05-25 01:31:39 · 219 阅读 · 0 评论 -
vue 知识点查缺补漏
1.v-once让某个元素标签只渲染一次2.ref获取dom节点或组件引用3. provide 和inject父组件提供(provide)数据,子孙组件注入(inject)数据来使用,但是provide中的数据是一次性的,不是双向绑定的,当provide 数据发生改变,子孙组件也不会变化,子孙组件拿到的永远是第一次拿到的值...原创 2021-05-24 13:04:09 · 69 阅读 · 0 评论 -
动态组与异步组件
<keep-alive> <component :is="currentItem"/> //currentItem是存放组件名字的变量 </keep-alive>原创 2021-05-24 12:00:33 · 57 阅读 · 0 评论 -
slot 插槽
具名插槽 子组件demo:template: `<div> <slot name="header"></slot> <div>content</div> <slot name="footer"></slot> </div>`父组件:<demo> <template v-slot:header><.原创 2021-05-24 11:21:09 · 64 阅读 · 0 评论 -
props 组件传值
props:[“message”]或者props:{message:{type:String,required:true,validator(value){ //效验传递过来的值,true为通过return value <100}default:’’,//default也可以是个函数default(){return xxx;} 默认值就是函数返回的值}}当要传递的props值很多时子组件demoprops:{ a:{ type:Number },原创 2021-05-23 22:20:52 · 527 阅读 · 0 评论 -
v-model 双向绑定
data() { return { check:false }},<div id="root"> {{check}} <input type="checkbox" v-model="check"/></div>多选data() { return { name:[] //数组 }},<div id="root"> {{name}} 张三<input type="checkbox" v-mode原创 2021-05-23 15:31:38 · 81 阅读 · 0 评论 -
事件
事件要触发多个函数时,就要加括号,多个函数以逗号分隔,比如@click=“handleClick(), handleClick2()”事件修饰符:停止冒泡:@click.stop只有点击自己的dom才会触发,点击子元素不会触发: @click.self阻止默认行为:@click.prevent事件运营模式改为捕获: @click.capture 默认是冒泡啦事件只执行一次:@click.once**按键修饰符:**enter,delete,tab点击enter:@keydown.enter原创 2021-05-23 13:40:18 · 60 阅读 · 0 评论 -
for 循环
可以循环Object(value,key,index) in Objectv-for 和v-if不能写在一起,可以给v-for改为不占位(不渲染的)template原创 2021-05-23 12:08:36 · 44 阅读 · 0 评论 -
样式
data(){return {classString:‘red’, //表示添加red类classObject:{red:true,green:true},classArray:[‘red’,‘green’,{brown:true}]}}< div :class=“classObject”> Hello world< /div>styleObject:{color:‘orange’} <div id="root" :style="styleObject原创 2021-05-23 11:20:02 · 58 阅读 · 0 评论 -
vue props 基本类型 对象类型 区别
当父组件传给子组件的props不是数组或对象类型时,子组件修改props是不会影响父组件的数据的,可以通过this.$ emit通知父组件,直接修改基本类型的props会有警告,可以通过this.$emit把值传给父组件,间接地改变props的值...原创 2021-05-16 17:41:15 · 1312 阅读 · 0 评论 -
js 日期格式化 正则表达式
export function formatDate(date,fmt){ //date是日期类型对象,fmt是yyyy-MM-dd HH:mm:ss格式的字符串 if(/(y+)/.test(fmt)){ fmt = fmt.replace(RegExp.$1,(date.getFullYear()+'').substr(4-RegExp.$1.length)); } let o = { 'M+':date.getMonth()+1, 'd+':date.getDat原创 2021-05-16 15:59:17 · 506 阅读 · 0 评论 -
vue 阻止事件冒泡
@click.stop.prevent=“pay”原创 2021-05-14 14:52:17 · 392 阅读 · 0 评论 -
vue 过渡效果
<transition name="transition-name"> 需要过渡效果的DOM <div id="box">....</div></transition>css样式#box{ opacity:1;}//v-show或v-if为true时添加transiton-name-enter-active, false时添加transiton-name-leave-active.transiton-name-enter-active原创 2021-05-11 22:00:47 · 59 阅读 · 0 评论 -
axios
// axios的基本使用// axios({// url: 'http://123.207.32.32:8000/home/multidata',// method: 'get',//其实不写就是get方式// }).then(res => {// console.log(res);// })// axios({// url: 'http://123.207.32.32:8000/home/data',// //专门针对get请求的参数拼接// par.原创 2021-01-02 20:50:49 · 54 阅读 · 1 评论 -
vuex
// /store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { counter:1000 }, mutations: { //方法 默认传入state参数 increment(state){ state.counter++ }, decrement(state)原创 2020-12-31 20:36:24 · 48 阅读 · 0 评论 -
promise
<script> new Promise((resolve, reject) => { setTimeout(() => { // resolve("hello zjh"); 调用then reject("error message") //调用reject }, 2000) }).then((data) => { console.log(data); }).c..原创 2020-12-31 11:44:28 · 78 阅读 · 0 评论 -
Vue 实现tabBar案例
引入css文件//在main.vue里面/* 在style引用css前面需要加@ ,在js文件里就直接 import */ @import "./assets/css/base.css";</style>原创 2020-12-30 20:38:15 · 279 阅读 · 0 评论 -
vue-cli3 -路由
babel 作用:es6转es5eslint:代码规范git add . 添加git commit -m ‘注释’ (将之前add的内容添加本地仓库里面)git push (提交到远程仓库)npm install 会根据package.json下载npm包定义函数:// 对象字面量中定义函数const obj = { aaa(){}, bbb:function(){},}// 箭头函数// const ccc = (参数列表) =>{}//没有参数const c.原创 2020-12-29 16:55:50 · 440 阅读 · 0 评论 -
模块化、导入/导出
var moduleA = (function(){ // 1.导出的对象 var obj = {}; var flag = true; if(flag){ console.log("哈哈哈") } function sum(num1,num2){ return num1+num2; } obj.flag = flag; obj.sum = sum; return obj;})()export/import1.type改为module后,就有原创 2020-12-20 19:34:35 · 158 阅读 · 1 评论 -
slot 插槽
组件的插槽:为了让我们封装的组件更加具有扩展性让使用者可以决定组件内部的一些内容到底展示什么原创 2020-12-18 15:44:49 · 117 阅读 · 1 评论 -
父子组件的访问方式:$children
父组件访问子组件:使用$children(通过索引下标)(很少用) 或 $refs(通过组件的ref属性,常用)<!DOCTYPE html><html><head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js">&.原创 2020-12-17 21:26:54 · 216 阅读 · 0 评论 -
Vue- 子传父
案例 1:在子组件中两个按钮+1和-1,点击后修改count整个操作的过程还是在子组件中完成,但是之后的展示交给父组件这样,我们就需要将子组件中的count,传给父组件的某个属性,比如total<!DOCTYPE html><html><head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="htt原创 2020-12-17 20:18:39 · 1422 阅读 · 0 评论 -
Vue4
组件的使用分成三个步骤:1.创建组件构造器:Vue.extend()2.注册组件:Vue.component()3.使用组件原创 2020-12-16 22:05:15 · 799 阅读 · 0 评论 -
Vue3
高级函数:map/filter/reducefilter 中的回调函数有一个要求:必须返回一个boolean值true:当返回true时,函数内部会自动将这次回调的n加入到新的数组中;false:当返回false时,函数内部会过滤掉这次的n<script> //1.找出nums中小于100的元素放到newNums const nums = [10,20,200,300,40,50]; //每次遍历一个元素都调用function,并把元素传给形参n l.原创 2020-12-13 22:20:48 · 1005 阅读 · 0 评论 -
Vue2
v-cloak的用法<!DOCTYPE html><html><head> <title>demo</title> <style> [v-cloak]{ display: none; } </style></head><body><div id="demo" v-cloak>{{messag.原创 2020-12-13 18:54:50 · 65 阅读 · 0 评论 -
音乐api
设置audio的autoplay="autoplay"后,src的值变换都会自动播放;audio还有play,pause触发事件;query:function(){ var that = this; //搜索歌曲 axios.get("https://autumnfish.cn/search?keywords="+this.keyword) .then(function(response){ .原创 2020-12-11 20:48:25 · 308 阅读 · 0 评论 -
VUE1
Vue会管理el挂载点命中的元素及其内部的后代元素可以使用其他的选择器,如class,但是建议使用id选择器可以使用其他的双标签器,不能使用HTML和BODYdata中可以写复杂类型的数据,如对象{ },数组[ ]内容绑定,事件绑定:v-text , v-html, v-on (简写@click)绑定的方法定义在methods属性中方法内部通过this关键字可以访问定义在data中的数据显示切换,属性绑定 :- v-show(根据表达式的真假,切换元素的显示和隐藏,操纵style).原创 2020-12-10 22:22:04 · 243 阅读 · 1 评论 -
vue v-model
var data = { heros: [ { id: 1, name: '盖伦', hp: 318}, { id: 2, name: '提莫', hp: 320}, { id: 3, name: '安妮', hp: 419}, { id: 4, name: '死歌', hp: ...原创 2019-10-21 20:35:04 · 89 阅读 · 0 评论