vue2.0学习之基础内容

	import BScroll from 'better-scroll';
  	import star from '../star/star.vue';
  	import split from '../split/split.vue';
  	import icon from '../icon/icon.vue';
	import {formatDate} from "../../common/js/date.js";
	//{formatDate} 表示写的方法 前面加入了 export， 即  export function formatDate(){}

	export default {
	    props:{ //接口数据，父组件的数据,子组件通过props接收后,子组件才能使用
	      seller:{
	        type:Object, //数据类型
			default:{}
	      }
	    },
	    data(){
	      return{ // 必须return
	        favorite: false
	      }
	
	    },
	    watch:{ //主要监测数据变化
	      // watch 监听seller数据，一旦seller数据发生变化，就立即调用seller内部定义的方法
	      'seller'(){
	        this.$nextTick(()=>{
	          this._initScroll();
	          this._initPics();
	        })
	      }
	    },
	    ready(){ //数据准备好就执行此方法
	      this._initScroll();
	      this._initPics();
	    },
		created(){
			this.$http.get("/api/goods").then(function(response){
		      let data = response.body;
		      if(data.errno === ERROK){
		        this.goods = data.data;
		        this.$nextTick(() => {
		          console.log('created');
		          this._initScroll();
		          this._calculable();
		        });
		      }
		    });
		},
		/*
			created: 在模板渲染成html前调用，通常是初始化某些属性值，然后再渲染成视图
			mounted: 在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些必要的操作
			通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作
		*/

	    mounted(){ 
	      this.$nextTick(()=>{
	        this._initScroll();
	        this._initPics();
	      })
	    },
	    computed:{ //计算属性
	      favoriteText(){
	        return this.favorite ? '已收藏': '收藏'
	      }
	    },
	    methods:{ // 所有的方法都写在这里面
	      getHeart(event){
	        if(!event._constructed){ //阻止浏览器的网页点击事件，只执行手机点击事件
	          return;
	        }
	        this.favorite = !this.favorite
	      },
	      _initScroll(){ // 组件的私有方法，一般前面加_, 能被外部调用的方法不加_
	        if(!this.scroll){
	            this.scroll = new BScroll(this.$refs.sellerWrappper, {
	              click:true
	            })
	        }else{
	          this.scroll.refresh();
	        }
	      }
	      
	    },
	    components:{ //引入的组件，都需要在这里注册才能使用
	      star,
	      split,
	      icon
	    }


  }