Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

1. The Vue web site

cn.vuejs.org

2.Vue is a progressive JavaScript framework

The weak claim is the data-driven MVVM framework

  • M(model)Data model layer
  • V(view)The view layer
  • VmThe view model

Environment set up

  1. Create project folders
  2. npm init - y
  3. cnpm i vue --save

$mountMount an instance of vue onto a DOM element

Option object: EL specifies that the mounted element data is an object, primarily to place data

{{difference expression}} two curly braces

The HTML that puts the difference expression is called a template.

Vue manipulates objects in memory first (the same dom structure as true)

Commonly used instructions

Instructions tov-At the beginning

  • v-bindV-bind: Attribute name = “variable” can be shortened to: (colon)
  • v-htmlBind HTML tags to nodes
  • v-modelBidirectional binding command

The data changes as the view changes

The data changes and the view page changes

V-number modifier number/lazy/trime V-model. number

If you want to automatically convert user input values to numeric types, you can add the number modifier to the V-Model:

v-model.number.lazy

The V-Model synchronizes the value of the input field with the data after each input event (except when the input method combines text as described above). You can change to synchronization using the change event by adding the lazy modifier

v-model.trime

You can add the trim modifier to the V-Model if you want to automatically filter the leading and trailing whitespace characters entered by the user

V-if false Not render true To render v-show false display:none true to render

V-bind :style= ‘{” CSS properties “: variables}’

V-bind :class= “{‘ class name ‘: Boolean}”

V-bind:class= "[' class 1 ', 'class 2'... "

  • v-for < HTML tag v-for= "(variable, index) in array" V-bind :key= "index" >
  • v-for <span v-for= "n in number" ></span>Traverse the digital
  • v-for <span v-for= "(value,key,index) in object" ></span>Traverse object

The multiplication table

The padEnd() method completes either the header or the tail of a string if it is not of a specified length.

<ul class="cfb">
  <li v-for="i in 9">
    <span v-for="j in i">{{j}}*{{i}}={{String(i*j).padEnd(2,"&ensp;")}}</span>
  </li>
</ul>
Copy the code

Display 26 English letters

<ul>
<li v-for="n in 26">
{{String.fromCharCode(n+64)}}
</li>
 </ul>
Copy the code

v-onThe binding eventV-on: Event name = "event handler"

I could just write it at sign

Inverted string

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>

<body>
  <div id="box">
    {{ str }}
    <button v-on:click="reverseStr">Inverted string</button>
  </div>

  <script>
    var vm = new Vue({
      el: "#box".data: {
        str: "hello Vue.js".// What to display
      },
      methods: {
        reverseStr() {
          this.str = this.str.split("").reverse().join("")}}})</script>
</body>

Copy the code