vue
九州清宴
这个作者很懒,什么都没留下…
展开
-
hash模式和history模式
hash模式,浏览器会自带#,#后面的字符都是hash,hash虽然在url中,但不会在http请求中,对服务器安全性没有影响,hash不会重新加载页面。 history模式,可以浏览历史栈,也可以修改(pushState(),replaceState()),可以监听状态变更(popState) ...原创 2021-01-28 14:33:08 · 120 阅读 · 0 评论 -
uni-app封装数据请求
新建utils文件 utils/config.js let baseUrl = null; if(process.env.NODE_ENV === "development"){ //开发环境 baseUrl="http://localhost:3000" }else{ baseUrl = "https://api.zhaowei.shop" } export default baseUrl; utils/http.js import baseUrl from './config.js' con原创 2020-11-01 23:19:06 · 322 阅读 · 0 评论 -
vue的计算属性 computed, computed和watch的区别
计算属性 计算属性就是当其依赖属性的值发生变化时,这个属性的值会自动更新,与之相关的DOM部分也会同步自动更新。通常被用在购物车计算总价上面 computed和watch的区别 watch是监听属性,监听data或者watch里面的数据变化,根据当前不同值的情况,做出不同的处理。 <script> export default { name: "JobDataUpdate", data(){ return {原创 2020-10-29 22:56:36 · 124 阅读 · 0 评论 -
vue的组件通信
父组件与子组件传值 父组件传给子组件:子组件通过props方法接受数据; //父组件 <子组件 属性1="值" 属性2="值"></子组件> <子组件 :属性="变量"></子组件> {{属性1}} <li v-for="item in 属性1"></li> <script> export default { props:['属性1','属性2'] } </script> 注意:vu原创 2020-10-29 22:44:30 · 82 阅读 · 0 评论 -
Vue-loader
vue-loader就是一个加载器,把Vue编译javaScript的模块,方便浏览器读文件。 为什么要转译vue组件 动态的渲染一些数据 对三个标签(template、script、style)都做了优化script中可以直接使用es6 style 也默认使用sass, 提供作用域的选择 开发阶段提供热加载 ...原创 2020-10-29 22:33:40 · 87 阅读 · 0 评论 -
vue导航的钩子有哪些
导航钩子就是路由的生命周期函数,主要包括全局和局部。 全局钩子函数 beforeEach:路由切换开始调用,类似路由守卫 router.beforeEach((to,from,next)=>{ //to:即将进入目标对象 //form:当前导航要离开的导航对象 //next:是一个函数,调用resolve }) 对于登录的设置案例: router.beforeEach((to, from, next) => { if (to.name !== 'Login' && !isA原创 2020-10-29 22:31:20 · 318 阅读 · 0 评论 -
axios的安装与使用
地址:http://www.axios-js.com 含义:易用、简洁且高效的(基于promise)http库 (一个封装好的http插件) 特点: 支持node端和浏览器端 支持promise 丰富的配置项 全局安装axios npm/cnpm install axios -S import axios from axios //每个组件里单独引入 常用的方法 get方法: <template> <div> <li v-for="item in原创 2020-10-24 20:38:45 · 493 阅读 · 0 评论 -
jsonserver模拟数据
安装 npm/cnpm install json-server -g 新建一个文件夹myjson,在该文件夹下面新建data.json文件 { "arr":[ { "id":1, "title":"111111111" }, { "id":2, "title":"222222" }, { "id":3, "title":"3原创 2020-10-24 20:15:49 · 128 阅读 · 0 评论 -
vue中watch和computed的区别
watch:用于监听data和computed的数据变化 computed:定义属性,这个属性通过计算得到,得到的数据不能进一步操作,通过return返回原创 2020-10-13 14:50:51 · 52 阅读 · 0 评论 -
vue生命周期,每一个生命周期钩子发生了什么
beforeCreate(创建之前): 一般不使用,视图层和数据层都不会更新 created(创建之后) 视图层没有渲染,但数据层已经开始更新,这里是最早操作data数据的地方,一般在这里请求数据,开启定时器 beforeMount(挂载之前): 视图层没有真正渲染,只是生成一个虚拟dom mounted(挂载之后): 虚拟dom渲染到页面,页面有了真实的dom,视图层完成渲染。初始化一些插件配置,也可以在这里进行数据请求。 beforeUpdate(更新之前): 做判断是否需要更新 updated(更新之原创 2020-10-13 14:46:54 · 259 阅读 · 1 评论 -
vuex-状态管理--vuex是什么及使用方法--使用vuex的好处
vuex-通过四个核心概念集中管理 解决的复杂组件之间的数据通信问题 vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享,它采用集中式存储管理应用的所有组件的状态 使用vuex统一管理状态的好处 能够在vuex中集中管理共享的数据,易于开发和后期维护 能够高效的实现组件之间的数据共享,提高开发效率 存储在vuex中的数据是响应式的,能够实时保持数据和页面的同步 vuex的使用 1.安装vuex cnpm/npm install vuex --save 2.导入vuex包(sr原创 2020-10-09 19:00:22 · 595 阅读 · 0 评论 -
前端解决跨域的方法及为什么有跨域
为什么有跨域: 浏览器未来保护用户的安全和隐私给js设置的限制,ajax发送请求,读取响应,浏览器虽然不会阻止你发送请求,但是却读取不到响应 浏览器同源策略: 一个域名的js,在未经允许的情况下,不得读取另一个域名的内容。但是浏览器并不会阻止你发送请求。 不同服务器 2. 同一服务器,不同端口 3. 协议不同 form表单为什么可以跨域: form表单会刷新页面,不会讲结果返回给js所有浏览器认为这是安全的 ** 前端解决跨域的方法 ** jsonp: 通过动态的向页面中添加script标签,并且将sr原创 2020-10-09 17:57:42 · 285 阅读 · 0 评论 -
vue下载-vue脚手架安装-vue项目打包
安装淘宝镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org vue脚手架全局安装: npm/cnpm install vue-cli -g 初始化vue项目: vue init webpack 项目名(英文小写) 启动vue项目: npm run dev / npm start vue安装jquery: npm/cnpm install jquery -D main.js: import $ from ‘jquery’ vue原创 2020-09-29 09:26:04 · 343 阅读 · 0 评论