vue Foundation

First vue program

1. Import the development version of vue.js < script SRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" > < / script >
2. Create vue instance object, set el property and data property
3. Using simple template syntax to render data to the page

el mount point

1. What is the scope of vue? The vue manages the el option hit elements and their internal descendants
2. Can I use another selector? Yes, but ID selector is recommended
3. Can other dom elements be set? Other double tags can be used instead of HTML and body
4. What is the role of el? The element used to set the mount (Management) of the vue instance

Data: data object

1. The data used by vue is defined in data
2. Data can write data of complex type (such as object, tuple)
3. When rendering complex type data, just follow JS syntax (such as: object point syntax, array index syntax)

vue local application

v-text directive

1. vue instruction refers to special syntax starting with v -
2. The v-text instruction is used to set the content of the label (textnote)
3. The default writing method will replace the whole content. You can use the difference expression {}} to replace the specified content
4. Internal support for writing expressions
5. Code example

   <div id="app">
   	<h2 v-text="message+'!'"></h2>
   	<h2 v-text="info"></h2>
   	<h2>{{message+'!'}}</h2>
   </div>
   
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			message:"Black horse programmer",
   			info:"Front end"
   		},
   	})
   </script>
   

v-html directive

1. The function of the v-html instruction is to set the innerHTML of the element
2. HTML structure in content will be parsed into Tags
3. The v-text instruction, whatever the content is, will only resolve to text
4. Code example

   <div id="app">
   	<h2 v-text="content"></h2>
   	<h2 v-html="content"></h2>
   </div>
   
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			content:"<a href='http://Www.itheima. Com '> black horse programmer < / a >“
   		},
   	})
   </script>
   

v-on directive

1. The v-on instruction is used to bind events for elements
2. Event name does not need to be on
3. Instructions can be abbreviated to@
4. The bound method is defined in the methods attribute
5. Code example

   <div id="app">
   	<input type="button" value="v-on instructions" v-on:click="doIt">
   	<input type="button" value="v-on Abbreviation" @click="doIt">
   	<h2 @click="changeFood">{{food}}</h2>
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			food:"Broccoli"
   		},
   		methods:{
   			doIt:function(){
   				alert('doit');
   			},
   			changeFood:function(){
   				console.log(this.food);
   				this.food+="It's so delicious."
   			}
   		},
   	})
   </script>
   

Counter

1. thinking

   1. data: for example, num
   2. Add two methods to methods, such as add and sub
   3. Use v-text to set num to span tag
   4. Use v-on to bind add and sub to +, - buttons respectively
   5. Logic of accumulation: less than 10 accumulation, otherwise prompt
   6. Decrement logic: greater than 0 decrement, otherwise prompt
   7. Code example

   <div id="app">
   	<div class="input-num">
   		<button type="button" @click="sub">-</button>
   		<span>{ { num } }</span>
   		<button type="button" @click="add">+</button>
   	</div>
   </div>
   <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 order the biggest")
   				}
   			},
   			sub:function(){
   				if(this.num>0){
   					this.num--;
   				}else{
   					alert("Don't order the least")
   				}
   			}
   		},
   	})
   </script>
   

2. When creating a vue example: El (mount point), data (data), methods (Methods)

3. The function of the v-on instruction is to bind events, which is abbreviated as@

4. Get data in data through this keyword in method

5. The v-text instruction sets the text value of an element, which is abbreviated as {}}

v-show directive

1. The function of the v-show instruction is to switch the display status of an element according to its true or false status
2. The principle is to modify the display of elements to realize display hiding
3. The content after the instruction will eventually resolve to a Boolean value
4. Value is true element display, value is false element hide
5. After the data changes, the display status of corresponding elements will be updated synchronously
6. Code example

   <div id="app">
   	<input type="button" value="Toggle display status" @click="changeIsShow"/>
   	<input type="button" value="Cumulative age" @click="addAge"/>
   	<img src="img/logo.png" v-show="isShow">
   	<img src="img/logo.png" v-show="age>=18">
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			isShow:false,
   			age:17
   		},
   		methods:{
   			changeIsShow:function(){
   				this.isShow = !this.isShow
   			},
   			addAge:function(){
   				this.age++;
   			}
   		},
   	})
   </script>
   

v-if directive

1. The function of the v-if instruction is to switch the display status of elements according to the true or false expression
2. The essence is to switch the display state by manipulating dom elements
3. The value of the expression is true, the element exists in the dom tree, is false, and is removed from the dom tree
4. v-show is used for frequent switching, while v-if is used for the former, which consumes less switching cost
5. Code example

   <div id="app">
   	<input type="button" value="Toggle display" @click="toggleIsShow"/>
   	<p v-if="isShow">Black horse programmer</p>
   	<p v-show="isShow">Dark horse programmer show</p>
   	<h2 v-if="temperature>=35">Too hot</h2>
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			isShow:false,
   			temperature:40
   		},
   		methods:{
   			toggleIsShow:function(){
   				this.isShow = !this.isShow;
   			}
   		},
   	})
   </script>
   

v-bind directive

1. The v-bind instruction is used to bind attributes to elements
2. The full write method is v-bind: attribute name
3. In short, you can directly omit v-bind and only keep: attribute name
4. It needs to add and delete class dynamically. It is suggested to use the object method
5. Code example

   <style type="text/css">
   	.active{
   		border: 1px solid red;
   	}
   </style>
   <div id="app">
   	<img v-bind:src="imgSrc">
   	<br>
   	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive">
   	<br>
   	<img :src="imgSrc" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive">
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			imgSrc:"http://www.itheima.com/images/logo.png",
   			imgTitle:"Black horse programmer",
   			isActive:false
   		},
   		methods:{
   			toggleActive:function(){
   				this.isActive=!this.isActive;
   			}
   		},
   	})
   </script>
   

Picture switching

1. Define image array
2. Add picture index
3. v-bind binding src attribute
4. v-on picture switching logic
5. v-show display status switch

v-for directive

1. The function of the v-for instruction is to generate a list structure based on data
2. Arrays are often used in conjunction with v-for
3. The syntax is (item,index) in data
4. item and index can be used together with other instructions
5. The update of array length will be synchronized to the page, which is responsive
6. Code example

   <div id="app">
   	<input type="button" value="Add data" @click="add"/>
   	<input type="button" value="Remove data" @click="remove"/>
   	<ul>
   		<li v-for="(item,index) in arr">{ { index+1 } }Dark horse:{ { item } }</li>
   	</ul>
   	<h2 v-for="item in vegetabes" v-bind:title="item.name">
   		{ { item.name } }
   	</h2>
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			arr:['Beijing','Shanghai','Guangzhou','Shenzhen'],
   			vegetabes:[
   				{name:"Broccoli"},
   				{name:"Scrambled eggs"}
   			]
   		},
   		methods:{
   			add:function(){
   				this.vegetabes.push({name:"Cauliflower"});
   			},
   			remove:function(){
   				this.vegetabes.shift();
   			}
   		},
   	})
   </script>
   

v-on supplement

1. Event bound methods are written in the form of function calls, which can be passed in custom parameters
2. When defining a method, you need to define parameters to receive the incoming arguments
3. Events are followed by. Modifiers can restrict events
4. . enter can limit the trigger key to enter
5. There are many event modifiers
6. Code example

   <div id="app">
   	<input type="button" value="click" @click="doIt(666,'Buddy')"/>
   	<input type="text" @keyup.enter="sayHi"/>
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		methods:{
   			doIt:function(p1,p2){
   				console.log("doit");
   				console.log(p1);
   				console.log(p2);
   			},
   			sayHi:function(){
   				alert("Did you have your meal?");
   			}
   		},
   	})
   </script>
   

v-model instruction

1. The function of the v-model instruction is to set and get the values of form elements conveniently
2. Bound data is associated with form element values
3. Bound data - the value of the form element
4. Code example

   <div id="app">
   	<input type="button" value="modify message" @click="setM" />
   	<input type="text" v-model="message" @keyup.enter="getM"/>
   	<h2>{ { message } }</h2>
   </div>
   <script type="text/javascript">
   	var app = new Vue({
   		el:"#app",
   		data:{
   			message:"Dark horse"
   		},
   		methods:{
   			getM:function(){
   				alert(this.message);
   			},
   			setM:function(){
   				this.message="Cool fish"
   			}
   		},
   	})
   </script>
   

axios use

Conditions of use

1. Import < script SRC = "https://unpkg.com/axios/dist/axios.min.js" > < script > to send the request

Two requests

1. get method

   • Syntax format: axios.get("address? Key = value & key2 = Value2"). Then (function (response) {}, function (ERR) {})
   • then there are two callback functions. The first is triggered after the request to the server is completed, and the second is triggered when the request fails. Their parameters can get the response content or error information of the server
   • The format of the query string is key = value & key2 = Value2. The key is provided by the interface document, and the value is the data to be transmitted

2. post method

   • Syntax format: axios.post("address", {key:"value",key2:"value2"}).then(function(response){},function(err) {})
   • Difference: the data is written in the second parameter of post in the form of object, in the format of {key:value,key2:value2}

3. Code example

   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8">
   		<title></title>
   		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   	</head>
   	<body>
   		<input type="button" value="get request" class="get">
   		<input type="button" value="post request" class="post">
   		
   		<script type="text/javascript">
   			document.querySelector(".get").onclick = function(){
   				axios.get("https://autumnfish.cn/api/joke/list?num=3")
   				.then(function(response){
   					console.log(response);
   				},function(err){
   					console.log(err)
   				})
   			}
   			document.querySelector(".post").onclick = function(){
   				axios.post("https://autumnfish.cn/api/user/reg111",{username:"Cao ha"})
   				.then(function(response){
   					console.log(response);
   				},function(err){
   					console.log(err)
   				})
   			}
   		</script>
   	</body>
   </html>
   

The core of network application

1. Part of the data is obtained through the network

2. Send the network request in the method, and set the data returned by the server to the corresponding value in the data after the response

   var app = new Vue({
   	el:"#app",
   	data:{
   		joke:"joke"
   	},
   	methods:{
   		getJokes:function(){
   			//this.joke
   			axios.get("address").then(function(response){
   				//this.joke?
   			},function(err){});
   		}
   	}
   })
   

3. Code example

   <!DOCTYPE html>
   <html>
   	<head>
   		<meta charset="utf-8">
   		<title></title>
   		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   	</head>
   	<body>
   		<div id="app">
   			<input type="button" value="Get jokes" @click="getJoke" />
   			<p>{{ joke }}</p>
   		</div>
   		
   		<script type="text/javascript">
   			var app = new Vue({
   				el:"#app",
   				data:{
   					joke:"A funny joke"
   				},
   				methods:{
   					getJoke:function(){
   						// console.log(this.joke);
   						var that = this;
   						axios.get("https://autumnfish.cn/api/joke").then
   						(function(response){
   							// console.log(response)
   							// console.log(response.data)
   							// console.log(this.joke);
   							that.joke = response.data;
   						},function(err){})
   					}
   				},
   			})
   		</script>
   	</body>
   </html>