vue

先导 vue-devtools 是一款基于chrome浏览器的插件，用于vue应用的 调试，这款vue调试神器可以极大地提高我们的调试效率。帮助我们快速的调试开发vue应用。 第一步： 我们可以先从github上找到vue-devtools的项目，下载到本地。下载 vue-devtools 链接。 克隆方法：git clone https://github.com/vuejs/vue-devtools.git 第二步： 解压下载好的文件，进入到vue-devtools目录，安装项目所需要的依赖包。 安装方法：npm install 或者 cnpm install （注：cnpm命令是国内的镜像，速度会快一些） 第三步： 编译项目文件。 编译方法：npm run build 第四步： 修改安装目录vue-devtools\shells\chrome 中 的manifest.json文件。 persistent参数改为true，访问协议是否包含：1.http://*/*; 2. https://*/*; 3. file:///*;这三种情况 第五步： 添加至浏览器： 添加方法：在chrome浏览器输入地址：“chrome://extensions/”进入扩展程序页面， 然后点击“加载已解压的扩展程序...”按钮；选择vue-devtools>shells目录下的Chrome文件夹；

splice(index,len,[item])它也可以用来替换/删除/添加数组内某一个或者几个值（该方法会改变原始数组） index:数组开始下标 len: 替换/删除的长度 item:替换的值，删除操作的话 item为空 删除： //删除起始下标为1，长度为1的一个值(len设置1，如果为0，则数组不变) var arr = ['a','b','c','d']; arr.splice(1,1); console.log(arr); //['a','c','d']; //删除起始下标为1，长度为2的一个值(len设置2) var arr2 = ['a','b','c','d'] arr2.splice(1,2); console.log(arr2); //['a','d'] 替换： //替换起始下标为1，长度为1的一个值为‘ttt’，len设置的1 var arr = ['a','b','c','d']; arr.splice(1,1,'ttt'); console.log(arr); //['a','ttt','c','d'] //替换起始下标为1，长度为2的两个值为‘ttt’，len设置的1 var arr2 = ['a','b','c','d']; arr2.splice(1,2,'ttt'); console.log(arr2); //['a','ttt','d'] 添加

辞了职，转魔都 同学问我为什么要过来，答：想感受一下IT精英的感觉，emmmmm 其实就是觉得自己太菜了，向往广阔的天空，想要跟着水涨船高提升一下下自己的水平 不过打脸的是，被offer冲昏头脑的加入了驻场开发，听说和外包也没什么太大的区别...... 不过眼见为实，努力工作模式还是要开启的然后自己去了解感受 万一进步神速呢 然后立一个flag 五年后已加入bat 1. 订阅发布模式 2. vue中data内初始的数据和在mounted中使用this.a = 1这种赋值方式添加的数据有什么不一样 　　vue实例的数据对象，vue在初始化实例时会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象(key-value) 　　对于在实例创建后想要添加的数据，可以使用$set(key, value)这种方式实现 (耳闻一个push方法，还未测试) 3. 闭包这个情况，我是真的了解很少，是的这很丢人....有关作用域的处理可以使用let，有关命名冲突的解决可以用闭包 　　 来源： https://www.cnblogs.com/yl179578605/p/10824016.html

1、使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 --> <mycom1></mycom1> </div> <script> // 1.1 使用 Vue.extend 来创建全局的Vue组件 // var com1 = Vue.extend({ // template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构 // }) // 1.2 使用 Vue.component('组件的名称', 创建出来的组件模板对象) // Vue.component('myCom1', com1) // 如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名，则在引用组件的时候，需要把 大写的驼峰改为小写的字母，同时，两个单词之前，使用 - 链接； // 如果不使用驼峰,则直接拿名称来使用即可; // Vue.component('mycom1', com1) // Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的 // 第二个参数: Vue.extend 创建的组件 ,其中 template

目录 vue的安装 Vue前端的设置 页面的分布 后台数据的替换 css样式 Django的配置 国际化配置 axios插件安装 CORS跨域问题(同源策略) 处理跨域问题: cors插件 axios提交数据给后台 拼接参数 params:{} 数据包参数 data:{} Django中设置数据 media相关 admin中注册使用 前端接受数据 前端渲染单个汽车界面 element插件安装 bootstrap插件的使用 Vue代码 vue的安装 ## 环境 附带安装pnm npm换源 脚手架 快速换源 ## 项目创建 cd 存放项目的目录 vue create 项目名 ===> 需要安装的组件 babel router vuex ## 配置项目启动 pycharm打开项目,配置npm启动 ## 加载vue环境 main.js完成vue环境的加载,完成根组件的渲染加载route,vuex等环境加载 ## Vue的ajax插件安装 axios ​``` 安装插件 (一定要在项目目录下) cnpm install axios 在main.js中配置: import axios from 'axios' Vue.prototype.$axios = axios 使用,就可以直接ajax的使用 ​``` Vue前端的设置 页面的分布 index.html是项目中的唯一页面 App

问题及解决办法 vue项目中偶尔会报这样一个错： Duplicate keys detected: '74004'. This may cause an update error 报这个错说明在你的 v-for 循环里， key 值可能重复了。 重复的 key 会造成渲染错误。 报错的原因是我一开始没有添加 key 属性，报错代码片段如下： <template> <vue-aplayer :audio="audio" :lrc-type="3" :fixed='fixed' :autoplay='autoplay' :order='order' :volume='volume' :theme='theme' :listFolded='listFolded ' /> </template> 添加上 key 之后不再报错 <template> <vue-aplayer :audio="audio" :lrc-type="3" :fixed='fixed' :autoplay='autoplay' :order='order' :volume='volume' :theme='theme' :listFolded='listFolded ' :key="audio.name" /> </template> 说明： audio 属性是我要遍历的列表， name 在我的列表中的主键

vue中promise的使用 　　promise是处理异步的利器，在之前的文章 《ES6之promise》 中，我详细介绍了promise的使用， 在文章《 js动画实现&&回调地狱&&promise 》中也提到了promise的then的链式调用， 这篇文章主要是介绍在实际项目中关于异步我遇到的一些问题以及解决方法，由此来加深对promise的进一步理解。 背景 　　进入商品页，商品页的左侧是分类，右侧是具体的商品，一旦进入商品页，就把所有分类的商品请求出来，注意： 必须要按照顺序。 　　 实现思路 在商品页, created 钩子函数触发获取分类的http请求，请求到结果后，开始请求所有的具体商品并渲染。 遇到的问题 由于请求商品分类是异步的， 怎么判断异步请求完成， 也就是说请求具体商品的时机是什么时候。 获取到所有的商品必须发送请求，请求时异步的，怎么保证能够按照顺序获取到。 解决问题 --- 问题一 　　针对问题一，最好的方式还是使用promise，大致实现如下： getClassify: function () { var that = this; // 使用promise处理异步。 this.updateKinds().then(function () { console.log("获取分类结束！"); that.updateAllContent(); }); },

一、 vue 的指令 v-model 数据绑定 data 返回对象用 return v- for 循环 格式 v- for = "字段名 in(of) 数组json" v-show 显示 隐藏 传递的值为布尔值 true false 默认为 false v- if 显示与隐藏 和v-show对比的区别 就是是否删除dom节点 默认值为 false v- else - if 必须和v- if 连用 v- else 必须和v- if 连用 不能单独使用 否则报错 模板编译错误 v-bind 动态绑定 作用： 及时对页面的数据进行更改 v-on 绑定事件 函数必须写在methods里面 @click 快捷方法 v-text 解析文本 v-html 解析html标签 v-bind: class 三种绑定方法 1、对象型 ' {red:isred} ' 2、三目型 ' isred? "red" : "blue" ' 3、数组型 ' [{red: "isred" },{blue: "isblue" }] ' v-once 进入页面时 只渲染一次 不在进行渲染 v-cloak 防止闪烁 v-pre 把标签内部的元素原位输出 二、用法 1. v-text v-text主要用来更新textContent，可以等同于JS的text属性。 < span v-text = "msg" > </ span

vue中的插值，简单来说，就是通过更改script中定义的属性的值，来达到修改html中的值这样一个效果。例如： 我们在div中添加了一个h1标签，看到没有，{{ title }} 这块代码就叫插值。插值的语法是{{}}中加上变量名的形式。 这里的title是我们在script的data函数里边定义的title变量，通过插值的方式，就可以方便的更改h1标签中的值。运行效果： 如果我们不想显示HelloWorld，我们可以更改script中的title，比如改成 first vue，看看效果： OK，完成~ 来源： https://www.cnblogs.com/atomgame/p/12491850.html

注意请求可能存在跨域问题，需要去配置好 这三种建议使用axios 1.resource 　　Vue 要实现异步加载需要使用到 vue-resource 库。 　　Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。 　　先导入一个线上cdn的地址，当然还可以去npm安装，但个人觉得这种方便 <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script> 　　实现GET请求 <div id="box"> <ul> <li v-for='item of img'><img :src='item.img' alt=""></li> </ul> </div> <script> var app = new Vue({ el: '#box', data: { img: '' }, mounted() { //get请求 this.$http.get('http://localhost:3000/api/banner').then(function(res){ this.img = res.body.data },function(){ console.log('请求失败处理'); }); } }) </script> 　　如果需要传递数据，可以使用 this.