頁面傳參,vm調用數據,父子頁面之間的數據調用

頁面上調用js裏面的方法css

@click="click_tag(i)

click_tag  是方法名   卸載method裏面html

把js裏面的數據循環出來json

v-for="i in tags

頁面上須要用到哪些數據   在data裏面定義出來api

data: function() {
		return {
			tags: [],
			active_tag: '',
		};
	},

el對應你在頁面上的位置   能夠是class或idapp

var vm = new Vue({
	el: '#app',

mui.ready是頁面初始化完成時要進行的操做ui

mui.ready(function() {
	var url = 'http://api.toutiao.axita.com.cn/tags';
	mui.get(url, function(res) {
		vm.tags = res.data.list;
		vm.active_tag = vm.tags[0].code;
	}, 'json');
});

先定義頁面上須要的數據this

data: function() {
		return {
			code: 'tuijian',
			articles: [],
		};
	},

code要跟一個默認值,在尚未進行任何操做的時候默認顯示code裏的數據url

定義一個拼接字符串的方法,爲了請求數據在頁面上渲染code

methods: {
		load_articles: function() {
			var url = 'http://api.toutiao.axita.com.cn/content/list?tag=' + this.code 
					+ '&min_time=' + (new Date().getTime());
			mui.get(url, function(res) {
				vm.articles = res.data.list;
			}, 'json');
		}
	}

當剛打開app尚未進行任何操做的時候,會進去mui.ready裏面進行操做,因此要先調用一次拼接字符串的方法,讓默認的第一個數據出來,不能空白htm

mui.ready(function() {
	vm.load_articles();
	plus.navigator.closeSplashscreen();
});

不一樣的頁面之間關聯,必定要有觸發點,不要單獨存在,必定有關聯的方法和事件.  不要忘了關聯js和css,路徑要正確.

js裏面若是加載了mui.init     html裏面的style就不用重複定義

相關文章
相關標籤/搜索