頁面上調用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就不用重複定義