1.过滤器：
filters: {
search(list) { es5
var _self = this;
//return list.filter(menu => menu.childs.name.join("").indexOf(this.searchVal) > -1);
return list.filter(function(menu) {
var lists = menu.childs;
var arr = [];
arr.push(menu.name)
for (var i = 0, len = lists.length; i < len; i++) {
arr.push(lists[i].name);
}
return arr.join("").indexOf(_self.searchVal) > -1;
})
},
searchlist(list) { es6
return list.filter(menulist => menulist.name.indexOf(this.searchVal) > -1);
}
},
2.ajax:
方法一：在写ready里面
ready: function() {
var _self = this;
// console.log(env.api)
$.ajax({
url: env.api + ‘authority/user/loadMenusAndUser‘,
dataType: ‘json‘,
success: function(data) {
// console.log(data.data.menu.childs);
// console.log(data.data.user);
_self.menus = data.data.menu.childs;
_self.user = data.data.user;
},
error: function(err) {
console.log(err);
}
})
},
3.用路由的时候又要传数据（但是router.start和new Vue不能同时写）
router.start({
data() {
return {
currentmenu: ‘‘,
message: ‘asdaaa‘,
menus: [],
user: {},
searchVal: ‘‘
}
},
filters: {
search(list) {
var _self = this;
//return list.filter(menu => menu.childs.name.join("").indexOf(this.searchVal) > -1);
return list.filter(function(menu) {
var lists = menu.childs;
var arr = [];
arr.push(menu.name)
for (var i = 0, len = lists.length; i < len; i++) {
arr.push(lists[i].name);
}
return arr.join("").indexOf(_self.searchVal) > -1;
})
},
searchlist(list) {
return list.filter(menulist => menulist.name.indexOf(this.searchVal) > -1);
}
},
ready: function() {
var _self = this;
// console.log(env.api)
$.ajax({
url: env.api + ‘authority/user/loadMenusAndUser‘,
dataType: ‘json‘,
success: function(data) {
// console.log(data.data.menu.childs);
// console.log(data.data.user);
_self.menus = data.data.menu.childs;
_self.user = data.data.user;
},
error: function(err) {
console.log(err);
}
})
},
methods: {
changeCurrent: function(curl) {
// alert(this.message)
this.currentmenu = curl;
}
},
component: app
}, "#app");
4.文件上传
$.ajaxFileUpload({
url: env.api + "bike/manage/importIMEIExcel",
type: ‘post‘,
secureuri: false, //是否启用安全提交,默认为false
fileElementId: ‘imeiExcelUrl‘, //文件选择框的id属性
dataType: ‘json‘, //返回数据的类型
success: function(data) { //服务器响应成功时的处理函数
config.data.show = false;
if (data.meta.code == ‘200‘) {
window.location.reload();
}
console.log(data.meta);
},
error: function(data) { //服务器响应失败时的处理函数
console.log(data);
}
});
5.用v-if指令后，对该dom绑定事件不起作用
换了v-show
6.有没有可以监听地址栏变化的方法
还没解决
7.复制文字到剪切板
（1）
<!-- 点击复制begin -->
<script type="text/javascript" src="/js/zclip/
jquery.zclip.js"></script>
<!-- 点击复制end -->
（2）
$("#phone_number").zclip({
path: "/js/zclip/ZeroClipboard.swf",
copy: function(){
return $(this).val();
},
beforeCopy:function(){/* 按住鼠标时的操作 */
$(this).css("color","orange");
},
afterCopy:function(){/* 复制成功后的操作 */
var $copysuc = $("<div class=‘copy-tips‘><div class=‘copy-tips-wrap‘>? 复制成功</div></div>");
$("body").find(".copy-tips").remove().end().append($copysuc);
$(".copy-tips").fadeOut(3000);
}
});
8.文件上传绑定的onchange事件，用的ajaxfileupload.js 但是change事件第二次失效。
用juqery.upload.js解决了。
$(‘#img‘).fileupload({
add: function(e, data) {
var uploadErrors = [];
var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
if (data.originalFiles[0][‘type‘].length && !acceptFileTypes.test(data.originalFiles[0][‘type‘])) {
uploadErrors.push(‘传入的格式不对‘);
}
if (data.originalFiles[0][‘size‘].length && data.originalFiles[0][‘size‘] > 5000000) {
uploadErrors.push(‘所选图片太大‘);
}
if (uploadErrors.length > 0) {
alert(uploadErrors.join("\n"));
} else {
data.submit();
}
},
url: env.api + "liveman/panorama/panora/cover",
dataType: ‘json‘,
autoUpload: true,
//成功
done: function(e, data) {
_self.flagImg = true;
_self.dataObject.coverUrl = data.result.data;
},
//失败
fail: function(e, data) {
console.log(data);
}
});
9.form表单的提交不跳转
html:
<form method="post" name="testForm" id="showDataForm" enctype="multipart/form-data" v-bind:action="url" >
<label for="video_file" class="labelText col-sm-4 text-right">视 频</label>
<div class="col-sm-2">
<input type="file" id="video_file" name="video_file">
</div>
<div class="col-sm-1">
<button type="submit" class="submit" >提交</button>
</div>
</form>
js:
$("#showDataForm").on(‘submit‘,function(event) {
$("#showDataForm").ajaxSubmit(function(message) {
// 提交表单的返回值
// console.log(message);
if(message.code == 0) {
alert("视频上传成功");
}else {
alert(‘视频上传失败‘);
}
});
return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
});
10.XMLHttpRequest上传文件做进度条
//进度条函数
function videoUploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
_self.progressBar = percentComplete;
}
else {
console.log(".......")
}
}
//文件上传成功函数
function videoUploadComplete(evt) {
var response = JSON.parse(evt.currentTarget.response);
if(response.code == 0){
_self.flagVideo = true;
alert("视频上传成功");
}
}
//文件上传函数
function uploadVideo(url) {
var xhr = new XMLHttpRequest();
var fd = new FormData();
fd.append("show_form", document.getElementById(‘video_file‘).files[0]);
xhr.upload.addEventListener("progress", function(){videoUploadProgress(event)}, false);
xhr.addEventListener("load", videoUploadComplete, false);
xhr.open("POST", url);
console.log(url);
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.send(fd);
}
$("#submit").on(‘click‘,function(){
uploadVideo(_self.url);
});
11.绑定图片
<img v-bind:src="item.image">
12.绑定value到Vue实例的一个动态属性上
对于单选按钮，勾选框及选择框选项，v-model绑定的value通常是静态字符串（对于勾选框是逻辑值）：
13.vue页面闪烁问题{{message}}
样式：
[v-cloak]{
display:none;
}
dom:
<div v-cloak>{{message}}</div>
14.vuejs中过渡动画
样式：
.staggered-transition {
transition: all .5s ease;
/*overflow: hidden;*/
margin: 0;
}
.staggered-enter,
.staggered-leave {
opacity: 0;
}
dom:
<li class=" treeview" v-for="menu in menus |search" v-bind:class="{‘active‘: searchVal!=‘‘||$index == activeMemuIndex}" transition="staggered" stagger="100">
15.局部样式
<style scoped></style>
支持sass
<style scoped lang=‘sass‘></style>
16.webpack区分测试环境、开发环境和正式环境
package.json:
"scripts": {
"start": "webpack-dev-server --inline",
"test": "webpack",
"build": "webpack"
},
webpack.config.js:
if (TARGET === ‘start‘) {
module.exports.plugins = [
new webpack.DefinePlugin({
‘env‘: {
api: ‘"http://localhost:8888/v1/"‘ 测试环境
}
}),
new TransferWebpackPlugin([
{ from: ‘exter‘ }
], path.resolve(__dirname, "src")),
new TransferWebpackPlugin([
{ from: ‘login‘ }
], path.resolve(__dirname, "src"))
]
module.exports.devtool = ‘#source-map‘
} else {
module.exports.plugins = [
new webpack.DefinePlugin({
‘env‘: {
api: ‘"http://localhost:8888/v1/"‘ 发布环境
}
}),
new TransferWebpackPlugin([ 文件拷贝
{ from: ‘exter‘ }
], path.resolve(__dirname, "src")),
new TransferWebpackPlugin([
{ from: ‘login‘ }
], path.resolve(__dirname, "src"))
]
module.exports.devtool = ‘#source-map‘
}
17.window.open()新窗口
window.location=当前窗口
18.公用模态框组件（父子组件通信）
export default {
props: {
modal: {
title: ‘‘,
content: ‘‘,
flag: ‘‘,
id: ‘‘,
show: false,
num: ‘‘
},
focusList: []
},
methods: {
refresh: function() {
this.deleteFocusSure();
},
deleteFocusSure: function(id) {//确定删除
var _self = this;
$.ajax({
url: env.api + "liveman/focuspic/piclist/delete",
data: {id: _self.modal.id},
success: function(data) {
if(data.meta.code == 200) {
for (let i = 0; i < _self.focusList.length; i++) {
if(_self.focusList[i].id == _self.modal.id) {
_self.focusList.splice(i,1);
_self.modal.show = false;
_self.$dispatch(‘focusList‘, _self.focusList); //通知
}
}
}
},
err: function(err) {
console.log(err);
}
});
},
},
events: { //通知
‘refresh‘ () {
this.refresh();
}
},
}
<modal-file :modal="modal" :focus-list="focusList"></modal-file>
import modalFile from ‘./modalFile.vue‘;
export default {
data() {
return {
focusList: [],
modal: {}
}
},
components: {
modalFile
},
methods: {
deleteFocus: function(id) {//删除
this.modal = {
show: true,
title: ‘删除‘,
content: ‘确定删除该数据?‘,
flag: 1,
id: id
}
},
Preview: function(data,type,userid) {//预览
var _self = this;
if(type == 3 ) {
$.ajax({
url: env.api + "liveman/focuspic/piclist/preview",
data: {liveid:data,type:3},
success: function(data) {
var activityId = data.data;
_self.modal = {
show: true,
title: "直播预览",
flag: 2,
id: activityId,
}
}
});
}
}
},
events: { //刷新
// 分页组件传回的表格数据（这里即为服务器传回的数据）
‘data‘ (data) {
this.focusList = data.data.data;
console.log(this.focusList);
},
‘focusList‘ (focusList) {//删除后的刷新
this.focusList = focusList;
}
}
}
19.watch的使用
watch: {
‘selectedType‘: ‘getPlaceholder‘
}
‘selectedType‘:是data里面定义的变量；
‘getPlaceholder‘：是methods里面定义的方法
20.vue的分页组件
21.watch
定义了一个对象类型的数据（例如：obj），改变了属性（例如：obj.name）,处罚不了watch事件。
22.img
dom:
< img :src="img"/>
js:
data() {
return {
img: require(‘../../login/login/imgs/progress.gif‘)
}
}
初用vue遇到的一些问题
原文：http://www.cnblogs.com/lhy-93/p/5741257.html
