Vue基础语法3

生命周期

    <div id="app">
        <p> {
  {msg}}</p>
        <input type="text" v-model="msg">
    </div>

var af = new Vue({
   
        el: "#app",
        data: {
   
            msg: 'hahaha'
        },
        methods: {
   

        },
        // data中的数据,methods中的方法,在此时还没有创建
        //一般用于页面的重定向(页面网址发生改变时,重新定位网页网址)
        beforeCreate() {
   
            console.log('beforeCreated');
            console.log(this.msg);
        },
        // 初始化已经完,第一个可以操作data和methods的生命周期
        // 一般用于接受请求,与数据初始化
        created() {
   
            console.log('created');
            console.log(this.msg);
        },
        // 此处挂载的是虚拟DOM元素
        beforeMount() {
   
            console.log('beforeMount');
            // debugger       //调试用的代码,当浏览器运行到此处时暂停运行
        },
        // 此处挂载的是真实的DOM元素,是第一个可以操作DOM元素的声明周期
        mounted() {
   
            console.log('mounted');
        },

        //在数据改变时运行,可以执行0次或多次
        //数据更新之前执行,此时data中的数据是新的,但页面中的数据还是旧的
        beforeUpdate () {
   
            console.log('beforeUpdate');
        },
        //数据更新完成,此时data中的数据和页面中的数据都是新的
        updated() {
   
            console.log('Updated');
        },

        //组件销毁之前执行,此时页面还没真正的销毁,一般用于页面结尾清除一些监听或计时器等
        beforeDestroy() {
   
            console.log('Updated');
        },
        //组件销毁完成后执行
        destroyed() {
   
            console.log('Updated');
        }
    })

运行结果如下:
数据改变前:

数据改变后:

vue-resource请求

<div id='app'></div>

    const vm = new Vue({
   
        el: '#app',
        data: {
   
            imgSrc: '',
            imgList: [],
            courseList: []
        },
        methods: {
   
        },
        created() {
   
            //get的默认请求头为www/from-....格式
            this.$http.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5').then(res => {
   
                console.log(res);
            })
            //post的默认请求头为JSON格式
            this.$http.post('http://wkt.shangyuninfo.cn/weChat/applet/subject/list', {
   
                enable: 1
            }).then(res => {
   
                console