spfLinux的博客

{{msg}} //创建自定义的指令 //钩子函数 hook function 到了规定阶段自动执行 Vue.directive('change',{ //bind就是钩子函数，会在指令被调用时，自动触发 bind:function(el,binding){ console.log(arguments); console.log("in bind.

{{value}} 按钮 new Vue({ el:'#example', data:{ list:[100,200,300] }, methods:{ addToList(){ var num=parseInt(Math.random()*100); //也可以用Math.floor this.list

百度 --> new Vue({ el:'#example', data:{ msg:'VueJS is Awesome', myUrl:'https://www.baidu.com', imgName:'index5.JPG', imgPath:'img/index5.JPG' } });

{{msg}} {{uname}} 是否同意 注册 求和 //注：v-model只能用于表单元素 new Vue({ el:'#example', data:{ msg:'VueJS is Awesome', uname:'', isUserAgree:false, num1:0, n

{{msg}} Vue.component('my-footer',{ //必须包在一个容器里，否则会报错 //全局组件可以包含全局组件，不能包含局部组件，否则会报错 template:` 这是尾部 end ` }); Vue.component('my-button',{ te

在用cordova+vue做混合APP时，运行cordova run android时报下面的错误：后面才知道，需要安装这两个，可以通过adt中的eclipse中的Android SDK Manager安装然后就可以了。如果没有出现想要的版本，关掉SDK Manager再打开，应该就有了。...

npm/cnpm install vue-cli -gnpm/cnpm uninstall vue-cli -g 不要用分号，不然会报错 卸载命令vue -V 如果已经安装，不需要执行上面的命令，可以通过这句话来查看vue版本vue init webpack my-project如果原本安装的vue-cli出现问题，可以卸载后再重装。npm install vuex -S这里需要注意的...

main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import store from './store'imp...

main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import store from './store'imp...

在main.js中加下面两行：import VueResource from 'vue-resource'Vue.use(VueResource);服务器端为php的话，加下面一条：header('Access-Control-Allow-Origin:http://localhost:8080');

我是这样遇到这个问题的。首先在点击登录时，使用(this.$http.post)请求后台php，php这边是要将通过sql查询得到的uid保存到session里的，结果发现只在session中存储了瞬间，后面直接释放了。WHY？于是百度解决方案。首先，在php中加了几个请求头。header('Access-Control-Allow-Origin:http://localh

我是这样遇到这个问题的。isLogin.php返回session中的内容，vue中通过this.$http.get请求这个php，发现返回的结果为null。WHY？正好前面遇到一个类似的问题，就在this.$http.get第二个参数(配置集)加了这样一个配置项：withCredentials:true不过还需要再三个请求头(服务器端的php中)，这个在前面博客里写过了。

可以这样解决：遮罩层上的方法：@touchstart="hide($event)"hide(e){ console.log(e); this.show_flag=0; e.returnValue = false; console.log(e); },问题原因：是由于该事件的默认行为产生的，将returnValue设置为fa...

做的时候遇到一个问题，就是在Login.vue中输入正确的用户名和密码并跳转到Main.vue，发现并没有更新用户登录状态，我只是在created中设置了http请求。后面我增加了事件提交才解决的。Login.vuedoLogin(){ //console.log(this.$http.post); this.$http.post('http://l...

（1）<img src="../assets/img/favicon.ico">（2）v-for="u in list"<img class="pic" :src="require('../assets/'+u.avatar)">（3）示例1：（图片排列比较整齐时）this.$http.get("http://localhost/wyyx/indexProLis

一、vue之前解决跨域问题，分别都是在前端加上一些header头，后端设置一些access...的信息，允许固定ip或者所有的请求，但还没有全部在前端搞定的方案，最近在用vue做项目时，发现了一种不错的方式，就是proxy(代理)可以在vue.config.js中配置：上面第二张图片是ajax请求中的参数，其中url中要加上前缀，也就是在proxy中代理的请求前缀，加上以后才会...

用户列表 每页显示记录数： 10 20 40

性别 年龄 分数 {{item.sex}} {{item.age}} {{item.score}} {{stu[0].sex}} {{stu[0].age}} {{stu[0].score}} {{stu[1].sex}} {{stu[1].age}}

{{msg}} {{100 | currency(0,1)}} Vue.filter('currency',function(arg,arg1,arg2){ //参数可以是1+个 /*console.log(arg1); console.log(arg2);*/ if(arg1==0) return '$'+arg; if(arg1==1)

fenye.html: 分页 .btnSelect{ background-color: royalblue; } {{obj.uid}} {{obj.

{{msg}} Vue.component('my-component',{ beforeCreate:function(){ console.log("组件准备创建"); }, created:function(){ console.log("组件创建完毕"); }, beforeMount:function(){ con

{{msg}} Vue.component('test-component',{ data:function(){ return {uName:''} }, template:` `, watch:{ uName:function(newValue,oldValue){ console.log(this.uNam

{{msg}} {{myFunc()}} {{myFunc1}} new Vue({ el:'#example', data:{ msg:'VueJS is Awesome', list:[100,200,300], count:0 }, methods:{ myFunc:functi

.btnSelect{ background-color: blue; } 上一页 {{tmp}} 下一页 new Vue({ el:'#example', data:{ pageList:[1,2,3,4,5], nowPage:1 }, methods:{ choosePage:fun

（1）父->子通信  props down //父->子通信 props down Vue.component('my-cart',{ template:` ` }); Vue.component('my-header',{ props:['myTitle'], template:` {{myTi

//创建一个Vue实例，作为eventBus去使用 var bus=new Vue(); Vue.component('xiong-da',{ created:function(){ bus.$on('toDaEvent',function(msg){ console.log("熊二："+msg); }) }, methods:{ no

//按组件树的方式code 组件：代码复用 var bus=new Vue({}); Vue.component('to-do-item',{ props:['sendMsg','myIndex'], methods:{ deleteItem(){ this.$emit('deleteEvent',this.myIndex); //this.p

var Login=Vue.component('login-component',{ methods:{ handleClick:function(){ this.$router.push('/myRegister'); } }, template:` 这是登录界面 注册 注册 ` });

var List=Vue.component('list-component',{ data:function(){ return {pList:[100,200,300]} }, methods:{ jump(myIdex){ this.$router.push('/myDetail/'+myIdex); //发送 } }, tem

Vue.component('test-comonent',{ created:function(){ this.$http.get('http://jsonplaceholder.typicode.com/users').then((response)=>{ console.log(response.data); this.list=response.data;

var Login=Vue.component('login-component',{ template:` 这是登录界面 ` }); var Mail=Vue.component('mail-component',{ methods:{ jump(desPath){ this.$router.push(desPath);

List.vue 列表页 {{tmp}} export default{ data:function(){ return {list:[100,200,300]} }, methods:{ jump(myIndex){ this.$router.push('/myDetail/'+myIndex);

list.vue 列表页 {{tmp}} import MyFooter from '@/components/MyFooter' export default{ data:function(){ return {list:[100,200,300]} }, methods:{ jump(myInd

上面路径是对的，可是报错说找不到，why？后来查找资料才发现，vue框架默认配置图片格式没有ico的，所以需要手动加上在bulid/webpack.base.conf.js中有如下一行：test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,上面这是已经加上ico的，但是发现还是报错，难道还有其他问题？不是的，是因为改了配置后需要退出再启动服务才行。做完这些

具体结构如下(el-table->el-table-column)：显示如下：经查，发现是代码写的不够严谨，导致后面出现了空隙(感觉不够一个空格)，把代码写成这样就好了：另外，如果用原生html加css来写，对代码格式没有这种要求，也就是两种写法都可以。...