1. Basic grammar instructions

1, v – bind

We have successfully created our first Vue application. This looks very similar to rendering a string template, but Vue does a lot of work behind the scenes. Now that the data is associated with the DOM, everything is responsive. We manipulate object properties on the console, the interface can be updated in real time, and we can use V-bind to bind element properties.

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<! -- View layer, template -->
<div id="app">
    <span v-bind:title="message">Hover for a few seconds to see the prompt for dynamic binding here!</span>
</div>

<! - 1. Import Vue. Js - >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app"./*Model: data */
        data: {message:"hello,vue!"}});</script>
</body>
</html>
Copy the code

V-bind and so on are called directives. Instructions are prefixed with v to indicate that they are special features provided by Vue. They apply special responsive behavior to the rendered DOM. In this case, the instruction says, “Align the title property of the element node with the Message property of the Vue instance.” If you open your browser’s JavaScript console again and type app, message= ‘New message’, you’ll see again that the HTML with the title feature has been updated.

2, v – if, v – else

Conditional statement

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<! -- View layer, template -->
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<! - 1. Import Vue. Js - >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {ok: true}});</script>
</body>
</html>
Copy the code

Run it in a browser, open the console, type vm.ok=false on the console and press Enter, and you’ll see that the content displayed in the browser will change to NO.

Note: Binding data using the V -* attribute does not require double curly braces.

<! DOCTYPEhtml>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<! -- View layer, template -->
<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else-if="type==='D'">D</h1>
    <h1 v-else>C</h1>
</div>

<! - 1. Import Vue. Js - >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {type: 'A'}});</script>
</body>
</html>
Copy the code

Note: === three equal signs in JS denotes absolute equality (i.e. data and type must be equal) on the code.

3, v – for

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<! -- View layer, template -->
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>

</div>

<! - 1. Import Vue. Js - >
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {items:[
                {message:'一'},
                {message:'二'},
                {message:'三'}}}]);</script>
</body>
</html>
Copy the code

Note: Items is an array, and item is an alias for an iteration of an array element.

Type vm.items. Push ({message: ‘four ‘}) on the console and try to append a piece of data. You will see that the content displayed in the browser will be added one more piece.

4, the v – on

V-on Listens for events

<! DOCTYPEhtml>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="sayHi">Am I</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {message:'Hello World'
        },
        methods: {Methods must be defined in Vue's Methods object, which stands for a bunch of Methods
            sayHi:function(event){
                //'this' in the method refers to the current Vue instance
                alert(this.message); }}});</script>
</body>
</html>
Copy the code

Form bidirectional binding

1. What is two-way data binding

Vue. Js is an MVVM framework, that is, data bidirectional binding, that is, when the data changes, the view will change, when the view changes, the data will also change synchronously, which is also the essence of vue.js. It is important to note that when we say two-way data binding, it must be for UI controls that non-UI controls do not involve two-way data binding. One-way data binding is a prerequisite for using state management tools. If we use VUEX, the data flow is also unidirectional, which conflicts with two-way data binding.

In vue. js, if you use vuex, the data is actually one-way, so it is called two-way data binding, which is used for UI controls. For us to deal with forms, vue. js two-way data binding is particularly comfortable to use. That is, they are not mutually exclusive. Single item is used in global data flow to facilitate tracking. Local data flow is bidirectional and easy to operate.

2. Use two-way data binding in forms

You can use v-model directives to create two-way data bindings on forms, and elements. It automatically selects the correct method to update the element based on the control type. For all its magic, v-Models are essentially syntax sugar. It listens for user input events to update data and performs special processing for extreme scenarios.

Note: The V-Model ignores the initial values of the value, Checked, and Selected features of all form elements and always uses Vue instance data as the data source. You should declare the initial value in the component’s data option via JavaScript!

(1) Single-line text

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">Input text:<input type="text" v-model="message" > {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {message:"123"}});</script>
</body>
</html>
Copy the code

(2) Multi-line text

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">Input text:<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
    {{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {message:"123"}});</script>
</body>
</html>
Copy the code

(3) Radio buttons

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">Gender:<input type="radio" name="sex" value="Male" v-model="isabella"> 男
    <input type="radio" name="sex" value="Female" v-model="isabella"> 女
    <p>Who was selected: {{Isabella}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {isabella:""}});</script>
</body>
</html>
Copy the code

(4) a drop-down box

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">The drop-down box:<select v-model="selected">
        <option value="" disabled>-- Please select --</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <span>
        value:{{selected}}
    </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app".data: {selected:""}});</script>
</body>
</html>
Copy the code

Note: The initial value of the V-model expression does not match any options, and the primitives will be rendered “unchecked”. In iOS, this prevents the user from selecting the first option because in this case, iOS does not trigger the change event. Therefore, it is more recommended to provide a disable option with a null value as shown above.

Three, components,

What is a component

Components are reusable Vue instances, in other words, a set of templates that can be reused. In the same vein as JSTL’s custom tags and Thymeleal’s Th: Fragment frameworks, an application is usually organized as a nested tree of components:

For example, you might have headers, sidebars, content areas, and so on, each of which contains other components like navigation links, blog posts, and so on.

2. First Vue component

Note: In actual development, we will not develop components as follows, but as vuE-CLI creation, VUE template file, the following method is just to give you an understanding of what components are.

Use the Vue.component() method to register components in the following format:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <! -- component: value passed to the component: props-->
    <isabella v-for="item in items" v-bind:wang="item"></isabella>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
    // Define a Vue component
    Vue.component("isabella", {props: ['wang'].template: '<li>{{wang}}</li>'
    });

    var vm = new Vue({
        el:"#app".data: {items: ["111"."222"."333"]}});</script>
</body>
</html>
Copy the code

Description:

Vue.component() : Registered component
Wang: Custom component name
Template: template of a component
V -for=”item in Items “: Iterates through the array named items defined in the Vue instance and creates an equal number of components
V-bind :wang=”item” : binds the traversal item to the props definition property named item in the component; = = wang is the name of the properties defined by props, and the right is the value of the item traversed in item in Items

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: Basic syntax, bidirectional binding, components

1. Basic grammar instructions

1, v – bind

2, v – if, v – else

3, v – for

4, the v – on

Form bidirectional binding

1. What is two-way data binding

2. Use two-way data binding in forms

(1) Single-line text

(2) Multi-line text

(3) Radio buttons

(4) a drop-down box

Three, components,

What is a component

2. First Vue component

Vue: Basic syntax, bidirectional binding, components

1. Basic grammar instructions

1, v – bind

2, v – if, v – else

3, v – for

4, the v – on

Form bidirectional binding

1. What is two-way data binding

2. Use two-way data binding in forms

(1) Single-line text

(2) Multi-line text

(3) Radio buttons

(4) a drop-down box

Three, components,

What is a component

2. First Vue component

Related Posts

Copy yizan background +vue+ TS +vuecli3.0+elementUi+ the use of vueX the use of element introduction project structure

Vue2 – Global API source code analysis

Multiple column layouts for one article – equal width, equal height, and adaptive