Vue.js中变量的使用
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代码
基础原始数据1 {{name}}
基础原始数据2 {{name}}
属性原始数据 {{user.name}} {{name}}
方法原始数据 {{user.name}} {{name}}