Vue
1 vue
angular框架
vue 谷歌集团
react.
vue是一个javascript的一个渐进式框架,使用比较多(二三线) 主要做视图 ,视图做好,然后数据改变视图会自动更新 ,无需操作dom,它自动会创建dom
2 vue核心 vue的指令
vue指令 v-开头。 {{}} 1 v-text == {{}} 渲染普通文本 2 v-html 渲染富文本 代表前端文本就是富文本 容易造成注入攻击 3 v-for="" 遍历 语法。v-for="(item,i) in list" v-for="(item,i) of list" 1 list 可为数组 可以数字 字符串 对象 item 表示元素值 可以改名 i 表示下标 可以改名 4 v-on: 绑定事件 5 v-if 删除或者添加dom true/显示 false/隐藏 6 v-show 控制css的display属性 true/显示 false/隐藏 7 v-else v-else 必须和v-if是兄弟相邻元素 否则用不了 ,v-if反 8 v-bind:title. ---> :title :属性 就是动态属性 “js语句” 属性 静态属性。所有属性值都是字符串 9 :class 只有可能会改变的需要用动态class 否者可以使用静态的 第一种写法 :class='isTRue?"class1":"class2"' 三目运算 第二种 :class="{bg:i%2,class1:boolean,class2:boolean}" 属性:true/加 false不家 第三种 :class="[bg,bg1]" 数组形式 10 :style <div class="box" :style="{background:'green',fontSize:'50px'}">111</div> 11 v-model 双向数据绑定 v-model只能用于表单元素 input type="text" input type='checkbox' input type="radio" select option textArea 效果 换肤 1 背景颜色 2 字体大小 3 行高
3 MVVM
双向数据绑定。--- M -- MODAL. --- 数据模型 --- data V -- VIEw. --- 视图模型。 --- div#app VM -- VIEW MODEL. -- 控制器。--- 组件或者实例 数据改变。--- view自动更新 视图改变。-- 数据自动更新
4 $set
在 vue2.0里面,数组的方法修改数组的时候实际上不能够监听改变,所以没有办法自动更新视图,所以在vue重写了一部分数组的方法,当方法改变的时候可以更新视图 所以。this.list[0] = 'aaa' 修改成功但是视图不更新 可以用 $set(修改的数组,索引,新值) //可以更新视图的
5 v-if和v-show
关于 权限和安全的 必须用 v-if 如果其它的。考虑切换是否频繁 ,如果频繁建议v-show ,如果频繁的可以v-if v-if 添加和删除dom v-show 修改css属性。
6 v-model
<div> <input type="text" v-model="username" placeholder="请输入用户名" /> </div> <div> <input type="password" v-model="password" placeholder="请输入密码" /> </div> <div> <label> <input type="radio" name="sex" v-model="sex" value="男"> 男 </label> <label> <input type="radio" name="sex" v-model="sex" value="女"> 女 </label> </div> <div> <select name="" id="" v-model="classes"> <option value="">请选择</option> <option value="sy2201">sy2201</option> <option value="sy2202">sy2202</option> </select> </div> <div> <label> 是否毕业 <input type="checkbox" v-model="isFinish"> </label> </div> <div> <textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea> </div>
7 修饰符
1 键盘修饰符 @keydown .enter 键盘名称 .13 keyCode .ctrl.enter 组件键 2 v-model .number 将数字字符串转化成数字 '110' -- > 110 .lazy lazy默认执行事件oninput输入触发 懒 将v-model的事件变为 onChange[改变且失去焦点的时候触发] .trim 去除首尾空格 3 事件修饰符 @click .stop - 阻止冒泡 调用 event.stopPropagation()。 .prevent - 阻止默认 基本做原生上传会用到阻止默认 a form表单 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。 改为捕获事件 原生js里面怎么改为捕获 .self - (只点击它本身的时候才会触发) 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .native - 监听组件根元素的原生事件。(*****) .once - 只触发一次回调。 div.onclick = null .passive - (2.3.0) 以 { passive: true } 模式添加侦听器 (滚动事件修饰符的时候使用) // 移动 touchstart touchend touchmove 4 鼠标事件修饰符 @mousedown .left - (2.2.0) 只当点击鼠标左键时触发。 .right - (2.2.0) 只当点击鼠标右键时触发。 .middle - (2.2.0) 只当点击鼠标中键时触发。
8 组件
函数。将一部分的代码,想什么时候使用的时候调用这个函数,并且可以通过传递的不容的内容是这个尽可能会多复用 函数 封装逻辑代码 组件的意义 (页面的东西是由组件构成的)--- 组件当成函数 组件 ,将 html,css ,js 封装起来,有样式结构以及功能这么一个东西叫做组件,它也可复用,传递不同的数据去显示的不一样,达到通用效果
9 全局组件
// 参数1 组件的名字(不是使用关键字和保留字 也不用使用标签 标签形式调用组件) -- 函数的名字 // 参数2 options. new Vue(options) Vue.component('list',options) <template id="home"> </template> options = { data(){ return {} }, methods:{ }, template:"#home" template:"<div></div>" } 组件注意事项 1 template 只能有一个字元素 2 data必须函数返回对象 3 通信传参的时候 :才是动态属性 静态属性传的都是字符串 4 传递的数据 通过props接收 5 props接收的属性 不要在methods或者data里面定义 6 组件之间数据默认不能共享 , 父子组件值得数据默认不能共享
10 组件的data为什么是函数?
组件为什么要有函数,利用函数局部作用域,就是为加一个独立作用域,让它的数据独立,相互之间不影响, 1 函数的特点 ? 1 调用 2 作用域 3 传参 function fn(a){ console.log(a) } fn('java') // fn("前端") // "a"
11 组件通信 (就是想让这个数据可以相互之间使用)
//数据流向都是单向的,从上往下,不要妄想着在自组件改变父组件的数据,谁的数据,就让谁来修改的
1 父子通信,父组件的数据传递给子组件
在组件上自定义属性 传递数据。传递多个 <home color="green" :n="10" ></home> 自组件内部 可以通过props接收 props:['color','n']
12 props验证
验证这个东西是否是对的,不能帮你该改变 1 props:['color','n'] 2 props:{ n:Number, color:{ type:String, default:"red" //传递i就是你传递的值,不传递就是默认值 }, arr:Array, }
13 生命周期
组件它创建到销毁的过程的函数叫做生命周期(钩子函数),自动执行,过时不候 1 挂载阶段的生命周期 (如果组件不销毁,就执行一次) // 创建前触发 beforeCreate(){} //组件还没有被创建,所以不能够使用组件内部东西,不能够拿到组件的数据和方法 // 创建后触发 created(){} 能调用内部的数据和方法 (等待着渲染) ajax // 挂载前触发 beforeMount(){} 也还没有渲染到页面上 还没有渲染到页面上 diff // 挂载后触发 真实dom节点 渲染完成 ajax mountd(){} // 获dom,获取元素,初始化swiper 2 更新阶段的生命周期 (初始化的不执行,数据更新的时候执行 (自父组件更新都执行)) 更新阶段的生命周期 ,更受限必须要 渲染过真实DOM, 必须要值完挂载阶段的声明周期 , 当你修改的时候 购物车总价,邮费自动算的 可以使用 beforeUpdate(){} 更新前触发 updated(){} 更新后触发 更新阶段有瑕疵,没有办法针对的监听某个值,从而任意值改变都执行,耗费性能 3 卸载阶段的生命周期 (销毁的时候执行) 作用就清除计时器 注销时间 beforeDestroy() { console.log('销毁前 -- beforeDestroy') }, destroyed() { clearInterval(this.timer) }
14 虚拟DOM
所有的内容都是虚拟DOM, 真实DOM的对象节点,在渲染完成之前都是虚拟DOM节点,所以当我们去修改的时候,它查看修改前和修改后是否有变化,将变化的内容,记录,只修改变化的内容,那么没有改变的就略过了 真实DOM div.box p ‘hello world' h2 'hello 1' var dom1 = { type:"div", props:{class:"box"}, children:[ { type:"p", props:{}, children:["hello world"] }, { type:"h2", props :{}, children:["hello 1"] } ] } // 更改后的 var dom2 = { type:"div", props:{class:"box"}, children:[ { type:'p', props:{}, children:["hello world1"] //内容更新的时候需要更新 }, { type:"h2", props :{}, children:["hello 1"] } ] }
15 created和mounted
使用那个生命周期进行ajax请求 created,beforeMount,mounted , created最早的, created 请求异步 beforeMount -- mounted -- (数据返回) -- 渲染数据) --- 渲染完成 无论哪个生命周期里面,都会渲染两次,ajax异步的数据,生命周期执行完之后数据才会返回
16 父组件和自组件生命周期
1 home(父) list(子) 怎么执行的? 挂载阶段 父 123 ---> 子 1234 --> 父 4 2 更新阶段 必须都要渲染dom,否则监听不到 父 1 子 12 父2
17 watch
监听某一个值改变自动触发,取代了更新的生命周期 watch:{ // 只适用于基本类型 n(){ // n改变的时候执行 (限制 n必须基本类型) }, todos:{ handler(){ // this.todo_start= this.todo_end= }, deep:true, immediate:true // 是否初始化的时候执行 } } watch里面深度监听的deep做了什么? //基本类型和引用类型的区别 引用类型的深拷贝和浅拷贝。, 如果浅拷贝怒 (拷贝了地址,所以改前和改后同一个地址,就监听不出来改变),所以加了deep:true,深拷贝了,或者 将对象值一一对比,将对象本身改变成字符进行比较
18 computed
监听改变自动计算出结果,不分引用类型和基本类型,返回值就是计算的结果 computed:{ // yf计算返回的结果,调用不需要() ,函数必须要return值 yf(){ // 监听里面调用的值改变, return 值 } }
19 watch和computed的区别
优缺点和使用场景 1 watch和computed 共同的特点,可以监听某个值改变,自定执行逻辑 watch 分基本类型和引用类型两种监听好,监听的值,要作为函数名或者属性名,当这个值改变的时候会自动执行 watch 有触发间隔 ,相当于有截流的效果 ***** 监听的函数里面可以执行异步 (可以请求数据) watch 使用与 一个属性改变影响多个值 computed 不分引用类型和基本类型,函数作为函数的值,调用的时候不需要(),必须要有返回值 会将上一次的计算结果,进行缓存,下一次计算的时候从缓存里面获取 ****** 函数里面不能够执行异步,不能够强求数据 computed 多个值计算出一个结果 ps 除了异步 其它情况下建议是用 computed 代码好维护
20 key的作用
key 给虚拟dom添加标记的,作用当我们改变数据的时候,可以同级通过唯一标记来进行比较,能够快的比较出是否改变,优化性能 同级保证唯一 <div key="1"></div> <p key=2></p> ul key=3 li key=4
21 组件通信 重点
1 父子通信
<home :list="list" n=10></home> home组件里面 props:{ list:Array, n:number, name:{ type:String; default:"hello" } }
2 子父通信 (封装组件里面比较多)
1 利用父子通信传递函数的方法去做 将父组件的方法传递给子组件,那么子组件调用这个方法的时候其实就是调用父组件的那个方法,这个时候我们在这个函数里传参,这个参数就是自组件的数据,父组件生命函数形参就可以接受到数据 <home :list="list" n=10 del="delList"></home> this.del(aaa) --- 父组件的函数。deList -- delList(参数){} 2 广播事件 推荐使用 this.$emit('事件名称',参数) <list @事件名称=‘callback'></list> callback 获取子组件的数据
3 事件总线 eventBus
适用于多个组件事件共享数据,使用与 子传父组件类似, 都是利用$emit const bus = new Vue({}) //创建一个第三方势力对象 bus.$emit("事件名",参数) bus.$on("事件名",callback(传递的参数)) 有问题 必须保证传递的时候组件是存在的,如果不存在监听不到, 页面组件之间使用eventBus就不好传递了,页面之间都是切换关系,只显示一个,当时传递的时候还没有创建呢
4 边界情况
遵循谁的数据让哪个组件自己去修改,不要在别的组件里面修改其它组件的数据 1 this.$parent 只能获取父组件的信息(直接获取) 2 this.$children 获取子组件的集合 [] 3 this.$root 获取根实例的信息
5 ref
<home ref='home'></homew> this.$refs.home 获取组件信息 -- document.getElementById("") 维护的时候不好维护 , mounted之后获取
6 插槽 -- 封装的组件上
利用slot在组件中展位,传递的时候在在组件标签中间传递,如果传递就slot位置显示 1 普通插槽 <Search> //插槽 <button>按钮</button> </Search> Search.vue <div> <input /> <slot></slot> </div> 2 具名插槽 slot组件的name值,与插槽的slot对应才能显示 <slot name='before'></slot> <slot name='after'></slot> <Search> <select slot="before" name="" id=""> <option value="2201">2201</option> <option value="2202">2202</option> </select> <button slot="after">搜搜</button> </Search> 3 作用域插槽 能够访问到组件自己的内容 <slot :val="val" :n="10" :enter="enter"></slot> slot传递组件的数据或方法 scope就是传递的数据对象 <Search> <template slot-scope="scope"> <div> <button @click="search(scope)">搜索</button> </div> </template> </Search>
22 脚手架安装项目
必须有node环境 如果出现 不是内部或者外部命令 1 单词打错了 2 没有安装成 3 环境变量有问题 node -v. 如果10 升级。安装 16 或者 14 1 cnpm i @vue/cli -g or npm i @vue/cli -g 2 查案是否安装完成 vue --version 如果出现 版本 @vue/cli 5.0.4 (出现这种字样就说明安装成功了) 3 创建项目 vue create vue_study 4 进入目录 vue_study npm run serve 5 cnpm i 安装 package.json 里面记录的所有依赖
1 安装 cnpm i @vue/cli -g 2 vue --version 3 vue create vue_study
23 局部组件
局部组件必须要注册才能使用 , 在哪个组件里面注册就只能在那个组件里面使用,利用components注册才能够使用 const demo = { data(){ return {} }, template:"#demo" } const home = { components:{ demo } } //组件分两种 // 使用一次 局部组件 (页面组件)(页面里面的某一部分) // 使用多次 全局组件 (按钮,输入框,table) 全局组件耗性能
24 每一个文件
每一个js文件都是独立作用域,其它js都不能直接使用,方法和属性都是私有的,想要使用必须导出 , 其它调用必须倒入 每一个.vue 都是一个组件,也是独立的,其它想使用这个组件必须要 导出和导入 module.exports = a ----> require("./a") export default. import a from "./a"
25 项目目录
1 可能不是你创建项目 , 项目创建好了, 码云或者github上 , 没有node_modules,需要安装node_modules 2 node_modules 是这个项目的依赖(项目使用的插件) scss es6 .. jquery 3 拿到项目 看看 node_modules 安装依赖 cnpm i or npm i 4 看package.json (启动项目 --- ) npm run serv 第二天发现启动不了了 1 npm i 安装 2 删除 node_modules cnpm i 3 检查目录是否对 packpage.json 包管理文件 (很重) public phpstudy 的 www 目录 服务器的静态资源目录 node_modules 依赖文件 github 码云 上传的忽略文件 readme.md 项目使用说明书 (自己写) 还有一堆其它的配置文件。暂时不讲 src 开发的文件夹
26 关于项目的一些问题
1 项目就找src的目录 该路径 改文件夹名字 2 所有都会在App.vue 跟组件 3 错误 1 路径有问题 Module not found: Error: Can't resolve './views/Todo1.vue' in '/Users/element/Desktop/sy2201/vue_study/src' 2 组件没有注册 <Todo> - did you register the component correctly 3 Missing script: "server" npm run serve 4
27 路由
路由难度5* , 难点就是需要一定经验 能把这个东西做好, 容易出去各位同学 vue 切换页面就使用路由 , 跳转页面不刷新,单页面应用, 不同的路径匹配不同的组件,路由页面和路径一定是一一对应 切换用的 <a herf=></a>. 跳转回刷新 http://127.0.0.1:8080/home http://127.0.0.1:8080/center /about 1 安装下载 cnpm i vue-router@3 --save 卸载 cnpm uninstall vue-router@3 --save vue-router4 先不使用 2 在src/router/index.js //固定的 import Vue from "vue" ; // "Vue" 错了 import Router from "vue-router" Vue.use(Router) const routes = [ { path:"/自定义" , component:Home , components 错了 } ] const router = new Router({ routes // routers 错误 }) export default router 3 main.js import router from "./router" new Vue({ router, //传router给每一个组件 }) 4 App.vue <!--显示路由组件--> <router-view></router-view>
28 router-link
路径匹配的时候 http://127.0.0.1:8080/ -- home http://127.0.0.1:8080/about -- about <router-link exact to="" :to="{}" activeClass 修改模糊样式的类 exactActiveClass 修改精准匹配的类名 replace 默认情况是push模式 -- replace没有后退记录了 tag="li" > </router-link> 默认与两个样式。router-link-active. router-link-exact-active
29 动态路由传参
router-link :to="'/topic/'+item.id" router/index.js { path:"/topic/:id" id是变量。 可以 } topic组件里面 this.$route.params 获取传递的参数 固定写法 1 路径传递 2 路由上配置 3 组件内部接收
30 css属性穿透
<style scoped> /** 设置的样式没起作用 1 后添加进去的元素 不起作用 例如富文本 2 在组件里面直接渲染的元素才能继承样式 3 */ .content >>> p { color: red; } .content /deep/ p { } </style>
31 路由传参
<router-link :to="{path:'/路径',query:{key1:val1,key:val2}}"> 接收 this.$route.query 获取到参数对象 动态路由传参 比较适合传递单个的值 路由传参比较适合 传递多个值,对象这种 // 动态路由 + query (你们试试)
32 编程式路由 $router
router-link --- js触发路由跳转 this.$router.push('/about') this.$router.push({ path: "/about", query: { name: "banban", age: 20, sex: "男" }, }); this.$router.push() //跳转 有后退记录的 添加栈 this.$router.repalce() //跳转 无后退记录 二级可以需要加这个属性 替换当前栈 this.$router.history.go() 0 1 -1
33 嵌套路由
{ path: "/order", component: Order, meta: { til: "订单", }, children: [ { path: "/order/end", // /order component: End, meta: { til: "已完订单", }, }, { path: "tui", component: Tui, meta: { til: "已退订单", }, children:[] }, { path: "pay", component: Pay, meta: { til: "代支付订单", }, }, ], }, ps 第一个 路径携带父极路径 要在父级组件里面写 router-view 三级路由都已经很麻烦
34 重定向
// /order. --- > /order/end { path: "/order", redirect: "/order/end", //冲定向位置 },
35 路由懒加载
如果正常加载 当时用的或者不用的都加载了 ,导致首屏 加载时间过长 (都加载完成才能渲染视图) 总体时间可能没有变少,但是分步,提高了用户体验 骨架屏 饿了么 banner广告 -- 当然前 const About =()=> import("../views/about") { path: "/me", component: () => import("../views/me"), meta: { til: "我的", }, },
36 命名路由
{ path:'/about', name:'about' } router-link :to="{name:'about',params:{}}" 获取的时候。通过 this.$route.params 刷新不保留 命名路由传参 刷新时候数据不能保存住 (用处不大)
37 命名视图
<router-view></router-view> { path:"/" components:{ default:组件1, a:组件2 b:组件3 } } <router-view></router-view> deafult <router-view name='a'></router-view> 路径匹配 组件2 <router-view name='b'></router-view> 路径匹配 组件3 <router-view name='c'></router-view> 不限时
38 导航守卫 路由的声明周期
全局钩子 // 路由跳转前触发 beforeEach((to,from,next)=>{ // to表示进入的路由信息 // from 表示从哪离开的路由信息 // next() 向下执行 next('/') next({path:"/"}) 设置title 登陆验证 重点 }) afterEach((to,from)=>{ // 每次路由进入后触发 很少单独使用 都和beforeEach一起使用比较多 例如可以。beforeEach开启加载动画。 在afterEach 关闭加载动 做一个loadding }) 独享钩子 了解 beforeEnter:(to,from,next)=>{ // 在路由对象对象配置上的钩子函数 } 组件内部钩子 了解 // 比beofreCrate更早 beforeRouteEnter(to, from, next) { // ... // console.log("路由进入前触发"); next(); }, beforeRouteLeave(to, from, next) { // ... console.log("路由离开的时候触发"); next(); }, // 路由更新的时候才会触发 它会触发 watch:{$route} beforeRouteUpdate() { // 默认不触发 , 路由对象更新的时候触发 路由信息发生改变才会触发 console.log("路由更新的时候触发"); next(); }
39 路由模式 (暂缓)
mode:"hash" "history" hash 模式 带 # history 模式 不带 #
40 keep-alive 重点中的重点
路由组件都是切换的,一个显示其它组件都是销毁的,所以导致每次切换回来,之前组件都销毁需要重新初始化,所以还需从新创建从新发送请求, keep组件包裹之后 组件不被销毁 正常使用使用过程中。 有些数据是实时的,如果实时的数据使用keep-alive 会导致页面不刷新 <keep-alive max="最大缓存页面数量" include='我要缓存的组件' exclude='不需要缓存的组件'> <router-view></router-view> </keep-alive> 1 区分组件缓存不缓存 include='组件的name,组件的name' exclude='组件的name,组件的name' 2 设置了不缓存 --- 两种情况都需要的 activated() { // 请求数据 -- 需要更新的改变的 在这里执行 console.log("组件进入的时候触发"); this.getTopic(); }, deactivated() { console.log("组件离开的时候触发"); },
40 vuex
一个vue的状态(数据)管理工具,多组件共享数据(组件之间不需要有什么关系),它相当于一个中间对象,所有的东西都是它自己的,我们页面只需要使用就可以了
安装 cnpm i vuex@3 --save 使用 1 src/store/index.js. import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); //你别下载 const store = new Vuex.Store({ state, // 状态 mutations //修改状态的方法 getters // state它的计算属性。 computed actions. // 可以提供上下文环 (异步修改state) }); export default store; 2 main.js import store from "./store" new Vue({ store, router, })
state
const state = { count:10, user:{} } this.$store.state[属性] // 帮助我们封装了一个对象 ...拓展出来就是原生的写法 import {mapState} from "vuex" computed:{ ...mapState(['count','user']) //数组里的属性一定要与 state里面属性一样,否则获取不到 }
mapState封装
function mapState1(arr) { let obj = {}; arr.forEach((item) => { obj[item] = function () { return store.state[item]; }; }); return obj; } console.log(mapState1(["count", "user", "b", "abc"]), "okokok");
mutations
唯一指定能修改state 如果想修改state 必须只能使用mutations的方法 const mutations = { // state 第一个参数 // payload 页面传递参数s ADD_COUNT(state,payload){ // 执行逻辑 } } this.$store.commit("ADD_COUNT",参数) import {mapMutations} from "vuex" methods:{ ...mapMutations(["ADD_COUNT"]) }
getters
state它的计算属性,state的数据改变改的时候自动执行,跟computed使用方法一摸一样 const getters ={ todos_start(){ return. 必须return } } // this.$store.getters.todos_start import {mapGetters} from "vuex" computed:{ ...mapGetters(['todos_start',....]) }
actions
可以提供上下文环境,让commit()提交的可能性更多, (发送ajax 执行异步) , 获取到回调到结果,然后提交commit 修改state const actions = { login(context){ context 获取其它模块的数据 需要使用 context.rootState .rootGetters context 是 store 镜像 // 发送登陆请求。-- // 看返回结果 , 如果对。 commit('SET_USER',payload) 修改state // 否则 请求失败 提示失败 } } this.$store.dispatch('login',参数) import {mapActions} from "vuex" methods:{ ...mapActions(["login"]) }
Modules
将数据进行模块化,方便管理 ,如果数据数据比较复杂,推荐使用modules modules: { user, // this.$store.user todos, // this.$store.todos }, 模块里面调用自己的方法不需要加 模块导出的时候 加上命名空间 export default { namespaced: true, //加上之后调用 actions mutations 需要加上模块民意 this.$store.commit('user/ADD') state, actions, mutations, };
plugins vuex数据本地存储
vuex的缺点是什么? 刷新的时候数据不保留? 安装 npm i vuex-persistedstate --save. plugins: [ Per({ storage: window.sessionStorage, //修改存储方法 key: "sy2201", // 默认key vuex paths: ["user"], //默认都存储 设置存储那些属性 }), ],
vuex
vuex它是vue的状态管理工具,适用多组件之间共享数据,它有自己的一些属性,作用各不相同 state 存储状态 mutations 修改状态 getters state的计算属性 actions 给修改state提供异步环境,我们一般在这里面可以发送请求 modules 它将数据进行模块 ,后期好维护 plugins 持久化存储 其实eventBus --- 本地存储 共享比较不错 , 100 维护的时候不知道去哪改
41 自定义指令
v-hide="" 全局 --- Vue.directive("drag", { bind(el, val) { el.onmousedown = function () { el.style.position = "absolute"; document.onmousemove = function (e) { el.style.left = e.pageX + "px"; el.style.top = e.pageY + "px"; }; el.onmouseup = function () { document.onmousemove = null; }; }; }, 局部
42 自定义过滤器。
Vue.filter("toDouble",function(data){ 必须要返回值 return }) {{10 | toDouble}}
43 axios
专门封装了ajax的一个插件,核心都XMLHttpRequest,它是一个promise的封装 cnpm i axios --save 使用的参照着 jquery axios({ url:"请求地址", method:"请求方式, headers:{}, ... params:{} //get data:{} 非get请求传参 }).then (res=>{}).catch(err=>) 使用 1 utils/request.js 二次封住那个 axios 2 api/index 将接口在这里创建 导出 3 页面负责调用这些接口
44 token做用是什么
token 就是用户信息 (加密之后的用户信息) , 登陆之后获取的用户信息 , cnode 并没有给我们登陆接口,这个登陆接口是我自己写的,我是信息复制过来的,登陆之后可以拿的到 收藏 wshp891122
UI框架
pc端 elment-ui 移动端 vant 1 cnpm i element-ui --save 看官网
作业
创建一个cnode项目
内容左边。router-view.
内容右边。命名视图 router-view na me
倒计时 5秒时候后跳转
两个接口
1 店铺列表
[{...}]
2 店铺详情
/123. --- 通过id获取详情
作业
1搭建路由 写个三四遍
2昨天的选项卡 改成路由
3 主题列表渲染必须写
跳转详情页传参 渲染详情页面 可选
cnpm i @vue/cli -g 进入目录
cnpm i
cnpm run serve
路由 vue-router
vuex.
@vue/cli. 用它
axios
作业
选项卡。 <menu></menu> <content></content> todoList <Search></serach> <list></list> cnode 整明白了
todolist
1 数据格式 todoList:[ { done:false , //这在进行 text:"内容", id:1 }, { done:true , //这在进行 text:"内容1", id:2 } ] 2 <li v-for="item in todoList" :key="item.id"> 以后在遍历的时候+key值 3 todoList:[], 都有 todo_start:[], flase 正在进行的 filter todo_end:[] true. 已完成的 filter 2 手写生命周期
问问题
1) 降级 --- (工作) --- () 2) 基础 -- (着急) 完整 ajax() 组件通信 () 1 2 2 3 4 5 6 前端。 选项卡。 todolist 购物车
联系
作业 1 cnode首页的列表图 1 点击分类 让数据改变 全部 精华 问答 2 列表 List 案例敲一一边 留言板 添加数据 ...