Vue基础学习推荐

Vue.js可以实现双向数据绑定和组件的渐进式框架。

vue.js入门使用
https://cn.vuejs.org/v2/guide/
https://www.runoob.com/vue2/vue-tutorial.html

vue-router.js入门使用
https://router.vuejs.org/zh/
https://router.vuejs.org/zh/installation.html
 

1、js代码

// 加载js方法
window.onload = function(){
    main();
}

// 运行主函数
function main(){
    basic_variable();
    property_variable();
    method_variable();
}

// 1.1 js变量和Vue变量的基本使用

function basic_variable(){
    
    // 注意：基础变量中js变量和vue变量同时变化
    /*
     * data1和vue_user1.data用的是同一个地址同一块内存，因此js变量和vue变量同时变化
     */
    var data1={name:"河南大学",age:107};
    var vue_user1=new Vue({
        el:"#vue_basic_1",
        data:data1,
        methods:{
            update_basic:function(){
                this.name = this.name+'-软件学院';
                // 弹出true表明是同一个变量
                alert("data1==this.$data----"+(data1==this.$data));
                alert("data1.name==this.name----"+(data1.name==this.name));
            }
        }
    });    
    
    
    // 注意：基础变量中js变量和vue变量不同时变化
    /*
     * data2.name和vue_user2.name/vue_user2.$data.name在第一次初始化的时候是使用的同一个地址和内存，对，
     */
    var data2={name:"河南大学",age:107};
    var vue_user2=new Vue({
        el:"#vue_basic_2",
        data:{
            name:data2.name,
            age:data2.age
        },
        methods:{
            update_basic:function(){
                this.name = this.name+'-软件学院';
                // 弹出false表明不是同一个变量
                alert("data2==this.$data----"+(data2==this.$data));
                alert("data2.name==this.name----"+(data2.name==this.name));
            }
        }
    });
    
    // 第一次初始化后地址是一样的
    // alert("vue_user2.$data.name==data2.name----"+(vue_user2.$data.name==data2.name));
        
    var data3={name:"河南大学",age:107};
    var vue_user3=new Vue({
        el:"#vue_basic_2",
        data(){
            return{
                name:data3.name,
                age:data3.age
            }            
        },
        mounted(){
            alert(this.name+"return_mounted");
        }
    })
    
    alert(vue_user3.name+"return");
}

 

// 1.2 js变量和Vue变量在方法中的使用

function property_variable(){
    
    // 初始js变量
    var user_name='河南大学';
    var user_age =107;
    
    var user={name:"河南大学",age:107}
    
    //建立Vue变量
    var vue_user = new Vue({
        el:"#vue_property",
        data:{
            user:{
                name:user.name,
                age:user.age
            }                    
        },
        methods:{
            update_property:function(event){
                // 内部访问vue变量
                this.user.name=this.user.name+'-软件学院';
                this.user.age =this.user.age-60;
                alert(user.name);
            }
        }
    });
    
}

// 1.3 js变量和Vue变量ajax方法调用中的使用

function method_variable(){
    //访问vue属性
    var user_name='河南大学';
    var user_age=107;
    
    //修改Vue变量
    var vue_user_method = new Vue({
        el:"#vue_method",
        data:{
            user:{
                //也可以使用“ name:vue_user.user.name+'-软件学院' ”
                name:user_name,
                //也可以使用“ age:vue_user.user.age-60 ”
                age:user_age
            },
            callback_data:{
                data:"河南大学1912年建校!"
            }
        },
        methods:{
            // Request the data
            ajax_post:function(){
                
                // 此处是为了在then方法中调用Vue实例，在then方法中不能使用this调用Vue实例的变量
                var ajax_vue = this;
                
                axios.post('mydata', this.user,{
                    // 数据转换
                    transformRequest:[
                        function(data){
                            let transfrom_object='';
                            for(let i in data){
                                transfrom_object+=i+'='+data[i]+'&';
                            }
                            return transfrom_object;
                        }
                    ]
                })
                .then(function (response) {
                    // 注意：不能在此方法中使用this调用Vue实例的变量
                                                            
                    ajax_vue.callback_data.data = response.data;
                    // 调用实体vue的方法
                    ajax_vue.ajax_deal_data_inner();
                    
                    // 也可以调用外部方法,此时一定要注意ajax_deal_data_outer中定义的全局js变量和Vue变量的值。
                    // 注意：如果全局js变量和Vue变量不是同一个地址和内存， ajax_deal_data_outer的js变量值全部为初始化Vue变量前的值。
                    ajax_deal_data_outer();
                    
                })
                .catch(function (error) {
                    console.log(error);
                });
            },
            // 内部方法
            ajax_deal_data_inner:function(){
                alert("内部方法："+this.callback_data.data);
            }
        },        
        mounted(){
            alert("我是mounted");
        }
    });
    // 可以再控件中调用方法，也可以使用Vue实例调用methods中的方法
//    vue_user_method.ajax_deal_data_inner();
    // 也可以使用moute调用
//    vue_user_method.$mount();
}

//外部方法
function ajax_deal_data_outer(){
    alert("外部方法");
}

2、Html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue.js使用</title>
        <!-- 导入Vue.js -->
        <script type="text/javascript" src="js/vue-2.6.10.min.js" ></script>
        <script type="text/javascript" src="js/axios-0.19.0.min.js"></script>
    </head>
    
    <body style="width: 100%; height: 100%;">
        
        <div id="vue_basic_1">
            <span>基础原始数据1</span> &nbsp;&nbsp;{{name}}&nbsp;&nbsp;
            <button v-on:click="update_basic">修改变量</button>
        </div>
        
        <div id="vue_basic_2">
            <span>基础原始数据2</span> &nbsp;&nbsp;{{name}}&nbsp;&nbsp;
            <button v-on:click="update_basic">修改变量</button>
        </div>
        
        <div id="vue_property">
            <span>属性原始数据</span> &nbsp;&nbsp;{{user.name}}&nbsp;&nbsp;{{name}}&nbsp;&nbsp;
            <button v-on:click="update_property">修改变量</button>
        </div>
        
        <div id="vue_method">
            <span>方法原始数据</span> &nbsp;&nbsp;{{user.name}}&nbsp;&nbsp;{{name}}&nbsp;&nbsp;
            <button v-on:click="ajax_post">请求数据</button>
        </div>
    </body>
    
    <!-- 导入自定义js -->
    <script type="text/javascript" src="js/vue_variables.js" ></script>
</html>