(1)

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> components,radio(check box)
  • v-modelInternally use different attributes for different input elements and throw different events:
    • Text and Textarea elements are usedvalueProperties andinputEvents;
    • Checkbox and radio usecheckedProperties andchangeEvents;
    • The select field willvalueAs prop and willchangeAs an event.

 <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

This point

  1. In vue this is a vue object, but if function(){

this.num = name;

}

2. Here, for example, the value of vue data requires this, because function refers to window, so we need to add this in front of it`

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

Case TAB

1. HTML structure

`
    <div id="app">
        <div class="tab">
            <! - the TAB bar - >
            <ul>
                <li class="active">apple</li>
                <li class="">orange</li>
                <li class="">lemon</li>
            </ul>
              <! -- Corresponding image to display -->
            <div class="current"><img src="img/apple.png"></div>
            <div class=""><img src="img/orange.png"></div>
            <div class=""><img src="img/lemon.png"></div>
        </div>
    </div>


`
Copy the code

2. Data provided

         list: [{
                    id: 1.title: 'apple'.path: 'img/apple.png'
                }, {
                    id: 2.title: 'orange'.path: 'img/orange.png'
                }, {
                    id: 3.title: 'lemon'.path: 'img/lemon.png'
                }]
Copy the code

3. Render data to the page

  • Replace the number in the TAB column with the number on the page

    • Render the title in data to the page using a V-for loop
    • Render the path from data to the page using a V-for loop
        <div id="app">
        <div class="tab">  
            <ul>
                  <! 3. Index is the index of each item in the array. 4.
                   <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li>
              </ul>
              <div  :key='item.id' v-for='(item, index) in list'>
                    <! -- : is short for v-bind -->
                    <img :src="item.path">
              </div>
        </div>
    </div>
<script>
    new  Vue({
        // Specify that the action element is app
        el: '#app'.data: {
                list: [{
                    id: 1.title: 'apple'.path: 'img/apple.png'
                }, {
                    id: 2.title: 'orange'.path: 'img/orange.png'
                }, {
                    id: 3.title: 'lemon'.path: 'img/lemon.png'}]}})</script>
Copy the code

4. Add events to each TAB and highlight the selected ones

  • 4.1. Make the first TAB bar highlighted by default

    • TAB highlighting is done by adding the class name Active (CSS Active has been written in advance)
      • Define a default index currentIndex in data to be 0
      • Add the active class name to the first LI
        • Dynamically binding class to the index 0 of the first LI is exactly the same as the currentIndex
        • CurrentIndex === index Add class name if equal active otherwise add empty class name

  • Make the default first TAB column div appear

    • The implementation idea is the same as the first TAB implementation except that the first div displays the class name current
      <ul>
	   <! -- Dynamic binding class with active class name highlighted -->
       <li  :class='currentIndex==index?" active":""'
           :key='item.id' v-for='(item,index) in list'
           >{{item.title}}</li>
  </ul>
	<! -- Dynamic binding class with current class name display no current hidden -->
  <div :class='currentIndex==index?" current":""' 
       
       :key='item.id' v-for='(item, index) in list'>
        <! -- : is short for v-bind -->
        <img :src="item.path">
  </div>

<script>
    new  Vue({
        el: '#app'.data: {
                currentIndex: 0.// The current index of the TAB defaults to 0
                list: [{
                    id: 1.title: 'apple'.path: 'img/apple.png'
                }, {
                    id: 2.title: 'orange'.path: 'img/orange.png'
                }, {
                    id: 3.title: 'lemon'.path: 'img/lemon.png'}]}})</script>
Copy the code

  • 4.3. Click on the current highlight of each TAB and unhighlight the others

    • Add click events to each li

    • Compare the currentIndex with the currentIndex

    • If equal, current LI adds active class name current LI highlights current corresponding index div add current div show other hidden

          <div id="app">
        <div class="tab">
            <ul>
                <! Select * from vON; select * from Von;
                <li v-on:click='change(index)'		           			
                    :class='currentIndex==index?" active":""'                   
                    :key='item.id' 
                    v-for='(item,index) in list'>{{item.title}}</li>
            </ul>
            <div :class='currentIndex==index?" current":""' 
                 :key='item.id' v-for='(item, index) in list'>
                <img :src="item.path">
            </div>
        </div>
    </div>

<script>
    new  Vue({
        el: '#app'.data: {
                currentIndex: 0.// The current index of the TAB defaults to 0
                list: [{
                    id: 1.title: 'apple'.path: 'img/apple.png'
                }, {
                    id: 2.title: 'orange'.path: 'img/orange.png'
                }, {
                    id: 3.title: 'lemon'.path: 'img/lemon.png'}},methods: {
                change: function(index) {
                    // use the index passed in to make the currentIndex equal to the index clicked
                    // To implement the control class name
                    this.currentIndex = index; }}})</script>
Copy the code