1 Vue features

1.1 Vue- Progressive Framework:

In simple terms, you can use only part of vUE, not all of it.

1.2 the Vue MVVM

View: usually refers to DOM VueModel: can realize data binding and DOM listening, is the bridge between View and Model. Model: Data, including data requested by the network from the server.

Experience the power of Vue

2.1 Counter Cases

<div class="app"> <h2> {{counter}}</h2> <button v-on:click="additon">+</button> <button @click="substraction">-</button> </div> <script SRC ="js/vue.js"></script> <script> const obj = {counter: 1, message: 'add and subtract ',}; const app = new Vue({ el: '.app', data: obj, methods: { additon: function () { this.counter++; }, substraction: function () { this.counter--; ,}}});Copy the code

2.2 List examples

<div class="app"> <ul> <li v-for="m in movies"><h2>{{m}}</h2></li> </ul> </div> <script src="js/vue.js"></script> < script > const app = new Vue ({el: 'app', data: {movies: [' b ', 'conan', 'flying', 'to advance the giants'],},}); </script>Copy the code

3 Interpolation Operation

The value in an element is given to vUE control with the help of the {{}} syntax, and the data is reactive

v-once

<div id="app"> <h2>{{message}}</h2> <h2 v-once>{{message}}</h2>Copy the code

v-html

<div class="app"> <h2>{{link}}</h2> </h2> </div> <script SRC ="js/vue.js"></script> <script> const app = new vue ({el: '.app', data: {link: "< a href =" http://www.baidu.com "> baidu once < / a >",,}}); </script>Copy the code

v-text

The same as V-HTML, but it does not contain HTML, overwrites the entire contents of the tag, and is rarely used

v-pre

< h2 > {{message}} < / h2 > / / hello < h2 v - pre > {{message}} < / h2 > / / {{message}} const app = new Vue ({el: '# app, data: {message: 'Hello'}})Copy the code

v-cloak

The V-cloak attribute exists before vue is parsed. after it is parsed. it will be deleted.

2 seconds later, the vue is parsed. the v-cloak property exists but the page displays a red {{message}}.

<style> [v-cloak] { color: red; } </style> <div class="app" v-cloak> <h2>{{message}}</h2> </div> <script src="js/vue.js"></script> <script> SetTimeout () = > {const app = new Vue ({el: 'app', data: {message: 'departure,},}); }, 2000); </script>Copy the code

4 Binding Properties

Using V-bind for dynamic attribute binding, you can bind multiple attributes, as shown in the following example:

<div class="app"> <img src="{{url}}" alt="" /><! <img v-bind: SRC ="url" Alt ="" /> </div> <script SRC ="js/vue.js"></script> <script> const app = new vue ({el: '.app', data: { url: 'https://img.youpin.mi-img.com/shopmain/a599f17abb5f9ad7674f7a4dc72765cc.jpg', }, }); </script>Copy the code

V – bind binding class

Object syntax

Use the value of class as an object, adding the class attribute via the bool value of the key-value pair.

<style> .red { color: red; } </style> <div class="app"> <h2 v-bind:class="{ red: isRed, blue: IsBlue}">{{message}}</h2> <h2 V-bind :class="getClass()">{{message}}</h2> /* You can store objects in methods using */ <button v-on:click="btnClick()">getRed</button> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: }, methods: {btnClick: function () {this.isred =! this.isRed; }, getClass: function () { return { red: this.isRed, blue: this.isBlue }; ,}}}); </script>Copy the code

Array syntax

Arrays can be variables or strings. Array syntax is used sparingly.

<div class="app"> <h2 v-bind:class="[active,'line']">{{message}}</h2> <h2 v-bind:class="getClass()">{{message}}</h2> /* Via function call */ </div> <script SRC ="js/vue.js"></script> <script> const app = new vue ({el: '.app', data: {message: }, methods: {getClass: function () {return [this.active, 'line']; ,}}});Copy the code

V – bind binding style

When writing CSS property names such as font-size, you can use camel names (fontSize) or short lines (‘font-size’).

Object syntax

  • The key of the object is the CSS property name
  • The value of the object is the specified value assigned
<div class="app"> <h2 v-bind:style="{fontSize:'14px',color:finalColor}"> {{message}}</h2> </div> <script SRC ="js/vue.js"></script> <script> const app = new vue ({el: '.app', data: {message: 'takeoff ', finalColor: 'red',},}); </script>Copy the code

Array syntax (less used)

<div id="app"> <h2 :style="[Style1, Style2]">{{message}}</h2> <script src=".. /js/vue.js"></script> <script> const app = new vue ({el: '#app', data: {message: 'hello ', Style1: {backgroundColor: 'red' }, Style2: { fontSize: '100px' }, }, }); </script>Copy the code

5 Calculating attributes

The difference between computed and methods

  • Generally, methods need to be de-triggered (function calls), whereas computed is automatically triggered when changes in data are detected (attribute access)
  • Computed has caching capabilities, whereas Methods does not
<div class="app"> <h2>{{getSum()}}</h2> </div> <script src="js/vue.js"></script> <script> const app = new Vue({ el: '.app', data: {star: [{id: 0, id: 1, id: 2, id: 1}, price: 1}, data: {star: [{id: 0, id: 2, id: 1}, price: 1}, },}, methods: {getSum: function () {let sum = 0; for (let i = 0; i < this.star.length; i++) { sum += this.star[i].price; } return sum; ,}}}); </script>Copy the code