Data Data object

The data used in VUE is defined in Data
Complex data types can be written to data
Render complex data types, just follow the JS syntax

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id=app> {{message}} <h1 >{{school}}</h1> <h2>{{school.name}}</h2> <ul> <li>{{info[0]}}</li> <li>{{info[1]}}</li> <li>{{info[2]}}</li> <li>{{info[3]}}</li> </ul> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > var app = new Vue({ el: '#app', data: { message: 'Hello Vue! 'and school: {name: "Harbin commercial university", the age: "68"}, info: [" little characters ", "little wisdom", "Nathan", "hui, taking"]}}) < / script > < / body > < / HTML >Copy the code

Local application

Content binding, event binding

v-text

The V-text directive sets the contents of the label
The default is to replace everything, but you can use the difference expression {{}} to replace something specified

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercise </title> </head> <body> <div id="app"> <h1 v-text="message+'! '"></h1> <h1>{{info+'! '}}</h1> <h1> }}</h1> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app=new Vue({el:"#app", data:{message:"v-text ", info:" this is a message ") </script> </body> </ HTML >Copy the code

v-html

The V-HTML directive sets the innerHTML of an element
There are Html structures in the content that are parsed into tags
A V-text instruction, whatever the content is, will only be parsed to text, okay

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercise </title> </head> <body> <div id="app"> <h1 v-html="context"></h1> <h1 v-text="context"></h1> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app=new Vue({el:"#app", data:{//context:" context:" You don't know </a>"}}) </script> </body> </ HTML >Copy the code

V – on the foundation

The V-ON directive binds events to elements
The event name is not written on
The instruction can be shortened to @
The bound methods are defined in the methods property
The data defined in data is accessed internally by the this keyword

<! < HTML > <head> <meta charset=" UTF-8 "/> <title>vue </title> </head> <body> <div id="app"> <button </button> <button type="button" value=" doIt" @click="doIt"> V - on command < / button > < h1 @ click = "changeData" > {{message}} < / h1 > < / div > <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app=new Vue({el:"#app", data:{message:" #app"}, methods:{doIt:function(){alert(" #app"); }, changeData:function(){ //console.log(this.message); This. message+=" Yum!" ; } }, }) </script> </body> </html>Copy the code

** Case exercise - timer **

El (mount point), data(data), methods(methods) when creating the Vue sample
The V-ON directive is used to suspend the event, or @
Method to retrieve data from data using the this keyword
The v-text directive sets the text value of an element, {{}} for short
The V-HTML directive sets the innerHTML of an element

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue practice</title>
	</head>
	<body>
		<div id="app">
  <button v-on:click="sub">-</button>
  <span>
  	
  	{{num}}
  </span>
  <button v-on:click="add">+</button>

</div>
		
<! -- Development environment version, including helpful command line warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
	var app=new Vue({
		el:"#app".data: {num:1
		},
		methods: {add:function(){
				if(this.num<10) {this.num++
				}else{
					alert("Don't, it's the biggest!")}},sub:function(){
				if(this.num>1) {this.num--
				}else{
					alert("Stop it, after all!")}}}})</script>
	</body>
</html>

Copy the code

Display switching, property binding

v-show

The V-show command toggles the display and hide of elements depending on whether the values expressed are true or false
The principle is to modify the element’s diaplay to achieve show and hide
Everything that follows the instruction is eventually parsed to a Boolean value
Elements with a value of TRUE are displayed and elements with a value of false are hidden
When the data is changed, the display state of the corresponding element is updated synchronously

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercises </title> </head> <body> <div id="app"> <! <button @click="changeAge"> <button @click="changeIsShow"> </button> --<img v-show="age>=18" src="img/apple.png"/ aalt="">--> <img v-show="isShow" src="img/apple.png"/ alt=""> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > var app=new Vue({ el:"#app", data:{ isShow:"false", age:17 }, methods:{ changeIsShow:function(){ this.isShow=! this.isShow; }, changeAge:function(){ this.age++; } } }) </script> </body> </html>Copy the code

v-if

The V-if directive switches the display state of an element depending on whether the value expressed is true or false
The essence is to switch display states by manipulating DOM elements
The expression has the value true, the element exists in the DOM tree, false, and is removed from the DOM tree
V-show is used for frequent switching, whereas V-if is used for frequent switching, which consumes less switching

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercise </title> </head> <body> <div id="app"> <p V-if ="isShow">v-if exercises </p> < button@click ="changeIsShow"> </button> <p v-if="temperature>=20"> V-if exercises </p> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > var app=new Vue({ el:"#app", data:{ isShow:false, temperature:10 }, methods:{ changeIsShow:function(){ this.isShow=! this.isShow; }, changeAge:function(){ this.age++; } } }) </script> </body> </html>Copy the code

v-bind

V-bind is used to bind attributes to elements
The full version is:V - bind: attribute names
The shorthand can omit v-bind, leaving only the attribute name
Classes need to be dynamically added and deleted. Object mode is recommended

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercise </title> <style type="text/ CSS ">. Active {border: 1px solid red; } </style> </head> <body> <div id="app"> <img v-bind:src="imgSrc" /> <img v-bind:src="imgSrc" v-bind:title="imgTitle" />  <img v-bind:src="imgSrc" v-bind:title="imgTitle" v-bind:class="isActive? 'active':''" @click="changeIsActive"/> <img v-bind:src="imgSrc" v-bind:title="imgTitle" v-bind:class="{active:isActive}"  @click="changeIsActive"/> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > ImgSrc :"img/apple. PNG ", imgTitle:" isActive:false ",}, methods:{ changeIsActive:function(){ this.isActive=! this.isActive; }, } }) </script> </body> </html>Copy the code

** Case exercises -- Picture switching **

List data is stored in arrays
The V-bind directive sets the attributes of an element, such as SRC
V-show \ V-if can switch the display state of elements, frequently switch to use V-show

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercises </title> </head> <body> <div id="app"> <! - image - > < img v - bind: SRC = "imgArr [index]" / > < div > <! <a @click="prev"> <button V-show ="index! =0"> < </button> </a> <! - right arrow -- > < a @ click = "next >" < button v - show = "index < imgArr. Length - 1" > > < / button > < / a > < / div > < / div > <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app=new Vue({el:"#app", data:{imgArr:["img/ image 03.png", "img/ image 03.png", "img/ image 03.png", "img/ image 03.png", "img/ image 03.png", "img/ image 04.png", "Img/image toggle 05.png", "img/ image toggle 10.png", "img/ image toggle 10.png", "img/ image toggle 10.png", "img/ image toggle 10.png", "img/ image toggle 10.png", "img/ image toggle 10.png", "img/ image toggle 10.png", "img/ image toggle 10.png", }, methods:{ prev:function(){ this.index-=1; }, next:function(){ this.index+=1; }, } }) </script> </body> </html>Copy the code

List loop, form element binding

v-for

The V-for directive is used to generate a list structure from the data
Arrays are often used in conjunction with V-for
Grammatical structure:(item, index) in the data
Item and index can be used in conjunction with other instructions
The array length updates are synchronized to the page and are responsive

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercises </title> </head> <body> <div id="app"> <ul> <li V -for="item in arr"> like: </li> <ul> <ul> <li v-for="(it,index) in arr"> {{index+1}} {{it}} </li> </ul> < button@click ="addOrder"> </button> <h2 v-for="food in  order">{{food.name}}</h2> </div> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app = new Vue ({el: "# app," data: {arr: [" Beijing ", "Shanghai", "hangzhou", "sichuan"], order: [{name: "tomato scrambled eggs"}, {name: "fry tomato egg"}]}. Methods :{addOrder:function(){this.order.push()}, removeOrder:function(){this.order.shift()}, } }) </script> </body> </html>Copy the code

V – added on

The method of the event binding is written as a function call, and custom parameters can be passed in
When you define a method, you need to define parameters to receive incoming parameters
Follow the eventsThe modifierYou can limit events
.enterThe event can limit the key that fires to carriage return
Event modifiers are available in the following documentation: cn.vuejs.org/v2/api/#v-o…

<! < HTML > <head> <meta charset=" UTF-8 "/> <title>vue </title> </head> <body> <div id="app"> <button </button> <button type="button" value=" v-ON "value="v-on" @click="doIt "(' hello ',' did you eat? ') "> v - on the instruction < / button > < input type =" text "@ keyup. Enter =" sayHi "/ > < / div > <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app=new Vue({el:"#app", data:{message:" #app"}, methods:{doIt:function(p1,p2){alert(" #app"); console.log(p1); Console. log(p2)}, sayHi:function(){alert(" Eat? ) } }, }) </script> </body> </html>Copy the code

v-model

The V-model directive makes it easy to set and get form element values
The bound data is associated with the form element value
Either the bound data or the value of the form element changes as the other changes, and the changes work both ways

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercise </title> </head> <body> <div id="app"> <input Type ="text" v-model="message" @keyup.enter="getMessage"/> <button type="button" value="v-model" V-on :click="setMessage"> v-model </button> <button type="button" value=" v-model" @ click = "getMessage" > v - model instruction < / button > < h2 > {{message}} < / h2 > < / div > <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app=new Vue({el:"#app", data:{message:" at least you "}, methods:{setMessage:function(){this.message=" half-moon "}, getMessage:function(){ alert(this.message) } }, }) </script> </body> </html>Copy the code

Practice plan - Notepad

Functional analysis
- new
  - Generate list structure V-for (array)
  - Get user input v-model
  - Press Enter to add a new item of data to the array v-on.Enter
- delete
  - Click delete (V-on Splice index)
  - If the data changes, then the elements bound to the data change synchronously
  - Events can accept custom parameters
  - splice(param1,param2)
    - Param1: Array index (variable)
    - Param2: Deletes several parameters at a time
- statistical
  - Count the number of tasks (V-text length)
  - Data-based development
- empty
  - Click to clear all information (V-on-click clears array)
- hidden
  - Hide empty button and statistics text when there is no data (V-show/V-if array is not empty)
  - It can be set on the parent element or on the child element

<! DOCTYPE HTML > < HTML > <head> <meta charset=" UTF-8 "/> <title>vue exercise </title> </head> <body> <section ID ="app"> <heade Class ="header"> <h1> Notepad </h1> <input V-model ="inputValue" @keyup.enter="add" type="text" autocomplete="off" Placeholder =" please input task "class="new-todo"/> </header> <section class="main"> <ul class="to-do-list"> <li class=todo v-for="(it,index) in list"> <div class="view"> <span class="index">{{index+1}}</span> <label Class = "context" > {{it}} < / label > < button class = "destory" @ click = "remove (index)" > x < / button > < / div > < / li > < / ul > < section > <footer class="footer"> <span v-if="list.length! =0"> <strong>{{list.length}}</strong> "items" </span> <button @click="clear" v-show="list.length! =0">clear</button> </footer> </section> <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > Var app = new Vue ({el: "# app," data: {list: [" eat rice ", "slept", "code"], inputValue: "good good study, }, methods:{add:function(){this.list.push(this.inputValue); }, remove:function(index){ this.list.splice(index,1); }, clear:function(){ this.list=[]; } }, }) </script> </body> </html>Copy the code

Network applications

Vue combined with network data development and application

Use of axios Network request library

Axios website:https://github.com/axios/axios
Axios must be imported before it can be used

<! - the website provide axios online address -- -- > < script SRC = "https://unpkg.com/axios/dist/axios.min.js" > < / script >Copy the code

The corresponding request can be sent using the GET or POST methods
The callback function in the THEN method fires on corresponding success or failure
The parameters of the callback function can be used to obtain the corresponding content or error message

<! DOCTYPE HTML >< HTML >< head> <meta charset="UTF-8"> <title></title> </head> <body> <input value="get request "class="get" Type ="button"></input> <input value="post request "class="post" type="button"></input> <! - the website provide axios online address -- -- > < script SRC = "https://unpkg.com/axios/dist/axios.min.js" > < / script > < script type = "text/javascript" > / * interface 1: random jokes Request address: https://autumnfish.cn/api/joke/list request method: get request parameters: the num (joke article number, digital) response content: Random jokes * / document. QuerySelector (" get "). The onclick = function () {axios. Get (" https://autumnfish.cn/api/joke/list?num=3 ") .then(function (response){ console.log(response); },function (err){ console.log(err); })} / interface 1: * * * * request address registered users: https://autumnfish.cn/api/user/reg * request method: post * request parameters: username (user name, string) * response content: Registered success or failure. * / document querySelector (" post "). The onclick = function () {axios. Post (" https://autumnfish.cn/api/user/reg ", }). Then (function(response){console.log(response); },function(err){ console.log(err); } ) } </script> </body> </html>Copy the code

Axios is used in combination with Vue

The vue and AXIos packages are imported in any order
The this in the AXIos callback has changed and cannot access the data in data
Save this and use it directly in the callback function

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <input Value = "get request random access to a joke" class = "get" type = "button" @ click = "getJoke" > < p > {{joke}} < / p > < / input > < / div > <! - the website provide axios online address -- -- > < script SRC = "https://unpkg.com/axios/dist/axios.min.js" > < / script > <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > / * Interface 1: random jokes Request address: https://autumnfish.cn/api/joke request method: get request parameters: no response content: */ var app=new Vue({el:"#app", data:{joke:" #app"}, methods:{joke: function(){var that=this; axios.get("https://autumnfish.cn/api/joke") .then(function(response){ that.joke=response.data; },function(err){ } ) } } }) </script> </body> </html>Copy the code

The application of VUE combined with network data

Weather forecast list

Functional analysis
- Enter a query
  - Press the Enter key (V-on.Enter)
  - Query data (AXIOS interface, V-Model)
  - Render data (V-for array that)
- Click on the query
  - Click on the city
  - Query data
  - Render data
- conclusion
  - Customizing parameters makes code more reusable
  - Within a method defined in methods, other methods can be identified using the this keyword

<! DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <div id="logo"> <h1><mark> Weather </mark></h1> <div >< div id="select"> <input V-model ="city" type="text" name="citys" id="cityName" Placeholder =" please input the city "@keydown. Enter ="getData" /> <button value=" search" @click.enter="getData"> </button> </div> <div <a href="javascript:" @click="changeCity(' Beijing ')"> @ click = "changeCity (' Shanghai ')" > Shanghai < / a > < a href = "javascript:" @ click = "changeCity (' guangzhou ')" > guangzhou < / a > < a href = "javascript:" @ click = "changeCity (' yunnan ')" > yunnan < / a > < / div > < div id = "display" > < ul > < li v - for = "item in the list" > <div><b>{{item.type}}</b></div> <div > <b>{{item.low}}</b> <b>{{item.high}}</b> </div> <div> {{item.date}} </div> </li> </ul> </div> </div> <! - the website provide axios online address -- -- > < script SRC = "https://unpkg.com/axios/dist/axios.min.js" > < / script > <! -- Development environment version, Contains the help command line warning -- > < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script > < script type = "text/javascript" > / * Interface: 1, the weather interface Request address: http://wthrcdn.etouch.cn/weather_mini request method: get request parameters: the city (city name) of the query response content: */ var app=new Vue({el:"#app", data:{city:"", list:[]}, methods:{getData:function(){var that=this; axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city) .then(function(response){ console.log(response.data.data); that.list=response.data.data.forecast },function(err){ } ) }, changeCity:function(city){ this.city=city; this.getData(); } } }) </script> </body> </html>Copy the code

Exercise - Integrated application - Music player

Functional analysis
- Song search
- The songs
- Song cover
- Song reviews
- The animation
- Video playback

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue basis

Data Data object

Local application

Content binding, event binding

v-text

v-html

V – on the foundation

Display switching, property binding

v-show

v-if

v-bind

List loop, form element binding

v-for

V – added on

v-model

Network applications

Vue combined with network data development and application

Use of axios Network request library

Axios is used in combination with Vue

The application of VUE combined with network data

Vue basis

Data Data object

Local application

Content binding, event binding

v-text

v-html

V – on the foundation

Display switching, property binding

v-show

v-if

v-bind

List loop, form element binding

v-for

V – added on

v-model

Network applications

Vue combined with network data development and application

Use of axios Network request library

Axios is used in combination with Vue

The application of VUE combined with network data

Related Posts

Top 20 Tools for Successful DevOps

Use of numpy matrices

My List of Mac apps