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> {{name}}
<button v-on:click="update_basic">修改變量</button>
</div>
<div id="vue_basic_2">
<span>基礎原始數據2</span> {{name}}
<button v-on:click="update_basic">修改變量</button>
</div>
<div id="vue_property">
<span>屬性原始數據</span> {{user.name}} {{name}}
<button v-on:click="update_property">修改變量</button>
</div>
<div id="vue_method">
<span>方法原始數據</span> {{user.name}} {{name}}
<button v-on:click="ajax_post">請求數據</button>
</div>
</body>
<!-- 導入自定義js -->
<script type="text/javascript" src="js/vue_variables.js" ></script>
</html>