Foreword
In fact vue syntax official website has detailed explanations and examples, here I do not explain what, just give myself learning the syntax of these are examples of exercises posted. Additional examples of the official website is one of html files. I have here is a document of vue, accessed via different routes.
This effect is similar to drawing on it, no style, and everyone will look at hehe. Well, here we take a look at it together vue grammar topics.
routing
In fact, you should not talk about the route, but want to do this is to click on to jump through routing to achieve. In fact, very simple, we'll just use, do not ask why should so be it first.
<router-link :to="{name: 'IfAndFor'}">
条件与循环
</router-link>We can see that we can achieve jump through router-link. to indicate the jump address, name refers to the jump routes. Of course, this route requires us to src - configured index.js, and related components for the job yo - router.
We want to add routing, configuration corresponds to an increase in index.js like, and then you can see the interface to achieve the jump by router-link.
Conditions circulation
We configured the route, and now we look v-if and v-for us to create a new component as follows:
<template xmlns:v-bind="http://www.w3.org/1999/xhtml">
<div>
<div id="for">
<p>一</p>
<table>
<tr v-for="(value, key, index) in object">
<td v-if="key === 'url'">
<a v-bind:href="value"> {{value}}</a>
</td>
<td v-else>
{{ value }}
</td>
</tr>
</table>
<br>
<p>二</p>
<ul>
<li v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</li>
</ul>
<br>
<p>二</p>
<ul>
<li v-for="(value, key) in object">
{{ key }} : {{ value }}
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "",
data(){
return {
object: {
name: 'quellanan',
url: 'http://quellanan.xyz',
slogan: '学的不仅是技术，更是梦想！'
}
}
}
}
</script>I can see three ways to use the for loop. index is an index, key is the key, value is value. These are actually in circulation and Java similar. Nothing more than iterate through the index, or else by key traversal.
v-if and v-else-if v-else is the same. The condition on the display component, can be so used to know.
But one thing, the above code is also found, either v-if or v-for, to be used in conjunction with a label. Alone can not be used.
Monitor events
It sounds very large, the method is actually a watch.
We wrote a component unit conversion:
<template>
<div>
<div style="margin: 20px">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
<p id="info"></p>
</div>
<div style="margin: 20px">
小时 : <input type = "text" v-model = "hour">
分钟 : <input type = "text" v-model = "minute">
秒 : <input type = "text" v-model = "second">
<br>
天 : <input type = "text" v-model = "day">
<br>
星期 : <input type = "text" v-model = "week">
</div>
<div style="margin: 20px">
<p >计数器: {{ counter }}</p>
<button @click = "counter++">点我</button>
</div>
</div>
</template>
<script>
export default {
name: "",
data(){
return{
kilometers : 0,
meters:0,
second : 0,
minute : 0,
hour : 0,
day : 0,
week : 0,
counter: 0
}
},
watch : {
kilometers:function(val) {
this.kilometers = val;
this.meters = this.kilometers * 1000
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
},
week:function(val) {
this.week = val;
this.day = this.week * 7;
this.hour = this.day * 24;
this.minute = this.hour * 60;
this.second = this.minute * 60;
},
day : function (val) {
this.day = val;
this.week = this.day/7;
this.hour = this.day * 24;
this.minute = this.hour * 60;
this.second = this.minute * 60;
},
hour : function (val) {
this.hour = val;
this.day = this.hour/24;
this.week = this.day/7;
this.minute = this.hour * 60;
this.second = this.minute * 60;
},
minute : function (val) {
this.minute = val;
this.hour = this.minute/60;
this.day = this.hour/24;
this.week = this.day/7;
this.second = this.minute * 60;
},
second : function (val) {
this.second = val;
this.minute = this.second/60;
this.hour = this.minute/60;
this.day = this.hour/24;
this.week = this.day/7;
},
counter :function(nval, oval) {
//alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
}
}
};
</script>
v-model represents a two-way data binding, this is not much to say. data initialization data, watch listener method is a function, the respective components and monitor treatment.
Send an HTTP request
We need to do before and after the end of the separation, then the back-end data access via http request is unavoidable. So we look at together. I also see here an example profile. Take over direct use.
We create a BlogList.vue file, as follows:
<template>
<div >
<table>
<tr v-for="blog in blogs">
<!--<td @click='show_blog(blog.id)'>{{blog.title}}</td>-->
<td>
<router-link :to="{name: 'Blog', query: {id: blog.id}}">
{{blog.title}}
</router-link>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data () {
return {
title: '博客列表页',
blogs: []
}
},
mounted () {
this.$http.get('api/interface/blogs/all').then((response) => {
console.info(response.body)
this.blogs = response.body.blogs
}, (response) => {
console.error(response)
});
},
methods:{
show_blog: function(blog_id) {
this.$router.push({name: 'Blog', query: {id: blog_id}})
}
}
}
</script>
<style >
td {
border-bottom: 1px solid grey;
}
</style>The above code can be seen. The method of transmitting mounted http request. After initialization function mounted a page, the rendering data to the interface.
mounted () {
this.$http.get('api/interface/blogs/all').then((response) => {
this.blogs = response.body.blogs
}, (response) => {
console.error(response)
});
},We start the project, we found that reported this error. This is because we have not introduced the project vue-resource so we need to introduce in the project.
We open the console (alt + F12) in the idea.
npm install vue-resource
After installing, we introduced it in the main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.http.options.emulateJSON = true //允许使用post 请求。Set in what index.js agent, simulate what cross-domain requests, or interface to access not - in config.
proxyTable: {
'/api': { // 1. 对于所有以 "/api" 开头的url 做处理．
target: 'http://siwei.me', // 3. 转发到 siwei.me 上．
changeOrigin: true,
pathRewrite: {
'^/api': '' // 2. 把url中的 "/api" 去掉．
}
}
},
Well, we start to look at,
followed by obtaining the details of the above did not pass parameters to get the details need to pass parameters, as follows:
<template>
<div >
<div>
<p> 标题： {{ blog.title }} </p>
<p> 发布于： {{blog.created_at }}</p>
<div>
<div v-html='blog.body'></div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
blog: {}
}
},
mounted() {
this.$http.get('api/interface/blogs/show?id='+this.$route.query.id).then((response) => {
this.blog = response.body.result
}, (response) => {
console.error(response)
});
}
}
</script>
<style scoped>
</style>This is someone else's interface seems not to support post requests. So post a request on the first well, and that this be considered a native http request it, we later use, you can send http requests using axios. This behind us try again.
Extra
This talked about this, right, are some examples. If you look at the syntax, then have a look at the tutorial official website.
Code is uploaded to GitHub:
https://github.com/QuellanAn/zlflovemmVue
Come follow ♡
Welcome to the personal public concern number "Programmers love yogurt"
Share a variety of learning materials including java, linux, big data. Information includes video documentation and source code, while sharing themselves and delivery of high-quality technology blog.
If you like attention and remember to share yo ❤
