vue basic grammar learning
I. Relationships among mount points, templates, instances
<div id="root"> <!-- mount point --> <span> {{msg}} </span> </div> <script> new Vue({ el:"#root", template:"<b>{{msg}}</b>", <!-- Template --> data:{ msg:"hello world" } }) </script> <!-- new Vue()The whole is an example. -->
Data, Events, Methods
2.1. Differences between v-text and v-html
v-text inserts text, while v-html inserts content that parses the tags inside.
<b>hello world</b> v-text: directly displays < b > Hello world</b> v-html: will denote a bold hello world
2.2 Click Events
v-on:click = "function name". In the following example, the hello world Click will be changed into hello. The method is written in methods. v-on: can be replaced by @ symbol, which is more concise and can pass special parameter event. This is the original dom object.
<div id="root"> <span v-on:click="sayhello">{{msg}}</span> </div> <script> new Vue({ el:"#root", data:{ msg:"hello world" }, methods:{ sayhello(){ this.msg="hello" } } }) </script>
2.2.1 event modifier
Vue.js provides event modifiers for v-on. As mentioned earlier, modifiers are represented by instruction suffixes at the beginning of a dot.
- When the parent and child nodes are nested, click on the child node, the child node's click event triggers, and the parent node's click event does not trigger.
- Prevention prevent s the execution of the default behavior (if the event can be cancelled, cancel the event without stopping the further propagation of the event)
- Capture is in the opposite direction of event bubbles, and event capture is from outside to inside
- self only triggers events within its own scope, excluding child elements
- Once triggers only once.
- Pasve (not clear)
<! - Prevent click events from spreading - > <a v-on:click.stop="doThis"></a> <! - Submit events no longer overload Pages - > <form v-on:submit.prevent="onSubmit"></form> <! - Modifiers can be concatenated - > <a v-on:click.stop.prevent="doThat"></a> <! - Only modifiers - > <form v-on:submit.prevent></form> <! - Use event capture mode when adding event listeners - > <! -- that is, the event triggered by the element itself is handled here first, and then handled by the internal element - >. <div v-on:click.capture="doThis">...</div> <! - Trigger handler only when event.target is the current element itself <! - that is, events are not triggered from internal elements - > <div v-on:click.self="doThat">...</div>
<div id="root"> <span>{{count}}</span> <button v-on:click="clickCount">Button 1</button> <button v-on:click.once="clickCount">Button 2</button> </div> <script> new Vue({ el: "#root", data: { count:0 }, methods: { clickCount(){ this.count++ } } }) </script>
2.2.2 key modifier
Press enter to trigger events
<div id="root"> <input v-model="count" @keyup.enter="enterCount" /> </div> <script> new Vue({ el: "#root", data: { count:0 }, methods: { enterCount(){ this.count++ } } }) </script>
2.2.3 System Modification Keys
The following modifiers can be used to implement a listener that triggers mouse or keyboard events only when the corresponding key is pressed.
- ctrl corresponds to ctrl
- ALT corresponds to alt
- Shift corresponds to shift
- meta corresponds to logo keys
2.2.4. exact modifier
The. exact modifier allows you to control events triggered by precise combinations of system modifiers.
<! - Even if A lt or Shift is pressed together, it will trigger - >. <button @click.ctrl="onClick">A</button> <! - There is and only triggers when Ctrl is pressed - > <button @click.ctrl.exact="onCtrlClick">A</button> <! - Triggers when no system modifier is pressed - >. <button @click.exact="onClick">A</button>
2.2.5 Mouse modifier
- .left
- .right
- .middle
These modifiers limit the processing function to respond only to specific mouse buttons.
Data binding
3.1 One-way Data Binding
v-bind: Available: instead (abbreviated), in addition to binding title, you can also bind Class,Style, and so on.
<div id="root"> <p v-bind:title="title">Data binding</p><!--binding title--> <p v-bind:id="id">Data binding</p><!--binding id--> <p v-bind:class="vclass">Data binding</p><!--binding class--> <p v-bind:style="styles">Data binding</p><!--binding style--> </div> <script> new Vue({ el: "#root", data: { title: "hello world", id:"id1", vclass:{ class1:"class1", class2:"class2" }, styles:{ color:"yellow", fontSize:"18px" } } }) </script>
The results are as follows:
3.2 Form Input Binding
3.2.1 Text and Multi-line Text
v-model: When input input changes, content in data changes as well.
<div id="root"> <!--input frame--> <input v-model="content" /> <p>{{content}}</p> <!--Multiline text--> <p style="white-space: pre-line;">{{message}}</p> <textarea v-model="message"></textarea> </div> <script> new Vue({ el:"#root", data:{ content:"hello world", message:"" } }) </script>
3.2.2 check box, radio box, selection box
<div id="root"> <!--Radio--> <div> <input type="radio" id="one" value="one" v-model="picked"> <label for="one">one</label> <br /> <input type="radio" id="two" value="two" v-model="picked"> <label for="two">two</label> <br /> <span>{{picked}}</span> </div> <!--check box--> <div> <input type="checkbox" id="Tom" value="Tom" v-model="names" /> <label for="Tom">Tom</label> <br /> <input type="checkbox" id="Jerry" value="Jerry" v-model="names" /> <label for="Jerry">Jerry</label> <br /> <input type="checkbox" id="Jeck" value="Jeck" v-model="names" /> <label for="Jeck">Jeck</label> <br/> <span>{{names}}</span> </div> <!--Selection box--> <div> <select v-model="fruits"> <option disabled value="">Please choose</option> <option value="Banana">Banana</option> <option value="Apple">Apple</option> <option vlaue="Pear">Pear</option> </select> <br /> <span>{{fruits}}</span> </div> </div> <script> new Vue({ el: "#root", data: { picked:"", names: [], fruits:"" } }) </script>
3.3 Value Binding (radio, check, select box)
<div id="root"> <!--Radio--> <div> <input type="radio" id="one" value="one" v-model="picked"> <label for="one">one</label> <br /> <input type="radio" id="two" value="two" v-model="picked"> <label for="two">two</label> </div> <!--check box--> <div> <input type="checkbox" id="Tom" value="Tom" v-model="names" /> <label for="Tom">Tom</label> <br /> <input type="checkbox" id="Jerry" value="Jerry" v-model="names" /> <label for="Jerry">Jerry</label> <br /> <input type="checkbox" id="Jeck" value="Jeck" v-model="names" /> <label for="Jeck">Jeck</label> <br/> <span>{{names}}</span> </div> <!--Selection box--> <div> <select v-model="fruits"> <option disabled value="">Please choose</option> <option value="banana">Banana</option> <option value="appple">Apple</option> <option vlaue="pear">Pear</option> </select> <br /> <span>{{fruits}}</span> </div> </div> <script> var vm = new Vue({ el: "#root", data: { picked:"one", names: ["Tom"], fruits:"" } }) vm.picked="two"; vm.names.push("Jerry") vm.fruits="banana" </script>
3.4 v-model modifier
Synchronization when. lazy triggers change events
number automatically converts to digital type
trim removes the space before and after user input
<div id="root"> <input v-model.lazy="msg" /> <!--Press down enter Key synchronization--> <span>{{msg}}</span> <br/> <input v-model.number="age" type="number"> <!--Converts a value to a numerical type and returns the original value if it cannot be converted--> <br/> <input v-model.trim="message"><!--Remove the space before and after user input--> </div> <script> new Vue({ el: "#root", data: { msg:"", age:"26", message:"" } }) </script>
Computing attributes and listeners
4.1 Computational Attributes
The following example calculates the sum of two numbers
<div id="root"> //Number 1: <input v-model="num1"/> //Number 2: <input v-model="num2"/> //The sum of two numbers: < span > {sum}</span> </div> <script> new Vue({ el:"#root", data:{ num1:'', num2:'', }, computed:{ sum:function(){ if(this.num1 !== "" && this.num2 !== ""){ return parseFloat(this.num1)+parseFloat(this.num2); }else{ return 0; } } } }) </script>
4.2 Monitor
The number of changes (including computational attributes) of attributes can be counted directly.
<div id="root"> //Number 1: <input v-model="num1"/> //Number 2: <input v-model="num2"/> //The sum of two numbers: < span > {sum}</span> //Number of changes: <span>{count}</span> </div> <script> new Vue({ el:"#root", data:{ num1:'', num2:'', count:0 }, computed:{ sum:function(){ if(this.num1 !== "" && this.num2 !== ""){ return parseFloat(this.num1)+parseFloat(this.num2); }else{ return 0; } } }, watch:{ num1:function(){ this.count++ }, num2:function(){ this.count++ }, sum:function(){ this.count++ } } }) </script>
V. v-if,v-show,v-for directives
Differences between 5.1 v-if and v-show
Click on the button to hide the display. Looking at the page, we find that v-if deletes the label directly, while v-show adds a display: none attribute to the label, and the label does not disappear.
<div id="root"> <span v-if="show">hello wrold</span> <button @click="showHello">toggle</button> </div> <script> new Vue({ el:"#root", data:{ show:true }, methods:{ showHello:function(){ this.show=!this.show; } } }) </script>
The results are as follows:
5.2 v-for traversal list
You can get the subscription.
<div id="root"> <ul> <li v-for="(item,index) of list">{{item}}-{{index}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ list:[1,2,3] } }) </script>
5.3 v-for traversal object properties
<div id="root"> <ul> <li v-for="(item,index) of list">{{item}}-{{index}}</li> </ul> <ul> <li v-for="value in Object">{{value}}</li> </ul> </div> <script> new Vue({ el: "#root", data: { list: [1, 2, 3], Object:{ title:"Title", autor:"author", publishedAt: '2016-04-10' } } }) </script>
5.4 Notices for Object Change Detection
Or because of JavaScript limitations, Vue cannot detect the addition or deletion of object attributes:
var vm = new Vue({ data: { a: 1 } }) // ` vm.a` is now responsive vm.b = 2 // ` vm.b` is not responsive
For instances that have been created, Vue does not allow dynamic addition of root-level responsive attributes. However, you can use the Vue.set(object, propertyName, value) method to add responsive attributes to nested objects. For example, for:
var vm = new Vue({ data: { userProfile: { name: 'Anika' } } })
You can add a new age attribute to the nested userProfile object:
Vue.set(vm.userProfile, 'age', 27)
You can also use the vm.$set instance method, which is just an alias for the global Vue.set:
vm.$set(vm.userProfile, 'age', 27)
Filtering and sorting of 5.5 v-for data
Data filtering can be done with computational attributes
<div id="root"> <ul> <li v-for="(item,index) of evenNumbers">{{item}}</li> </ul> </div> <script> new Vue({ el: "#root", data: { list: [1, 2, 3,4,5,6], Object: { title: "Title", autor: "author", publishedAt: '2016-04-10' } }, computed: { evenNumbers: function() { return this.list.filter(function(number) { return number % 2 === 0 }) } } }) </script>
5.6 v-if and v-else
<div id="root"> <div v-if="show"> Now you see me </div> <div v-else> Now you don't </div> </div> <script> new Vue({ el:"#root", data:{ show:true, } }) </script>
Components of vue
VI. Description of Components
data in a component must be a function.
Each component must have only one root element.
Components cannot be inserted into ul or tr, which can be solved by combining vue's is= "component name"
7. Listening for Subcomponent Events
The child component passes a value to the parent component, which receives the value through the parameters of the function.
<div id="root"> <p>count:{{count}}</p> <Item @add-count="setCount" :count="count">add</Item> </div> <script> Vue.component("Item",{ props:["count"], template:"<button @click='setNum'>Set up count value</button>", methods:{ setNum (){ this.$emit("add-count",5) //Event names must be lowercase } } }) new Vue({ el: "#root", data: { count:0 }, methods:{ setCount (data){ this.count+=data } } }) </script>
8. Simple Development of Todolist
In the following example, each click of a button adds an input to the list.
<div id="root"> <input v-model="inputValue"/> <button @click="addItem">add</button> <ul> <li v-for="(item,index) of list" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el:"#root", data:{ inputValue:"", list:[] }, methods:{ addItem:function(){ this.list.push(this.inputValue) } } }) </script>
9. Component Splitting of Todolist
9.1 Local Components
Accept parameters with props
<div id="root"> <input v-model="inputValue"/> <button @click="addItem">add</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item> </ul> </div> <script> var todoItem = { props:["content"], template:"<li>{{content}}</li>" } new Vue({ el:"#root", components:{ "todo-item":todoItem }, data:{ inputValue:"", list:[] }, methods:{ addItem:function(){ this.list.push(this.inputValue); this.inputValue=""; } } }) </script>
9.2 Global Components
<div id="root"> <input v-model="inputValue"/> <button @click="addItem">add</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item">{{item}}</todo-item> </ul> </div> <script> Vue.component("todo-item",{ props:["content"], template:"<li>{{content}}</li>" }) new Vue({ el:"#root", data:{ inputValue:"", list:[] }, methods:{ addItem:function(){ this.list.push(this.inputValue); this.inputValue=""; } } }) </script>
X. The relationship between components and instances
Components are reusable instances, so they accept the same options as new Vue(), data, computed, watch, methods, lifecycle hooks, and so on. If the template in the instance is not defined, the default is that everything under the mount point is a template.
11. Delete function of Todolist
<div id="root"> <input v-model="inputValue"/> <button @click="addItem">add</button> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete="deleteItem">{{item}}</todo-item> </ul> </div> <script> /*Global component*/ Vue.component("todo-item",{ props:["content","index"],//Acceptance parameter template:"<li @click='deleteItem'>{{content}}</li>", methods:{ deleteItem:function(){ this.$emit("delete",this.index) //Publish delete events to parent components, passing current subscript values } } }) new Vue({ el:"#root", data:{ inputValue:"", list:[] }, methods:{ addItem:function(){ this.list.push(this.inputValue); this.inputValue=""; }, deleteItem:function(index){ this.list.splice(index,1)//Delete the data in the list } } }) </script>
Installation and use of vue-cli
Installation of vue-cli
12.1 Install Node.js
12.2 Install vue-cli
- g represents global installation
npm intatll -g @vue/cli
12.3 Create Projects
vue init webpack project name
12.4 Enter the project and run the local project
cd entry name npm run dev
12.5 Generate online directories
npm run build
XIII. Project Structure
Complete parent-child component value transfer
- The child component creates an attribute in props to receive the value passed by the parent component
- Register child components in parent components
- Add attributes created in props of subcomponents to subcomponent Tags
- Assign the value that needs to be passed to the child component to the property
Sub components:
<template> <div> <h1>Subcomponent part</h1> <p>Content passed from parent component:{{inputValue}}</p> <button @click="sendToParent">Pass values to parent components</button> </div> </template> <script> export default{ props:["inputValue"], methods:{ sendToParent (){ this.$emit("showMessage","this is the children's message") } } } </script> <style> </style>
Parent component:
<template> <div id="app"> <input v-model="inputValue" /> <children :inputValue="inputValue"></children> <children @showMessage = "getMessage"></children> </div> </template> <script> import Children from "@/components/Children.vue" export default { name: 'Parent', components:{ Children }, data (){ return{ inputValue:"" } }, methods:{ getMessage (data){ console.log(data) } } } </script> <style> </style>