关于VUE的学习

原来一直习惯用JQUERY

这两年一直关注VUE的发展，但是一直没拿VUE做过项目，上周花了点时间，将原有的一个项目，改成用VUE的实现。

jquery操作DOM

VUE操作数据，

因为是重构项目，代码比之前的确要少了70%，很多垃圾代码也删除了。

原效果：

新效果：

VUE前端代码在此：

{extend name='common/_vuecontainer'} {block name="content"}
<style>
	ul {
		display: block;
		list-item: none;
	}

	li {
		display: block;
		list-item: none;
		padding: 5px 20px;
		cursor: pointer;
	}
	h3{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
<div class="row" id="app">
	<h1 class="text-center">图片搜索引擎Ver2.0</h1>
	<hr>
	<div class="row">
		<div class="col-lg-4 col-md-offset-4">
			<div class="input-group">
				<input type="text" class="form-control" v-model="number" placeholder="输入产品原厂号码">
				<span class="input-group-btn">
					<button class="btn btn-success" type="button" @click="search()">手气还行</button>
					<button class="btn btn-primary" type="button" @click="news()">新品拍照</button>
				</span>
			</div><!-- /input-group -->
		</div><!-- /.col-lg-6 -->
	</div><!-- /.row -->
	<div class="row">
		<div class="alert alert-warning" role="alert" v-if="errored">
			<p>AJAX错误提示</p>
		</div>

		<div v-else>
			<div class="progress" v-if="loading">加载中</div>
			<div class="alert alert-warning" role="alert" v-if="info.status!=200">{{info.msg}}</div>
			<div class="col-md-12" v-else>
				<div v-if="info.type==='img'">
					<br/>
					<div v-if="info.data.length == 0">
						没有图片
					</div>
					<div class="col-sm-2" v-for="(item, index) in info.data">
						<div class="thumbnail">
							<a target="_blank" :href="'/admin/Pic.Pic/view?pic_id='+item.pic_id">
								<img :src="'http://api.freyparts.cn/Pic/show?id='+item.hash+'&u=8&b='+index" :alt="item.frey_no+' '+item.file_name">
							</a>
							<div class="caption">
								<h3>【{{item.frey_no}}】{{item.file_name}}</h3>
								<p><a target="_blank" :href="'/admin/Pic.Pic/view?pic_id='+item.pic_id" class="btn btn-primary" role="button">查看</a> <a href="#"
										@click="setmain(item.pic_id)" class="btn btn-default" role="button">设为首图</a></p>
							</div>
						</div>
					</div>
				</div>
				<div v-else>
					<ul class="col-md-8 col-md-offset-2" v-for="(item, index) in info.data">
						<li class="row"><b>{{ index }}</b></li>
						<li class="row">
							<ul>
								<li class="col-sm-2" v-for="(value, key) in item" @click="show(value)"><span
										class="glyphicon glyphicon-folder-close" aria-hidden="true"></span> {{value}}
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>

		</div>


	</div>
</div>
<script>
	vm = new Vue({
		el: '#app',
		data() {
			return {
				info: null,
				loading: true,
				errored: false,
				number: '',
			}
		},
		filters: {
			currencydecimal(value) {
				return value.toFixed(2)
			}
		},
		methods: {
			show: function(freyno) {
				this.number=freyno;
				geturl('/Tools.Pic/index?_ajax=1&number=' + freyno);
			},
			news: function() {
				geturl('/Tools.Pic/index?_ajax=1');
			},
			search: function() {
				geturl('/Tools.Pic/index?_ajax=1&number=' + this.number);
			},
			setmain:function(pic_id){
				geturl('/Tools.Pic/setmain?number=' + this.number + '&pic_id='+pic_id);
			}
		},
		mounted() {
			geturl('/Tools.Pic/index?_ajax=1');
		}
	});

	function geturl(url) {
		axios
			.post(Ctx + url)
			.then(response => {
				vm.$data.info = response.data
				//console.log(vm.$data.info)
			})
			.catch(error => {
				console.log(error)
				vm.$data.errored = true
			})
			.finally(() => vm.$data.loading = false)
	}
</script>
{/block}