Learn the key knowledge that must be mastered in the Vue framework

1. What is Vue

Vue is a progressive framework for building user pages. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern toolchain and various supporting libraries, Vue is fully capable of driving complex single-page applications.

2. Differences from native JS

We can demonstrate this through a small case

Example: Display the information in the input box in the span tag in real time

Native JS

<body>
 <input id='txt' type="text">
 <span id='con'></span>
</body>
<script>
 document.querySelector('#txt').addEventListener('keyup', function () {
 document.querySelector('#con').innerHTML = this.value
 })
</script>

Vue

<body>
 <div id="app">
 <input id='txt' type="text" v-model="msg">
 <span id='con'>{{msg}}</span>
 </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 let app = new Vue({
 el: "#app",
 data: {
  msg: ""
 }
 })
</script>

Difference: The obvious difference is that the operation of DOM elements is omitted

Summarize:

Create a DOM element and make it the mounting point of the Vue instance. All data in the Vue instance can be used in the mounting point
```
<div id=app>
</div>
```
Create an instance object through new Vue
el attribute specifies the mount point of the current Vue instance
The data in data is the model data, which depends on the current Vue instance. You can view the data by entering app.msg in the console.
The data in data can be used through interpolation expressions

3. Data Binding

Data binding is to display the data in the data attribute of the Vue instance in the mount point

1. Content Binding

Display the data in data as content

<div id='app'>
 <p>{{msg}}</p>
</div>

If you want to display HTML tags, just use v-html in the tags.

<div id='app'>
 <p v-html>{{msg}}</p>
</div>

2. Property Binding

Use the data in data as the attribute value of an element

Just use v-bind . The attributes can be built-in or customized. The shorthand way is :

<p v-bind:id="id" :class="class">{{msg}}</p>

3. The value of the form tag

You can use two-way data binding in form tags using the v-model directive. It will automatically select the correct method to update the element based on the control type.

1. Text boxes and text fields

<input type:'text' v-model="msg"></input>
<textarea v-model:'msg'><textarea>

2. Checkbox

<div id='app'>
	<label for:'swim'><label>
 <input type='checkbox' id=swim v-model='isSwim'/>
 <label for="read">Read</label>
 <input type="checkbox" id="read" v-model="isRead">
 <label for="play">Game</label>
 <input type="checkbox" id="play" v-model="isPlay">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 	let app = new Vue({
 el:"#app",
 data:{
  isSwim:true,
  isRead:true,
  isPlay:false
 }
 }) 
 </script>

Radio button

<div id="app">
	<label for="man">Male</label>
 <input type="radio" id="man" value="man" v-model="gender">
 <label for="women">Women</label>
 <input type="radio" id="women" value="women" v-model="gender">
 {{gender}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 	let app = new Vue({
 el:"#app",
 data:{
  gender:''
 }
 }) 
 </script>

Drop-down box

<div id="app">
 <select v-model="city">
 <option disabled value="">Please select</option>
 <option value="bj">Beijing</option>
 <option value="sh">Shanghai</option>
 </select>
 {{city}}
 </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 	let app = new Vue({
 el:"#app",
 data:{
 city:""
 }
 }) 
 </script>

Passing Parameters

<div id='app'>
	<button v-on:click="showInfo('hello')">button</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	let app = new Vue({
 el:"#app",
 data:{
  title:"New Year's Day"
 },
 methods:{
  showInfo:function(message){
  console.log(message)
  }
 }
 })
</script>

4. Event Handling

You can use v-on directive to listen for DOM events and run some JavaScript code when they are triggered.

<div id=app>
 <button v-on:click='greet'></button>
</div>

var app = new Vue({
 el:'#app',
 data:{
 name:'holle Vue'
 },
 //Define methods in methods:{
 greet:function(event){
  //this points to the Vue instance in the method alert(this.name + '!')
  if (event) {
 		alert(event.target.tagName)
 	}
 }
})

5. List Rendering

We can use v-for directive to render a list based on an array. v-for directive requires a special syntax of the form item in items , where items is the source array of data and item is an alias for the array element being iterated.

<div id='app'>
	<ul>
 		<li v-for="blog in blogs">{{blog}}</li>
 </ul>
 <ul>
 <li v-for="stu in stus">Name: {{stu.name}} Age: {{stu.age}}</li>
 </ul>
</div>

var app = new Vue({
 el:"#app",
 data:{
 blogs:['Three Kingdoms Exercise','Journey to the West','Old Master Q'],
 stus:[
  {name:'Xiao Ming',age:18},
  {name:'Xiao Zhang',age:11},
  {name:'Xiao Wang',age:12}
 ]
 }
})

Get data from the server

<body>
 <div id="app">
 <ul>
 <li v-for="item in books">{{item.title}}</li>
 </ul>
 </div>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script>
 let app = new Vue({
 el: '#app',
 data: {
  books: [],
 },
 created: function () {
  fetch('data.json')
  .then((res) => {
  return res.json()
  })
  .then((res) => {
  this.books = res
  })
 },
 })
 </script>

6. Conditional Rendering

1. The `v-if` directive is used to conditionally render a piece of content

<div v-if=true>hello Vue</div>

2. You can also use `v-else` to add an else block

<div v-if=false>hello Vue</div>
<div v-else>hello world</div>

3. Use `v-if` conditional rendering grouping on the `<template>` element

When you need to switch multiple elements, you can add v-if to template . Because the <template> element is an invisible element, the rendered result will not contain <template> element.

<template v-if="ok">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 2</p>
</template>

4. `v-if-else` , as the name implies, acts as the else if block of `v-if` and can be used continuously

<div v-if="score==100">
 Full marks</div>
<div v-else-if="score>=80 && score<100">
 Good</div>
<div v-else-if="score>=70 && score<=60">
 Pass</div>
<div v-else-if="score<60">
 Failed</div>
<div v-else>
 Please enter the correct score</div>

5. `v-show` also displays elements based on conditions

<div v-show="ok">hello</div>

Unlike v-if , the v-show element will always be rendered and remain in the DOM.

Generally speaking, v-if has higher switching cost, while v-show has higher initial rendering cost. Therefore, if you need to switch very frequently, it is better to use v-show ; if the condition rarely changes during runtime, it is better to use v-if .

7. Class and Style Binding

We can use v-bind to bind class names or inline styles

Bind class to dynamically switch classes, and can also coexist with ordinary classes

<div class="static" v-bind:class="{active:isActive,'text-danger:hasError'}"></div>

data{
 isActive:true
 hasError:false
}

The rendering result is:

<div class='static active'></div>

Binding inline-level styles

Syntax v-bind:style

<div v-bind:style='{color:activeColor,fontSize:fontSize+'px'}'></div>

data:{
 activeColor:"red",
 fontSzie:13
}

You can also bind directly to a style object, which makes the template clearer

<div v-bind:style="active"></div>

data:{
 active:{
 color:'red',
  fontSize:'30px'
 }
}

8. Computed properties

When we need to calculate the value in the template, we can use computed properties (computed)

<div id="#app">
 <p>{{message}}</p>
 <p>{{reverseMessage}}</p>
</div>

var app = new Vue({
 el:"#app",
 data:{
 message:"Hello"
 },
 computed:{
 reverMessage(){
  return this.message.split('').reverse().join('')
 }
 }
})

9. Listener

Listeners can observe and respond to data changes on a Vue instance.

<div id="app">
 <div>
 Question: <input v-model="question">
 </div>
 
 <div>{{answer}}</div>
</div>

 var app = new Vue({
 el: "#app",
 data: {
  question: "",
  answer: [],
 },
 watch:
  question(newValue) {
  this.getAnswer()
  }
 },
 methods: {
  getAnswer: function () {
  let that = this
  axios.get('http://localhost:3000/answer.php?q=' + this.question)
   .then(function (response) {
   that.answer = response.data
   })
  }
 }
 })

PHP code

<?php
 $question = $_GET['q'];
	$answer=[];
	switch($question){
 case "small":
 $answer=['Little child', 'Little sister', 'Little fresh meat'];
 break;
 case "Little Fresh Meat":
 $answer=['What is fresh meat', 'What is the use of fresh meat', 'Can fresh meat be eaten'];
  break;
 case "Young handsome guy acting":
 $answer=["The acting of the young actor is too fake","The young actor was banned","The young actor can't be an actor"];
 break;
 }
echo json_encode($answer);
?>

Demo

nswer = response.data

php code ```php
<?php
 $question = $_GET['q'];
	$answer=[];
	switch($question){
 case "small":
 $answer=['Little child', 'Little sister', 'Little fresh meat'];
 break;
 case "Little Fresh Meat":
 $answer=['What is fresh meat', 'What is the use of fresh meat', 'Can fresh meat be eaten'];
  break;
 case "Young handsome guy acting":
 $answer=["The acting of the young actor is too fake","The young actor was banned","The young actor can't be an actor"];
 break;
 }
echo json_encode($answer);
?>

Demo

10. Slots

Slot Contents

var el_div = {
 template:
	<div><slot></slot></div>
}

<div id=app>
	<el-div>
 <span>Slot Contents</span>
 </el-div>
</div>

When the component renders, slot is replaced with <span>插槽內容</span> . Slots can contain any template code

Fallback Content

Sometimes it is useful to set specific fallback (i.e. default) content for a slot, which will only be rendered when no content is provided. For example, in a <submit-button> component:

<button type="submit">
 <slot></slot>
</button>

We might want this <button> to render the text "Submit" in most cases. To use "Submit" as fallback content, we can put it inside a <slot> tag:

<button type="submit">
 <slot>Submit</slot>
</button>

Now when I use <submit-button> in a parent component and don't provide any slot content:

<submit-button></submit-button>

The fallback content "Submit" will be rendered:

<button type="submit">
 Submit
</button>

But if we provide content:

<submit-button>
 Save
</submit-button>

Then the provided content will be rendered instead of the fallback content:

<button type="submit">
 Save
</button>

Named Slots

Sometimes we need more than one slot. For example, for a <base-layout> component with the following template:

<div class="container">
 <header>
 <!-- We want to put the page header here -->
 </header>
 <main>
 <!-- We want to put the main content here-->
 </main>
 <footer>
 <!-- We want to put the footer here -->
 </footer>
</div>

For cases like this, the <slot> element has a special attribute: name . This attribute can be used to define additional slots:

<div class="container">
 <header>
 <slot name="header"></slot>
 </header>
 <main>
 <slot></slot>
 </main>
 <footer>
 <slot name="footer"></slot>
 </footer>
</div>

A <slot> exit without name has the implied name "default".

When providing content to a named slot, we may use the v-slot directive on a <template> element and provide its name as the argument to v-slot :

<base-layout>
 <template v-slot:header>
 <h1>Here might be a page title</h1>
 </template>

 <p>A paragraph for the main content.</p>
 <p>And another one.</p>

 <template v-slot:footer>
 <p>Here's some contact info</p>
 </template>
</base-layout>

Now all the content inside the <template> element will be passed to the corresponding slots. Any content not wrapped in <template> with v-slot is treated as the content of the default slot.

However, if you want to be more explicit, you can still wrap the contents of the default slot in a <template> :

<base-layout>
 <template v-slot:header>
 <h1>Here might be a page title</h1>
 </template>

 <template v-slot:default>
 <p>A paragraph for the main content.</p>
 <p>And another one.</p>
 </template>

 <template v-slot:footer>
 <p>Here's some contact info</p>
 </template>
</base-layout>

Any of these will render:

<div class="container">
 <header>
 <h1>Here might be a page title</h1>
 </header>
 <main>
 <p>A paragraph for the main content.</p>
 <p>And another one.</p>
 </main>
 <footer>
 <p>Here's some contact info</p>
 </footer>
</div>

The above is the detailed content of the key knowledge that must be mastered in learning Vue. For more information about Vue key knowledge, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

In-depth study of the usage and principles of Vue nextTick
Learn Vue component examples
Learn Vue.js conditional rendering
Learn Vue.js calculated properties
Simple learning vue directive
Study notes to write the first program of Vue

<<: Detailed explanation of redis persistence, master-slave synchronization and sentinel under Linux

>>: How to use regular expression query in MySql

Docker primary network port mapping configuration

1. What is Vue

2. Differences from native JS

3. Data Binding

1. Content Binding

2. Property Binding

3. The value of the form tag

4. Event Handling

5. List Rendering

6. Conditional Rendering

1. The v-if directive is used to conditionally render a piece of content

2. You can also use v-else to add an else block

3. Use v-if conditional rendering grouping on the <template> element

4. v-if-else , as the name implies, acts as the else if block of v-if and can be used continuously

5. v-show also displays elements based on conditions

7. Class and Style Binding

8. Computed properties

9. Listener

10. Slots

Slot Contents

Fallback Content

Named Slots

Recommend

1. The `v-if` directive is used to conditionally render a piece of content

2. You can also use `v-else` to add an else block

3. Use `v-if` conditional rendering grouping on the `<template>` element

4. `v-if-else` , as the name implies, acts as the else if block of `v-if` and can be used continuously

5. `v-show` also displays elements based on conditions