vue使用模板（vuejs模板）

(function ($) {

'use strict';

var base_url = localStorage.getItem("apihost");

var app;

var vm = {

rescueId : '',

fire_width: 0, //长边长

fire_height: 0, //短边长

rescue : {"name":"消防信息"},

rescueItems : [],

auth : 'NG',

extendContent: {},

}

window.onload = function () {

app = new Vue({

el: '#app',

data: vm,

//当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。

//不支持异

//html示例：<td>{{zyTotal(item)}}</td>

computed : {

zyTotal : function(){

return function(item) {

let result = 0;

if (item.extendContent.zyds) {

result += item.extendContent.zyds;

}

if (item.extendContent.zybk) {

result += item.extendContent.zybk;

}

if (item.extendContent.zyxmt) {

result += item.extendContent.zyxmt;

}

return result;

}

}

},

beforeCreate(){

console.log('beforecreate:',document.getElementById('first'))//null

console.log('data:',this.text);//undefined

this.sayHello();//error:not a function

},

created(){

console.log('create:',document.getElementById('first'))//null

console.log('data:',this.text);//this.text

this.sayHello();//this.sayHello()

},

beforeMount(){

console.log('beforeMount:',document.getElementById('first'))//null

console.log('data:',this.text);//this.text

this.sayHello();//this.sayHello()

},

mounted(){

console.log('mounted:',document.getElementById('first'))//<p></p>

console.log('data:',this.text);//this.text

this.sayHello();//this.sayHello()

$('#searchInput').keydown(function (event) {

if (event.keyCode == 13) {

_this.searchLists();

}

});

},

//监听属性：一定是data中存在的属性，当监听的属性发送变化是触发

//当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。这是和computed最大的区别

//支持异步

watch: {

"rescueId": function (newval,oldval) {

//todo

},

"fire_height": function (newval) {

//todo;

}

},

//过滤需要匹配的数据

//html示例1 <td v-html="$options.filters.compareNum(item.extendContentJSON.dd.data[0])"></td>

//html示例2 <td>{{item.extendContentJSON.dd.data[0] | preLabel2Num}}</td>

filters : {

preLabel2Num : function(value){

if(value && value.preLabel){

return value.preLabel;

}else {

return 0;

}

},

compareNum : function(value){

if(!value || !value.currLabel || !value.preLabel) {

return "0%";

}else {

let currLabel = value.currLabel;

let preLabel = value.preLabel;

if(currLabel > preLabel) {

//上升

let num =parseInt((currLabel - preLabel) * 100 /preLabel );

return "<p style='color:red;font-size: 10px;'>↑" + num + "%" + "</P>"

}else if (currLabel < preLabel){

//下降

let num =parseInt((preLabel - currLabel) * 100 /preLabel );

return "<p style='color:green;font-size: 10px;'>↓" + num + "%" + "</P>"

} else {

return "0%";

}

}

}

},

methods :{

bindEvent : function(){

this.$nextTick(() => {

$(" input[ type='number' ] ").bind('focus',function(){

$('#publishButton').css('position','static');

}).bind('blur',function(){

$('#publishButton').css({'position':'fixed','bottom':'0'});

});

$(" textarea").bind('focus',function(){

$('#publishButton').css('position','static');

$(this).css({'height':'auto','overflow-y':'hidden'}).height(this.scrollHeight);

}).bind('blur',function(){

$('#publishButton').css({'position':'fixed','bottom':'0'});

}).bind('input', function () {

$(this).css({'height':'auto','overflow-y':'hidden'}).height(this.scrollHeight);

});

})

},

save: function (num) {

}

}

});

}

})(Zepto);