vuejs--Build a personal blog (study notes)

1> Environment Construction
Node-v cnpm-v
CNPM Install--global VUE-CLI
Vue Init webpack Project name Select all n
CD to Project
CNPM Install installation Project dependent
NPM Run Dev Runs
Modify the port number--build folder under Dev-server.js file var pory = port number
Create a component for a project
Approximate process-Create a new Addface.vue file in the Components folder, copy the contents of the Hello.vue file and delete the redundant information, modify the class name, App.vue first introduced Addface,vue file is import ... From ... As well as referenced in the components, and then injected into the Addface.vue class under the App.vue template

<template>
<div id= "App" >
<add-face></add-face>
</div>
</template>

<script>
Import Addface from './components/addface '

Export Default {
Name: ' App ',
Components: {
Addface
}
}
</script>

2> Add Blog page post data
First, implement the basic layout in the template

All input should be bound to the data in both directions, and it needs to be v-model, and it needs to be declared in the script's data (data holds the variable) like this
Data () {
return {
Book: {
Title: "",
Content: "",
Checks: [],
Booker: ""
},
Bookers: [
"Yang",
"Max",
"Star"
],
Submmited:false
}
},

Now that we've bound the data through V-model, how to apply it, then we need to use {{}}
This is the angular standard two-way binding identity, like this.
<p> {{Book.title}} </p>
That's when we're going to ask, how do we get it for the array type of data?
You need to use v-for to traverse it,
For a chestnut: we defined a checks in book such an empty array (more for multiple boxes, such as the owning tag) so that we can get the corresponding value value and store it in the array when the user tick the marquee.
Then we can get an array of them through the v-for (which is usually needed for ul>li) like this.
<ul>
<li v-for= "Check in Book.checks" >
{{Check}}
</li>
</ul>
Next, if we need to specify a drop-down box option for the content (e.g. author) What do we need to do?
It is also very simple, first we need to define an array in data to store our particular marquee information, like the previous bookers:[], and then we can walk through the v-for in option like this
<select v-model= "Book.booker" >
<option v-for= "Booker in Bookers" >
{{Booker}}
</option>
</select>

So we've traversed the bookers data into option and presented the result of the selection as {{Booker}}, but here the Booker can only be used under option, how can we achieve two-way binding of the data, which is of course v-model, But we can not v-model= "Booker" to use it, the browser will error Booker undefined, then we define it in data, then we will be able to get the user's choice of value and like this to use it
<p>{{book.booker}}</p>

OnClick Event for form submission
V-on:click.prevent= "POST" (here the Prevent is to prevent the browser to refresh) Click Will trigger the POST method, so now we do not have this method, so we need to split the data outside the creation of a methods to store the method
Methods: {
Post:function () {
this. $http. Post ("Https://jsonplaceholder.typicode.com/posts", {
Title:this.book.title,
Content:this.book.content
})
. then (function (data) {
Console.log (data);
This.submmited = true;
})
}
}

Here we need to use the HTTP request, then we need to rely on the resource method, but we do not have him, so we need to download it
NPM Install Vue-resource--save
Now that we have downloaded it, if you want to use it, you need to refer to it in main.js first.
Import Vueresource from ' Vue-resource '
Vue.use (Vueresource)
At this point, we'll be able to use it in a normal way.
this. $http. Post ("Address required for post"). Then (callback function after post)

For the convenience of testing on-line already has to provide written good
Jsonplaceholder.typicode.com

If we need to control the form submission and hide then we need to use v-if
It also requires a Boolean type of variable control to display, so we first split and define it outside of data
Submmited:false
Then we can add events to the form via V-if and control the Boolean worth of changes in the post callback function
<form v-if= "!submmited" >
<label for= "" > Blog title:</label>
<input type= "text" v-model= "Book.title" required>
<label for= "" > Blog content:</label>
<textarea name= "" id= "" v-model= "Book.content" ></textarea>
<div id= "checkboxes" >
<label for= "" > Emotions </label>
<input type= "checkbox" value= "Emotion" v-model= "book.checks" >
<label for= "" > Mood </label>
<input type= "checkbox" value= "Mood" v-model= "book.checks" >
<label for= "" > Inspiration </label>
<input type= "checkbox" value= "Inspiration" v-model= "Book.checks" >
<label for= "" > Memories </label>
<input type= "checkbox" value= "Memories" v-model= "Book.checks" >
</div>
<label for= "" ></label>
<select v-model= "Book.booker" >
<option v-for= "Booker in Bookers" >
{{Booker}}
</option>
</select>
<button v-on:click.prevent = "POST" >
Save and upload
</button>
</form>

3> Blog Overview (Display page) request data get
In order to show the blog information, we need to first create a Vue file to implement it
To reference the newly created Vue page in App.vue
Next, implement the content template, script, style in the new Vue page
One thing to note here is that the style is followed by a scope so that the style style works only on the current page
Next we need to traverse the blog information through V-for.
So how do we get the blog information? After data, we split to create a created method and use GET request to data
So where does the data we request should be, we define an array in data to receive it, and then we can call it normally.
<template>
<div class= "Show-face" >
<div class= "Single-face" v-for= "book in Books" >
<p> {{Book.body}} </p>
</div>
</div>
</template>

<script>
Export Default {
Name: ' Show-face ',
Data () {
return {
Books: []
}
},
Created () {
this. $http. Get ("https://jsonplaceholder.typicode.com/posts")
. then (function (data) {
Console.log (Data.body);
This.books = Data.body.slice (0,10);
})
}
}
</script>

<style>
. single-face{
border:1px solid #444;
}
</style>

The point to note here is that if you need to request a local file, the JSON file needs to be placed in static
4.1> custom directives, hook functions
The next thing we're going to talk about is a custom directive.
Custom directives use Format: v-directive name = "Binding.value"
Here Binding.value is not required, depending on whether you need to use it, but it should be noted that this should be a string or []/{} form, we need to use ' to wrap it
So how do we define it?
It's good to declare it in Main.js.
Vue.directive (' instruction name ', {Execution of content})
So does the execution of the content have a corresponding format?
The answer is yes.
Bind (El,binding,vnode) {}
The El here is the element that binds the custom event, and we can control its style directly through the El.style.
The binding here is the property of the custom element, and we can use it through the Binding.value to judge the statement by the IF
Vue.directive (' Rainbow ', {
Bind (El,binding,vnode) {
El.style.color = "#" + math.random (). toString (+). Slice (2,8);
}
})

Vue.directive (' Showface ', {
Bind (El,binding,vnode) {
if (Binding.value = = = "Face") {
Alert ("1");
}else{

}

if (Binding.arg = "show") {
Alert ("2");
}
}
})

4.2> Search box (search for corresponding content)
Next we need to implement the function of the search box,
This will require the use of filters, the API given in the official documentation is Vue.filter

First of all, how to use filters
We need to add one after the value that needs to be filtered | And then add the name of the filter
Just like this.
<p> {book.body | snippet}} </p>
So how do we get the filter?
Need to be declared in Main.js
Vue.filter ("Filter Name", function performed)
Just like this.
Vue.filter ("Snippet", function (value) {
Return Value.slice (0,100) + "...";
})
What is the value here, the element that needs to be filtered
(one point to note is that you can also have a local filter
Only need to define filters:{"filter name" in Data: function (value)}
It can be obvious that this is the form of JSON, so there can be multiple filters.

Next we need a search box input
Since there is an input box, then we define a search to receive the user input, of course, he needs to define in data
Next we implement filtering
after data, split a method to implement like this
Computed: {
Filterbook:function () {
return this.books.filter (book) = {
return book.title.match (thi S.search);
})
}
}
Here the books and book are obviously the information that shows the data is traversed
The function of this method is to get the information entered by the user to match the traversed information, and the match will be displayed
the point to be explained here is that after this method, The previously traversed book in books needs to become book in Filterbook
5.1> route, nav Click Jump Details
Next we need to use the route parameter
First we install it
NPM install Vue-router--save
Of course, references and use in Main.js
are like this
import vuerouter from ' Vue-router '
Vue.use (vuerouter)
Next we can create a route in Main.js
just like this
const router = new Vuerouter ({
routes:routers,
})
Don't worry, routes. The back can be an object and then we pass the path:component to one by one corresponding address and module
But for the sake of the optimization of the code we re-create a routes.js file to do the thing
Of course if you need other files to implement we need to import it in Main.js
like this
import routers from './routes '

And the same we need to expose it in routes.js.
Just like this.
Export default [
{path: "/", component:showface},
{path: "/add", Component:addface},
{path: "/face/:id", Component:singleface},
]
And obviously in the routes.js we can't find the corresponding module
Then we need to introduce it.
Just like this.
Import Addface from './components/addface '
Import Showface from './components/showface '
Import Singleface from './components/singleface '

Export default [
{path: "/", component:showface},
{path: "/add", Component:addface},
{path: "/face/:id", Component:singleface},
]

So the route defines how to use it.
We need to use it under the Main.js app plate.
New Vue ({
El: ' #app ',
Template: ' <App/> ',
Components: {APP},
Router:router
})

We also need to be in the template under App.vue.
<router-view></router-view>
At this point we can manually modify the address to show the different pages, but you will find that when you manually switch the address back automatically add a #, then we define the route with a sentence
Const ROUTER = new Vuerouter ({
Routes:routers,
Mode: "History"
})

Finally, let's optimize it.
Create a new navigation page to achieve click-to-Jump Faceheader.vue
Of course, if we want him and App.vue to generate management, we need to call and use it.
Just like this.
<script>
Import Addface from './components/addface '
Import Showface from './components/showface '
Import Faceheader from './components/faceheader '

Export Default {
Name: ' App ',
Components: {
Addface,
Showface,
Faceheader
}
}
</script>
In the same way, we need to expose it in Faceheader.vue.
Just like this.
<script>
Export Default {
Name: "Face-header"
}
</script>

Next we'll add the navigation in the Faceheader.
Just like this.
<template>
<nav>
<ul>
<li>
<router-link to= "/" exact> blog </router-link>
<router-link to= "/add" exact> Write blog </router-link>
</li>
</ul>
</nav>
</template>
Router-link to can point to the address to be displayed also can be used to set the style
Exact to solve the persistent problem of style

5.2> routing parameters, details page
In Router.js, let's take a look at how to apply
{path: "/face/:id", Component:singleface},
This component is implemented according to the ID of path passed in Singleface
So we don't have this component yet.
It's okay to import it first and then create a file Singleface.vue
and expose it in the Singleface.vue.

Now, let's talk about ideas
We should get the ID value on another page, which is Showface.vue, and show him the corresponding page.
First we need to use the value has ID and need to display the content book, then we define it in data
So how are we going to get the book?
$http. Get (). Then (function (data) {})
To get it.
Get the address in Get and stitch an ID
Data is received in the. Then callback function
Like this
<template>
<div id= "Single-face" >
<article> {{Book.body}} </article>
</div>
</template>

<script>
Export Default {
Name: "Single-face",
Data () {
return{
Id:this. $route. Params.id,
Book: {}
}
},
Created () {
this. $http. Get ("https://jsonplaceholder.typicode.com/posts/" + this.id)
. then (function (data) {
This.book = Data.body;
})
}
}
</script>

<style>

</style>

At this point we have implemented manual modification of address display different pages
Next we need to optimize it
In the Showface.vue
<div class= "Single-face" v-for= "book in Filterbook" >
<router-link v-bind:to= "'/face/' + book.id" >

<p> {book.body | snippet}} </p>
</router-link>
</div>
What needs to be explained here is that
Router-link to= "" is a routing jump
The address of the jump is a string, so the address and ID are stitched together.
V-bind binding if you want to implement a click Jump

6> borrowing firebase to create a database post data to a database
In Firebase
New Project--enter--rule--Change to True (readable, writable)--copy exposed url--replace the post directory in the Add page and create a file "Url/post.json"--Replace the Get directory of the presentation page

The object is passed in instead of the number, so we can't go directly through the for-traversal
Then we'll pass him through the array.
In the show page, under the Created method, first Data.json () and then return out and the data in the. Then callback function. In the callback function, you can iterate over the array
At the same time, the key is also used as a unique identifier at this time we have the data with ID then we store the data in the newly defined empty array and assign the value to books
Created () {
this. $http. Get ("Rm-uf6g20y9v9pnd25c7.mysql.rds.aliyuncs.com/posts.json")
. then (function (data) {
return Data.json ();
})
. then (function (data) {
var booksarray = [];
For (let key in data) {
Data[key].id = key;
Booksarray.push (Data[key]);
}
This.books = Booksarray;
})
},

Now that all the logic has been done, you just need to edit the style to

vuejs--Build a personal blog (study notes)