Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "Vue novice case analysis". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Vue instance and template syntax

{{message}}

New Vue ({el:'#app', data: {messageswitch hellogradwriting'}, methods: {},})

El

Vue syntax is written in script like JavaScript, and DOM is bound through id selector. In Vue, you only need to mount the id of DOM in el, which can be simply understood as a hook. El hooks everything in through the feature of id= "app", so that we can realize the operation of DOM in Vue.

Data

Data in Vue is used to declare the data we want to use, so that it is easier for us to clear the data that needs to be modified in a certain section when maintaining or manipulating documents, and there is no need to operate on DOM directly. At this time, the data is bidirectionally bound to DOM. When we modify the data declared in data, responsive changes will occur in DOM at the same time.

Methods

The Methods contains our entire logic for the page and the trigger events in the page, which is equivalent to the function content in JavaScript

two。 Built-in instruction

There are many built-in instructions in Vue that replace actions on documents and events in JavaScript.

V-html

V-html: update data as html tags

W3cschool

{{website}}

{{website}}

New Vue ({el:'#app', data: {website:'Vue,js', messageswitch hellowriting'}, methods: {},})

As you can see, the second one

The Vue.js bound in the tag is hello,word! Updated, and in the declared message, 'helloauthorwordwriting' Update the contents through the html tag, and you can see that this is a first-level title hello,word!.

V-text

W3cschool

{{website}}

{{website}}

New Vue ({el:'#app', data: {website:'Vue,js', messageswitch hellowriting'}, methods: {},})

Through the v-txet instruction, although it is still replaced

The contents of the tag are displayed only in the form of a string, not as a html tag like html.

V-cloak

When the code loads, load HTML first, load the interpolation syntax as HTML content on the page, and replace the interpolation syntax after loading js, so we will see the flicker problem, and v-clock can solve this problem.

{{msg}} [v-cloak] {display: none;}

V-once

The v-once command renders elements and components only once, and subsequent rendering, elements, components and all their child nodes that use this command, will be treated as static content and skipped, which can be used to optimize update performance. W3cschool can not change: {{website}}

Change: {{website}}

New Vue ({el:'#app', data: {website: "hello"}, methods: {},})

V-on

Event binding for Vue is done using the built-in v-on directive, as well as passing parameters. W3cschool new Vue ({el:'#app', data: {}, methods: {alert:function () {alert ('Click event triggered');},})

A method named alert has been added after the v-on:click click event. Before that, I tried to directly use vMuonalert Click = "click event", but the console reported an error after the click. I wonder if any of the gods understand why this is happening.

When using the v-on instruction, we can not only trigger click events, such as double-click events and keystroke events, but also modify v-on:click or (mousedown, mouseup, etc.). At the same time, we can abbreviate v-on:click to @ click, and the method to trigger events must be written in methods.

V-if

V-if and v-show can achieve conditional rendering, and Vue will render elements according to the true or false conditions of the expression value. There are also v-else and v-else-if instructions that can be paired with v-if, similar to if-else in JavaScript.

To put it simply, v-if is equivalent to our conditional operation on DOM in JavaScript. According to whether the expression value is true or false, we can conditionally operate DOM. Let's see how it works.

W3cschool, I jumped out to pull.

New Vue ({el:'#app', data: {jump:false}, methods: {go:function () {this.

Note that the default Boolean value for v-if is false, and v-if is a direct operation on DOM, while subsequent v-show is an operation on styles.

V-show

The use of v-show is roughly the same as v-if, except that elements with v-show are always rendered and retained in DOM. V-show simply switches the CSS attribute display of the element. When the template attribute is true, the console displays display:none when the value of the display:block; attribute is false.

V-show does not support syntax and does not support v-else. I jumped out and pulled.

New Vue ({el:'#app', data: {jump:false}, methods: {go:function () {this.jumpboxes }})

The difference between v-show and v-if

The elements are displayed and hidden according to the true or false of the expression.

V-if renders elements only when the condition is true, and v-show always renders elements regardless of their initial conditions.

The initial overhead of v-show is higher, and the handover cost of v-if is higher.

Use v-if show when switching frequently and v-if when operating conditions rarely change.

V-for

In Vue, v-for instructions are provided to cycle through data.

W3cschool starts to cycle {{index}} new Vue ({el:'#app', data: {item: [1 el:'#app', data, 3, 4, 5],}, methods: {} }) w3cschool starts a loop / / index to represent the elements in the array The subscript of the real element of the items table {{index}}, {{items}} new Vue ({el:'#app', data: {item: [1 methods: {}, 5],}, methods: {},})

V-model

The most important thing about v-model is bidirectional data binding. When you use Vue to manipulate DOM elements, the view and data change on either side at the same time.

Input: reverse content: {{reversedMessage}} new Vue ({el:'#app', data: {message:''}, computed: {/ / calculation attribute is defined in the computed option, when the value on which the calculation property depends changes The value of this property is automatically updated / / computed can be changed into methods to define a method to implement the same function reversedMessage: function () {return this.message.split (') .reverse () .join ('') / / check the content in message, reverse and add})

When we enter the value in the input input box, the bound message attribute value has also changed. When the binding is successful, when we enter any legal string or number in input, Vue will update the message attribute value again to match the value we entered, and then use the reversedMessage method to reverse the message and reprint it in = {reversedMessage} = =. Because it is a two-way data binding, the three occur at the same time.

V-bind

The role of v-bind is to bind attributes to elements, written as v-bind: attribute name, which can be abbreviated to ": attribute name".

New Vue ({el:'#app', data: {imgsrc: "xxx", imgtitle: "get a picture",}, methods: {},})

Whether it's class or other tags, you can bind attributes to an element through the ": tag name". The content of the bound element is as a JavaScript variable, so you can write an JavaScript expression on it.

This is the end of the introduction of "case Analysis of beginners to Vue". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.