This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

1. Why use Vue

  • Services become more complex and more operations are performed in the front.
  • progressive
  • You don’t need to manipulate the DOM
  • Two-way binding
  • Easy environment construction
  • Component development
  • The community is active

2. Vue entrance

Main.js is the main entry

import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* Eslint-disable no-new */ new Vue({el: '#app', router, components: {app}, // specify app.vue template: '< app />'})Copy the code

3. Basic instructions

1. {{}} and v – HTML

For printing and output.

<template> <div> <! <p>{{1+1>1? 'is' :' no '}} < / p > {{MSG}} < div v - HTML = "MSG" > < / div > < / div > < / template > < script > export default {name: 'the HelloWorld, el: '# app' data () {return {MSG: '< h1 > < / h1 >' I'm a news}}} < / script >Copy the code

2.v-bind

V-bind is used to bind data and element attributes.

<template> <div v-bind:class = "active" v-bind:id=id> {{msg}} </div> </template> <script> export default { name: 'the HelloWorld, el:' # app 'data () {return {MSG:' < h1 > < / h1 > 'I'm a news, active: "active", id: 19}}} < / script >Copy the code

3. The class and style

Class binding mode.

<template> <div> <p v-bind:class="{ active: isActive }" v-bind:id=id>aaa</p> <p v-bind:class="{ active: 10>1? true:false,test:true }" >bbb</p> <p v-bind:class='[msg]' >ccc</p> <p v-bind:class="[{active :0 > 1},'test']" >ddd</p> <ul> <li v-bind:class ="[{active :index/2==0},'test']" v-for = "(item,index) in names"> {{item.name}} </li> </ul> <p v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }">eee</p> </div> </template> <script> export default { name: 'HelloWorld', el: '# app' data () {return {MSG: '< h1 > < / h1 >' I'm a news, isActive: false names: [{name: "aaa"}, {name: "BBB"}, {name: "CCC"}]. activeColor: 'red', fontSize: 30 } } } </script>Copy the code

4. Observe method and computed

Difference between method and computed:

We can define the same function as a method rather than a computed property. The end result is exactly the same either way. However, the difference is that computed attributes are cached based on their responsive dependencies. They are only reevaluated if the relevant responsive dependencies change. This means that as long as MSG has not changed, multiple calls to the showMessage evaluation property will immediately return the previous evaluation without having to execute the function again.

Function execution takes the value of message in the data property as an argument.

If you use methods to execute the function, vue will execute the function again every time, regardless of whether the MSG value has changed.

● With computed, the function is executed only when the original data, MSG, changes. (Dependent – Monitoring data changes)

<template> <div id="example"> {{ msg.split('').reverse().join('') }} {{ showMessage}} </div> </template> <script> export Default {name: 'HelloWorld', el: '#app', data () {return {MSG :' I am a message '}}, computed: { showMessage(){ return this.msg.split('').reverse().join('') } } } </script>Copy the code

5. Conditional rendering

V-if, V-else as the name suggests, to determine whether it can be displayed.

<template> <div > <p v-if="sign">1111</p> <p v-else>2222</p> </div> </template> <script> export default { name: 'HelloWorld', el: '#app', data () {return {sign:true, MSG :'<h1> I am </h1>', active:"active", id:19}}} </script>Copy the code
  • V-if: Elements are deleted or created again each time, with high switching performance consumption;
  • V-show: Display: None style for each element switch, with a high initial render cost.
  • V-show is compiled only once and controls the CSS, while V-if destroys and creates all the time, so v-show is better.
<template> <div > <p v-show="sign">1111</p> </div> </template> <script> export default { name: 'HelloWorld', el: '# app' data () {return {sign: true, MSG: '< h1 > < / h1 >' I'm a news, active: "active", id: 19}}} < / script >Copy the code

6. Output the list

V-for is used for circular lists.

<template> <div > <ul> <li v-bind:key ="index" v-for = "(item,key,index) in names"> {{item.age}}-{{item.name}}-{{index}}||{{item}}||{{key}} </li> </ul> </div> </template> <script> export default { name: 'HelloWorld', el: '# app' data () {return {sign: true, MSG: '< h1 > < / h1 >' I'm a news, names: [{name: "aaa", the age: 19, sex: "1"}, {name: "BBB," age: 20. sex:"1" },{ name:"ccc", age:21, sex:"1" }] } } } </script>Copy the code

7. Array update

Note: Filter (), concat(), and slice() do not update.

<template> <div > <ul> <li v-bind:key ="index" v-for = "item in names"> {{item.name}} </li> </ul> <button v-on:click = "Clickbutton" name = "button" type = "button"> button </button> </div> </template> 'HelloWorld', el: '# app' data () {return {sign: true, MSG: '< h1 > < / h1 >' I'm a news, names: [{name: "aaa"}, {name: "BBB"}, {name: "CCC"}]}}, methods: { clickbutton(event){ this.names.push({name:"ddd"}) } }, } </script>Copy the code

8. Event handling

V-on: the xx function is executed when the xx action is performed.

<template> <div> <button v-on:click = "count +=1" type = "button" name = "button"> <p>{{count}}</p> <button V-on :click = "clickhandle" type = "button" name = "button"> 2</button> <p>{{demoshow}}</p> <button v-on:click = "Chance" type = "button" name = "button"> </button> <button v-on:click.once = "senddate(' hello ',$event)" type = "button" </div> </template> <script> export default {name: 'HelloWorld', EL: '#app', data () {return {count:1, demoshow:" "}}, methods: {clickHandle (event){console.log(" trigger ")}, chance(event){this.demoshow = "I'm not a handsome guy"}, senddate(data,event){ console.log(data,event) } } } </script>Copy the code

9. Event decorating

<! Continue to spread, stop the click event - - > < v - on a: click. Stop = "doThis" > < / a > <! <form v-on:submit. Prevent ="onSubmit"></form> <! - the modifier can series - > < v - on a: click. Stop. Prevent = "doThat" > < / a > <! <form v-on:submit. Prevent ></form> <! -- Use event capture mode when adding event listeners --> <! <div v-on:click.capture="doThis"> <div v-on:click.capture="doThis"> </div> <! -- Triggers handlers only if the event.target is the current element itself --> <! <div v-on:click. Self ="doThat">... </div>Copy the code

10. Keyboard events

<template> <div> <input v-on:keyup.enter = "showlog" name = "button"> </button> </div> </template> <script> export default { name: 'HelloWorld', el: '#app', data () { return { count:1 } }, methods: { showlog(event){ console.log(event) } } } </script>Copy the code

Operation introduction of other keyboards:

Delete (capture "Delete" and "backspace" keys).Esc.space.up.down.left.right.Ctrl.alt.shift.meta, etc. Please refer to the documentationCopy the code

11. Form input

Two-way data binding instruction lazy, number, trim.

<template> <div> <input v-model.lazy="message" placeholder="edit me"> <p>Message is: {{message}}</p> <button v-on:click = "getMsg" type = "button" name = "button"> </div> </template> <script> Export default {name: 'HelloWorld', el: '#app', data () {return {message:" this is a message "}}, methods: { getMsg(event){ console.log(this.message) } } } </script>Copy the code
Lazy By default, v-Model synchronizes the value of the input box with the data after each input event (except when the text is combined with the input method above). You can convert this to using the change event by adding the lazy modifier: <! -> <input v-model.lazy=" MSG ">. -> <input v-model.lazy=" MSG" >. <input v-model.number="age" type="number"> This is often useful because the value of the HTML input element is always returned as a string, even when type="number". If the value cannot be resolved by parseFloat(), the original value is returned. <input v-model. Trim =" MSG "> <input v-model.Copy the code