Vue basis

What is Vue?

Vue (pronounced /vju /), similar toview) is a set of progressive frameworks for building user interfaces
Vue’s core library focuses only on the view layer, making it easy to get started and integrate with third-party libraries or existing projects

Render HelloWorld onto the page using Vue

instruction

The essence is custom properties
Vue specifies that it starts with a V –

v-cloak

Prevent flicker during page loading

 <style type="text/css">
  # # # # # # # # # # # # # #
  [v-cloak]{
    /* Element hidden */
    display: none;
  }
  </style>
<body>
  <div id="app">
    <! The "V-cloak" attribute will be removed as soon as the data is rendered. The "V-cloak" attribute will be removed as soon as the data is rendered. The "V-cloak" attribute will be removed as soon as the data is rendered.
    <div  v-cloak  >{{msg}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
      // el specifies that the element ID is the element of app
      el: '#app'.// Data stores data
      data: {
        msg: 'Hello Vue'}});</script>
</body>
</html>
Copy the code

v-text

The V-text instruction is used to fill labels with data, similar to interpolation, but without the flash problem
If there is an HTML tag in the data, the HTML tag is output
Note: this is one-way binding, the value of the data object changes, the interpolation will change; However, changes in interpolation do not affect the value of the data object

<div id="app">
    <! - note: don't write interpolation grammar in the instruction Write the corresponding variable name directly In the v - text assignment of time don't write in interpolation syntax General attributes do not add {{}} to write directly in the corresponding data name -- -- >
    <p v-text="msg"></p>
    <p>
        <! Vue uses interpolation syntax only for tag content.
        {{msg}}
    </p>
</div>

<script>
    new Vue({
        el: '#app'.data: {
            msg: 'Hello Vue.js'}});</script>
Copy the code

v-html

The usage is similar to v-text but it can be used to fill HTML fragments into tags
There may be security issues, and V-HTML is generally only used for trusted content, never for user-submitted content

The difference between V-text and V-text is that V-text outputs plain text. The browser does not parse it in HTML, but V-HTML outputs it as AN HTML tag.

<div id="app">
　　<p v-html="html"></p> <! Output: HTML tags are parsed at render time -->
    
    <p>{{message}}</p> <! -- Output: <span> bound by double parentheses </span> -->
    
　　<p v-text="text"></p> <! -- Output: <span> HTML tags are output by source code during rendering </span>
</div>
<script>
　　let app = newVue({el: "#app".data: {message: " bind by double parentheses ".html: " HTML tags are parsed during rendering ".text: " HTML tags are outputted at render time ",}});</script>
Copy the code

v-pre

Displaying the raw information skips compilation
Skip the compilation of this element and its children.
Some static content does not need to be compiled with this command to speed up rendering

    <span v-pre>{{ this will not be compiled }}</span>    
	<! {{this will not be compiled}} -->
	<span v-pre>{{msg}}</span>  
     <! {{MSG}} -->
<script>
    new Vue({
        el: '#app'.data: {
            msg: 'Hello Vue.js'}});</script>
Copy the code

v-once

Perform a one-time interpolation [when data changes, the content of the interpolation does not continue to update]

  <! "Hello vue.js" -- "Hello vue.js" -- "Hello vue.js" --
     <span v-once>{{ msg}}</span>    
<script>
    new Vue({
        el: '#app'.data: {
            msg: 'Hello Vue.js'}});</script>
Copy the code

Two-way data binding

When the data changes, the view changes
As the view changes, so does the data

v-model

v-modelIt’s an instruction, restricted to<input>, < SELECT >, <textarea> componentsThe use of

 <div id="app">
      <div>{{msg}}</div>
      <div>When the content in the input box changes, the MSG on the page will be updated automatically<input type="text" v-model='msg'>
      </div>
  </div>
Copy the code

mvvm

MVC is a back-end layered development concept; MVVM is the concept of the front View layer, which mainly focuses on the separation of the View layer. That is to say, MVVM divides the front View layer into three parts: Model, View and VM ViewModel
m model
- Data layer The data layer in Vue is placed inside data
V view
- The View in Vue is our HTML page
The VM (View-Model) controller connects data to the view layer
- Vm, an instance of Vue, is VM

v-on

Used to bind events
The form is: V-on :click abbreviated @click;

The v-ON event function passes in parameters

<body>
    <div id="app">
        <div>{{num}}</div>
        <div>
            <! If the event is directly bound to the function name, then the event object is passed as the first argument to the event function by default.
            <button v-on:click='handle1'>Click on the 1</button>
            <! If the event is called, the event object must be passed as the last argument, and the name of the event object must be $event -->
            <button v-on:click='handle2(123, 456, $event)'>Click on the 2</button>
        </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app'.data: {
                num: 0
            },
            methods: {
                handle1: function(event) {
                    console.log(event.target.innerHTML)
                },
                handle2: function(p, p1, event) {
                    console.log(p, p1)
                    console.log(event.target.innerHTML)
                    this.num++; }}});</script>
Copy the code

Event modifier

Called in an event handlerevent.preventDefault() 或 event.stopPropagation()Is a very common requirement.
Vue does not recommend that we manipulate DOM. To solve this problem, Vuev-onprovidesEvent modifier
Modifiers are represented by an instruction suffix beginning with a dot

<! -- Prevent the click event from propagating -->
<a v-on:click.stop="doThis"></a>

<! Submit events no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

<! -- modifiers can be concatenated to prevent both bubbling and default events -->
<a v-on:click.stop.prevent="doThat"></a>

<! Trigger handler only if event.target is the current element itself -->
<! -- that is, events are not triggered from internal elements -->
<div v-on:click.self="doThat">.</div>When using modifiers, order is important; The corresponding code is generated in the same order. Therefore, using V-on :click.prevent. Self blocks all clicks, whereas V-on :click.self. Prevent only blocks clicks on the element itself.Copy the code

Key modifier

Keyboard events are sometimes used in projects, and when listening for keyboard events, we often need to check for detailed keystrokes. Vue allows forv-onAdds key modifiers when listening for keyboard events

<! -- Call 'vm.submit()' only if 'keyCode' is 13 -->
<input v-on:keyup.13="submit">

<! Call 'vm.submit()' -->
<input v-on:keyup.enter="submit">

<! -- call 'vm.alertMe()' when you press Enter or space -->
<input type="text" v-on:keyup.enter.space="alertMe" >Common key modifiers.Enter => Enter. TAB => TAB. Delete (capture the Delete and backspace keys) => Delete. Esc => Cancel. Space => space .left => left. Right => right<script>
	var vm = new Vue({
        el:"#app".methods: {
              submit:function(){},
              alertMe:function(){},}})</script>
Copy the code

Custom key modifier alias

It can be passed in Vueconfig.keyCodesCustom key modifier alias

<div id="app">Keycode 116 (F5) has a predefined alias of F5, so pressing F5 in the text input box triggers the prompt method<input type="text" v-on:keydown.f5="prompt()">
</div>

<script>
	
    Vue.config.keyCodes.f5 = 116;

    let app = new Vue({
        el: '#app'.methods: {
            prompt: function() {
                alert('I'm F5! '); }}});</script>
Copy the code

v-bind

The V-bind directive is used to update HTML attributes in response
V-bind :href Can be abbreviated to :href;

<! -- Bind a property -->
<img v-bind:src="imageSrc">

<! - for - >
<img :src="imageSrc">
Copy the code

Binding objects

We can give v-bind:class an object to dynamically switch classes.
Note: The V-bind :class directive can coexist with the normal class feature

1. V-bind supports the binding of an object. If an object is bound, the key is the corresponding class name and the value is the data in the corresponding data<! <ul class="box textColor textSize"></ul> TextColor, textSize is the CSS class name that's being rendered on the page isColor, isSize is the data in vue Data and if it's true the class name is being rendered on the page when isColor and isSize change, The class list will be updated accordingly, for example, by changing isSize to false, the class list will become <ul class="box textColor"></ul> -->

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>Learning Vue</li>
    <li>Learning Node</li>
    <li>Learning the React</li>
</ul>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">Object syntax</div>

<sript>Var vm= new Vue({el:'. Box ', data:{isColor:true, isSize:true, activeColor:"red", activeSize:"25px",}})</sript>
<style>

    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>
Copy the code

The binding class

2. V-bind allows you to bind an array where classA and classB correspond to data in data and classA pairs in data and classB pairs in data<ul class="box" :class="[classA, classB]">
    <li>Learning Vue</li>
    <li>Learning Node</li>
    <li>Learning the React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box'.data: {classA: 'textColor',classB: 'textSize'}})</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>
Copy the code

The difference between bound objects and bound arrays

When you bind an object, the property of the object is the name of the class to be rendered and the property value of the object corresponds to the data in data
When you bind an array, it holds the data in data

The binding style

 <div v-bind:style="styleObject">Bind style object</div>'
 
<! -- CSS property names can be camelCase or kebab-case (remember to use single quotes) -->
 <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">Inline style</div>

<! Group syntax can apply multiple style objects to the same element -->
<div v-bind:style="[styleObj1, styleObj2]"></div>


<script>
	new Vue({
      el: '#app'.data: {
        styleObject: {
          color: 'green'.fontSize: '30px'.background:'red'},activeColor: 'green'.fontSize: "30px"
      },
      styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }

</script>
Copy the code

Branching structure

V-if application scenario

1- Multiple elements show or hide an element by conditional judgment. Or multiple elements
2- Switch between two views

<div id="app">
        <! If true, load it, otherwise not -->
        <span v-if="flag">If flag is true, it is displayed; false, it is not displayed!</span>
</div>

<script>
    var vm = new Vue({
        el:"#app".data: {flag:true}})</script>

----------------------------------------------------------

    <div v-if="type === 'A'">
       A
    </div>
  <! -- v-else-if immediately after v-if or v-else-if indicates that v-if condition is not executed -->
    <div v-else-if="type === 'B'">
       B
    </div>
    <div v-else-if="type === 'C'">
       C
    </div>
  <! -- v-else follows v-if or v-else -- if -->
    <div v-else>
       Not A/B/C
    </div>

<script>
    new Vue({
      el: '#app'.data: {
        type: 'C'}})</script>
Copy the code

Difference between V-show and V-if

V-show is essentially the tag display set to None, which controls hiding
- V-show compiles only once and controls CSS, whereas V-if destroys and creates all the time, so v-show performs better.
V-if dynamically adds or removes DOM elements from the DOM tree
- The V-IF switch has a partial compile/unload process in which the internal event listeners and subcomponents are destroyed and rebuilt as appropriate

Loop structure

v-for

The values in the array used for the loop can be objects or ordinary elements

<ul id="example-1">
   <! Item is a name we define for each item in an array. Items correspond to an array of data.
  <li v-for="item in items">
    {{ item.message }}
  </li> 

</ul>
<script>
 new Vue({
  el: '#example-1'.data: {
    items: [{message: 'Foo' },
      { message: 'Bar'}],}})</script>
Copy the code

Is not recommendedAt the same time usev-if 和 v-for
whenv-if 与 v-forWhen used together,v-forIs better thanv-ifHigher priority.

   <! -- loop structure -- traversal object v for value k for key I for index --> 
     <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div>

<script>
 new Vue({
  el: '#example-1'.data: {
    items: [{message: 'Foo' },
      { message: 'Bar'}].obj: {
        uname: 'zhangsan'.age: 13.gender: 'female'}}})</script>
Copy the code

The key role
- Key to give each node a unique identity
- The key’s main purpose is to update the virtual DOM efficiently

<ul>
  <li v-for="item in items" :key="item.id">.</li>
</ul>

Copy the code

What is Vue?

Render HelloWorld onto the page using Vue

instruction

v-cloak

v-text

v-html

v-pre

v-once

Two-way data binding

v-model

mvvm

v-on

The v-ON event function passes in parameters

Event modifier

Key modifier

Custom key modifier alias

v-bind

Binding objects

The binding class

The difference between bound objects and bound arrays

The binding style

Branching structure

V-if application scenario

Difference between V-show and V-if

Loop structure

v-for

Related Posts

Js array API– Look at the old and learn the new

[Luffy]_ programmer must be a force deduction: 445

Use NestJS to build the server application