vue

在vue的目录结构中，static是静态资源目录，可以用于放置图片、字体等。而在src目录（开发目录）下，同样提供了一个assets目录，可以用于存放图片，比如logo等。虽然这两个目录都可以用于放置图片，但是在使用上却是有一些差别的。 在HTML中使用 在HTML中使用，两者都可以直接使用路径来访问。 <img src="../assets/yanggb.png" alt="yanggb" title="assets中的图片"> <img src="/static/yanggb.png" alt="yanggb" title="static中的图片"> 要注意的是，访问assets目录下的资源文件使用的是相对路径，而访问static目录下的资源文件则需要使用绝对路径，具体原因在后面说。 在JS中使用（动态绑定） assets下的资源如果要在js中使用的话，路径需要经过webpack中的file-loader编译，如果直接编写路径会导致加载资源失败（找不到资源）。 <template> <div> <img :src="assetsUrl" title="assets中的图片"> <img :src="staticUrl" title="static中的图片"> </div> </template> export default { name: 'yanggb', data ()

注意 计算属性除了简单的文本插值外,还经常用于动态地设置元素的样式名称class和内联样式 style 参考 vue官网：计算属性 Vue系列之computed使用详解(附demo,不定期更新) vue 计算属性怎么传参 来源： https://www.cnblogs.com/kunmomo/p/12483726.html

Vue.js模板语法 Vue 实例 构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例来启动的： var vm = new Vue({ // 选项 }) 属性与方法 每个 Vue 实例都会代理其 data 对象里所有的属性： var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 设置属性也会影响到原始数据 vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3 除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。例如： var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true // $watch 是一个实例方法 vm.$watch('a', function (newVal, oldVal) { // 这个回调将在 `vm.a` 改变后调用 }) 插值

目录 创建阶段 1.创建一个Vue的实例 2.Init Events & Lifecycle 3.beforeCreate 4.Init injections & reactivity 5.created 6.判断流程图 7.beforeMount 8.mounted 运行阶段 1.beforeUpdate 2.更新虚拟DOM 3.updated 销毁阶段 beforeDestory 和 destoryed 创建阶段 1.创建一个Vue的实例 new Vue({}); 2.Init Events & Lifecycle 表示刚初始化了一个Vue空的实例对象，这时候，这个对象身上只有默认的一些生命周期函数和默认的事件。其它的还没有创建。 3.beforeCreate beforeCreate与data、methods等平级，是第一个生命周期函数。表示实例完全被创建出来之前，会执行该函数 var vm=new Vue({ el:"#app", data:{ msg:'hello' }, methods:{ show(){ console.log('show()'); } }, beforeCreate() { console.log(this.msg);//undefined this.show(); //TypeError:this.show is not a function }

Vue时间线组件 效果 背景   项目需要用到时间线组件，用于选择同一笔记不同时期的内容。一开始打算用elementui的组件，但不适合，于是网上搜了个遍，却没找到合适的，因此自己动手写了个，并记录下来当做vuejs的学习笔记。 步骤 一、创建项目环境 略。。百度 二、创建组件 略，没啥说的，就是新建了个.vue文件 三、写代码 1）写出大概的框架 每个时间段都是如上图所示的结构，左边部分是时间线，右边是内容。 组件模板如下: <template> <div id="time-line"> <div class="item"> <div class="item-index">2020-2-2 2:22:22</div> <div class="item-content">HELLO WORLD</div> </div> </div> </template> 2）css写出时间线 "::before"伪元素作出时间线的节点 .item::before { content: ""; width: 11px; height: 11px; border-radius: 100%; background-color: #91c2fc; position: absolute; left: -15px; } 效果图: "::after"伪元素作出时间线线段 .item::after {

let barRoute = { path: '/', component: () => import('../view/basicView'), redirect: '/home', children: [ // 带底部导航 ] } let routes = [ barRoute, { name: 'home', component: () => import('../view/home'), meta: { title: '首页', hasBar: true } }, { name: 'login', component: () => import('../view/login'), meta: { title: '登录' } } ]; // add route path routes.forEach(route => { route.path = route.path || '/' + (route.name || ''); if(route.meta && route.meta.hasBar){ barRoute.children.push(route) } }); routes = routes.filter(route => { return !route.meta || !route.meta.hasBar }) console.log(routes) const

vue的ajax请求用的是axios组件，结果在用到post请求的时候，发现给后台传data时，后台(python语言+django框架)接收不到。 后台的request.body显示出，我给传送的是data被django打包成了一个obj中的key值，value为空数组。导致后台获取不到。 解决方案： axios({ method:'POST', url:ap_service_url+opt.url, data:opt.obj, transformRequest: [function (data) { let ret = '' for (let it in data) { ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&' } return ret }], headers:{'Content-Type': "application/x-www-form-urlencoded"} }).then(function(res){ /*请求成功*/ }).catch(function(err){ /*请求失败*/ }) 通过添加 transformRequset 成功跳出这个坑~ 来源： https://www.cnblogs.com/WQLong/p/8316152.html

安装Vue脚手架 版本3以上安装：npm install -g @vue/cli@(版本号) 版本3以下安装：npm install -g vue-cli@(版本号) 安装了vuecli3还想使用vuecli2创建项目需先安装:npm install -g @vue/cli-init Vue Cli2 初始化项目 vue init webpack my-project 来源： CSDN 作者： 唐都恩了 链接： https://blog.csdn.net/weixin_44614772/article/details/104815947

由于安全原因一些敏感信息提交时都需要加密处理，之前一直用MD5加密，一些暴力软件还是可以进行解密，而rsa加密安全性就比较高，它采用前端公钥加密 后台私钥解密。下面就是整个rsa在项目中使用的过程 安装 npm install jsencrypt 使用 像这种比较常用的工具基本都提取成工具方法 import JSEncrypt from 'jsencrypt' ; //加密 export function encryptedData ( publicKey , data ) { // 新建JSEncrypt对象 let encryptor = new JSEncrypt ( ) ; // 设置公钥 encryptor . setPublicKey ( publicKey ) ; // 加密数据 return encryptor . encrypt ( data ) ; } //解密 export function decryptedData ( privateKey , data ) { // 新建JSEncrypt对象 let encryptor = new JSEncrypt ( ) ; // 设置公钥 encryptor . setPrivateKey ( privateKey ) // 加密数据 return encryptor . decrypt ( data ) ; }

课程介绍 此教程面向的是广大想了解和入门vue的朋友，让你用最快的时间，光速入门vue。 话不多说，接下来带着大家用vue敲一个hello world 首先打开vue的 官方文档 ，下载vue的开发版本 < div id = " app " > {{content}} </ div > <!--引入vue--> < script src = " vue.js " > </ script > < script > var app = new Vue ( { el : '#app' , // 代表vue生效的html元素 data : { // 代表vue的数据 content : 'hello world' } } ) </ script > 这里是敲出来的效果 好了， 来源： CSDN 作者： 没事别折腾 链接： https://blog.csdn.net/weixin_43745003/article/details/104812039