组件学习
step 1.建立一个最简单的组件
<div id="box">
<my-component>
</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component', { template: '<div>这是我写的第一个组件！</div>' })
new Vue({ el: '#box', data: { } })
// 这样就在全局注册了一个组件，'my-component'是组件的名字，后面的{}里可以写参数，我们看到这里写了一个template，它是组件将会渲染的html内容；把组件名称当做一个标签来写即可。，Vue组件注册要写在前面，Vue实例初始化要写在后面， </script>
2、原始模板
<!--page-->
<div id="apppagebar">
<ul class="pagination">
<li v-for="n in pageCount"> <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
</li> </ul>
</div>
<script>
var vm = new Vue({ el: '#apppagebar', data: { activeNumber: 1, pageCount: 10 } })
</script>
二、添加一个方法GetStockInfo，后台取数 （一）第一步：添加一个方法，供调用 const NYTBaseUrl = "http://localhost:14098/api/GetStockInfo"; const ApiKey = "your_api_key"; function buildUrl(url) { return NYTBaseUrl + url + ".json?api-key=" + ApiKey } var vm = new Vue({ el: '#app', data: { search: '', query: { direction: 0, page: 0 }, loading: true, selected: 'A', options: [ { text: '深证A股', value: 'A' }, { text: '上海A股', value: 'B' }, { text: '中小板', value: 'C' } ], post: null, errors: null, results: [], blogs: [], gridColumns: ['customerId', 'companyName', 'contactName', 'phone'], gridData: [], apiUrl: 'http://localhost:15341/api/Customers', newPerson: { name: '', age: 0, sex: 'Male' }, people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] }, //mounted() { // let direction = this.query.direction; // let page = this.query.page; // //axios.get(source+"?direction="+direction+"&page="+page); // // axios.get("http://api.stockso.com/api/GetStockInfo?ID=12345") // axios.get("http://api.stockso.com/api/GetStockInfo", { // params: { // firstName: this.search, // page: this.query.page // } // } // ) // .then((response) => { // this.results = response.data; // this.loading = false; // console.log(response); // }) // .catch(function (error) { //come from :https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format // if (error.response) { // // The request was made and the server responded with a status code // // that falls out of the range of 2xx // console.log(error.response.data); // console.log(error.response.status); // console.log(error.response.headers); // } else if (error.request) { // // The request was made but no response was received // // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // // http.ClientRequest in node.js // this.errors = error.request; // console.log(error.request); // } else { // // Something happened in setting up the request that triggered an Error // console.log('Error', error.message); // } // console.log(error.config); // }); //}, //ready: function () { // this.getCustomers() //}, //step 1：在这里添加一个方法，供调用 methods: { GetStockInfo: function () { let direction = this.query.direction; let page = this.query.page; //axios.get(source+"?direction="+direction+"&page="+page); // axios.get("http://api.stockso.com/api/GetStockInfo?ID=12345") axios.get("http://api.stockso.com/api/GetStockInfo", { params: { firstName: this.search, page: this.query.page } } ) .then((response) => { this.results = response.data; this.loading = false; console.log(response); }) .catch(function (error) { //come from :https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js this.errors = error.request; console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); }); }, details: function (id) { var time = Math.round(Math.random() * 999) + 3000; window.location.href = "/MeetMember/Detail?id=" + id + "&time=" + time; }, getBlogs: function () { var that = this; $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) { if (!result) { return; } that.blogs = result; }); }, createPerson: function () { this.people.push(this.newPerson); // 添加完newPerson对象后，重置newPerson对象 this.newPerson = { name: '', age: 0, sex: 'Male' } }, deletePerson: function (index) { // 删一个数组元素 this.people.splice(index, 1); } } })</script>
（二）第二步：添加 click事件，点击后调用指定的方法 如下：<input v-on:click="GetStockInfo" type="button" value="提交" /> <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> <table> <thead> <tr> <th>序号</th> <th>股票代码</th> <th>股票名称</th> <th>股票价格</th> <th>截止时间</th> </tr> </thead> <tbody> <tr v-for="(result,index) in results"> <td>{{index+1}}</td> <td>{{ result.stockCode }}</td> <td>{{ result.stockName }}</td> <td>{{ result.m_fRecentNewPrice }}</td> <td>{{ result.startTime }}</td> </tr> </tbody> </table> <div class="loading" v-if="loading"> Loading... </div> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> <input v-on:click="GetStockInfo" type="button" value="提交" /> @*//添加 click事件，点击后调用指定的方法*@ @*<input v-model="search" /> <input v-model="query.page" />*@ </div>
三、添加参数传递，用get方法 第一步：添加两个数据项search，query <script> const NYTBaseUrl = "http://localhost:14098/api/GetStockInfo"; const ApiKey = "your_api_key"; function buildUrl(url) { return NYTBaseUrl + url + ".json?api-key=" + ApiKey } var vm = new Vue({ el: '#app', data: { search: '', query: { direction: 0, page: 0 }, loading: true, selected: 'A', options: [ { text: '深证A股', value: 'A' }, { text: '上海A股', value: 'B' }, { text: '中小板', value: 'C' } ], post: null, errors: null, results: [], blogs: [], gridColumns: ['customerId', 'companyName', 'contactName', 'phone'], gridData: [], apiUrl: 'http://localhost:15341/api/Customers', newPerson: { name: '', age: 0, sex: 'Male' }, people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] }, //mounted() { // let direction = this.query.direction; // let page = this.query.page; // //axios.get(source+"?direction="+direction+"&page="+page); // // axios.get("http://api.stockso.com/api/GetStockInfo?ID=12345") // axios.get("http://api.stockso.com/api/GetStockInfo", { // params: { // firstName: this.search, // page: this.query.page // } // } // ) // .then((response) => { // this.results = response.data; // this.loading = false; // console.log(response); // }) // .catch(function (error) { //come from :https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format // if (error.response) { // // The request was made and the server responded with a status code // // that falls out of the range of 2xx // console.log(error.response.data); // console.log(error.response.status); // console.log(error.response.headers); // } else if (error.request) { // // The request was made but no response was received // // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // // http.ClientRequest in node.js // this.errors = error.request; // console.log(error.request); // } else { // // Something happened in setting up the request that triggered an Error // console.log('Error', error.message); // } // console.log(error.config); // }); //}, //ready: function () { // this.getCustomers() //}, methods: { GetStockInfo: function () { let direction = this.query.direction; let page = this.query.page; //以下两种方式任选其一皆可以 axios.get("http://api.stockso.com/api/GetStockInfo" + "?direction=" + this.search + "&page=" + this.query.page) //axios.get("http://api.stockso.com/api/GetStockInfo", { // params: { // firstName: this.search, // page: this.query.page // } //}) .then((response) => { this.results = response.data; this.loading = false; console.log(response); }) .catch(function (error) { //come from :https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js this.errors = error.request; console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); }); }, details: function (id) { var time = Math.round(Math.random() * 999) + 3000; window.location.href = "/MeetMember/Detail?id=" + id + "&time=" + time; }, getBlogs: function () { var that = this; $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) { if (!result) { return; } that.blogs = result; }); }, createPerson: function () { this.people.push(this.newPerson); // 添加完newPerson对象后，重置newPerson对象 this.newPerson = { name: '', age: 0, sex: 'Male' } }, deletePerson: function (index) { // 删一个数组元素 this.people.splice(index, 1); } } })</script>
第二步：填加双向绑定的两个参数，用于输入数据 <div id="app"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> <table> <thead> <tr> <th>序号</th> <th>股票代码</th> <th>股票名称</th> <th>股票价格</th> <th>截止时间</th> </tr> </thead> <tbody> <tr v-for="(result,index) in results"> <td>{{index+1}}</td> <td>{{ result.stockCode }}</td> <td>{{ result.stockName }}</td> <td>{{ result.m_fRecentNewPrice }}</td> <td>{{ result.startTime }}</td> </tr> </tbody> </table> <div class="loading" v-if="loading"> Loading... </div> <ul v-if="errors && errors.length"> <li v-for="error of errors"> {{error.message}} </li> </ul> <input v-on:click="GetStockInfo" type="button" value="提交" /> @*//添加 click事件*@ //第二步：填加双向绑定的两个参数 <input type="text" v-model="search" /> {{search}} <input type="text" v-model="query.page" /> {{query.page}} </div>
第三步：在get请求中加入参数，一种为字符串拼接方式，另一种利用axios的params属性 <script> const NYTBaseUrl = "http://localhost:14098/api/GetStockInfo"; const ApiKey = "your_api_key"; function buildUrl(url) { return NYTBaseUrl + url + ".json?api-key=" + ApiKey } var vm = new Vue({ el: '#app', data: { search: '', query: { direction: 0, page: 0 }, loading: true, selected: 'A', options: [ { text: '深证A股', value: 'A' }, { text: '上海A股', value: 'B' }, { text: '中小板', value: 'C' } ], post: null, errors: null, results: [], blogs: [], gridColumns: ['customerId', 'companyName', 'contactName', 'phone'], gridData: [], apiUrl: 'http://localhost:15341/api/Customers', newPerson: { name: '', age: 0, sex: 'Male' }, people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] }, //mounted() { // let direction = this.query.direction; // let page = this.query.page; // //axios.get(source+"?direction="+direction+"&page="+page); // // axios.get("http://api.stockso.com/api/GetStockInfo?ID=12345") // axios.get("http://api.stockso.com/api/GetStockInfo", { // params: { // firstName: this.search, // page: this.query.page // } // } // ) // .then((response) => { // this.results = response.data; // this.loading = false; // console.log(response); // }) // .catch(function (error) { //come from :https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format // if (error.response) { // // The request was made and the server responded with a status code // // that falls out of the range of 2xx // console.log(error.response.data); // console.log(error.response.status); // console.log(error.response.headers); // } else if (error.request) { // // The request was made but no response was received // // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // // http.ClientRequest in node.js // this.errors = error.request; // console.log(error.request); // } else { // // Something happened in setting up the request that triggered an Error // console.log('Error', error.message); // } // console.log(error.config); // }); //}, //ready: function () { // this.getCustomers() //}, methods: { GetStockInfo: function () { let direction = this.query.direction; let page = this.query.page; //以下两种方式任选其一皆可以，一种为字符串拼接方式，另一种利用axios的params属性 axios.get("http://api.stockso.com/api/GetStockInfo" + "?direction=" + this.search + "&page=" + this.query.page) 或者 axios.get("http://api.stockso.com/api/GetStockInfo", { params: { firstName: this.search, page: this.query.page } }) .then((response) => { this.results = response.data; this.loading = false; console.log(response); }) .catch(function (error) { //come from :https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js this.errors = error.request; console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); }); }, details: function (id) { var time = Math.round(Math.random() * 999) + 3000; window.location.href = "/MeetMember/Detail?id=" + id + "&time=" + time; }, getBlogs: function () { var that = this; $.getJSON("http://www.lovexins.com:1001/api/values?task=2", function (result) { if (!result) { return; } that.blogs = result; }); }, createPerson: function () { this.people.push(this.newPerson); // 添加完newPerson对象后，重置newPerson对象 this.newPerson = { name: '', age: 0, sex: 'Male' } }, deletePerson: function (index) { // 删一个数组元素 this.people.splice(index, 1); } } })</script>.