What is a Vue

A set of progressive frameworks for building user interfaces. What is progressive?

Layer by layer, do things in the form of peeling Onions, such as declarative rendering at first, and then other parts of the Vue as the business gets more complex, layer by layer, like a combination of ideas.

The installation

Imported directly using the 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Copy the code

Node_modules is installed via NPM

npm i vue
Copy the code

Realize the Hello World

  • The View layer, which uses the HTML class, uses the {{}} syntax sugar, and the contents of the View to be displayed are written inside the double curly braces
<div id="app">{{msg}}</div>
Copy the code
  • The logic layer, which writes processing logic and presents data
const app = new Vue({
    el:'#app'.// Create a connection between the view layer and the logic layer
    data: {msg:'hello world'}})Copy the code

The MVVM framework

Just mentioned the View layer and the logic layer (model layer), so what is the MVVM framework?

The MVVM framework is divided into three layers, namely the View layer, the Model layer, and the ViewModel layer, and the View layer is the DOM element that we write, which is the View that is presented, and the Model layer is the JavaScript object that we write, which is the logic of the data processing, So the ViewModel layer is actually Vue. Vue helps us to make a two-way binding between the view and the data. When we modify the data, the view changes, and similarly, when the view changes, the data changes. That’s how we’re going to manipulate data, drive view changes through data changes.

Basic grammar

Interpolate the V-bind attribute

<div id="app">
    {{msg}}
    <div v-bind:test-id="testId"></div>
</div>
<script>
    const app = new Vue({
        el:'#app'.data: {msg:'hello world'.testId:1}})</script>
Copy the code

In the command, v-bind:test-id=”testId” can be translated into :test-id=”testId”.

Note: Js expressions are supported for both {{}} text interpolation and v-bind interpolation

V-on Event processing

<div id="app">
    {{msg}}
    <button v-on:click="handleClick(1, $event)">click</button>
</div>
<script>
    const app = new Vue({
        el:'#app'.data: {msg:'hello world'
        },
        methods: {handleClick(type, e){
                console.log(type, e); }}})</script>
Copy the code

Where v-on:click=”handleClick” can be short to @click=”handleClick” and the function can be called, parameters in v-on:click=”handleClick(1)” can be received in the function, You can also get the current event object via $event.

Decorator:

  • .stop – Call event.stopPropagation() to prevent bubbling of the current event to the ancestor element.
  • .prevent – Call event.preventDefault() to cancel the default action for the event.
  • .capture – Capture mode is used when adding event listeners.
  • .self – The callback is triggered only if the event is triggered from the listener bound element itself.
  • . {keyCode | keyAlias} – only events from the specific trigger callback key trigger.
  • .native – Listens for the native event of the component root element.
  • .once – Only one callback is triggered.
  • .left – (2.2.0) only triggered when the left mouse button is clicked.
  • .right – (2.2.0) is triggered only when the right mouse button is clicked.
  • .middle – (2.2.0) Triggered only when the middle mouse button is clicked.
  • .passive – (2.3.0) Add a listener in {passive: true} mode

Computed attribute computed

Using names to express the intent of the program, and the difference between methods :(1) in the call time do not need parentheses (2) calculated properties are cached, avoid double calculation, in the call method each call will be calculated once, and calculated properties only change when the dependent properties change

Characteristics of calculated attributes:

  • readability
  • The cache
  • Many-to-one, a calculated property can depend on multiple relationships
<div id="app">
    {{ message }}
    <p>{{reverseMsg + reverseMsg}}</p>
    <p>Call the method {{handleClick()}}</p>
    <button type="button" @click="handleClick()">click</button>
</div>

<script>
    const app = new Vue({
      el: '#app'.data: {
        message: 'Hello Vue! '.count:1
      },
      computed: {
            reverseMsg() {
                    console.log('Call calculated properties');
                    return this.message.split(' ').reverse().join(' ') + this.count; }},methods: {handleClick(){
                    console.log('Call method');
                    return this.message.split(' ').reverse().join(' ') + this.count; }}})</script>
Copy the code

The code above makes two calls to evaluate the property reverseMsg, but the console prints output only once because of caching, and the method prints a message on the console each time it is called

Watch

Vue provides the function of listening for data to drive specific operations when data changes. The official Vue document explains that this method is recommended when asynchronous or expensive operations need to be performed when data changes.

const app = new Vue({
  el: '#app'.data: {
    message: 'Hello Vue! '.count:1
  },
  methods: {
    handleClick() {
        this.count++; }},watch: {
    count(newValue, oldValue) {// When the count changes, perform the following operations to obtain the value before and after the change
        console.log('oldValue', oldValue);
        console.log('newValue', newValue);
        console.log('count is changed');
        // Here you can do some operations to request the back end.}}})Copy the code

Watch can also be used when there are multiple attributes that depend on a particular attribute (for example, foo and bar both depend on count)

watch: {
    count(newValue, oldValue) {
        console.log('oldValue', oldValue);
        console.log('newValue', newValue);
        console.log('count is changed');
        this.foo = 'foo' + newValue;
        this.bar = 'bar'+ newValue; }}Copy the code

It’s written as an object in a handler function

watch:{
    count: {handler(newValue, oldValue){
            console.log('oldValue', oldValue);
            console.log('newValue', newValue);
            console.log('count is changed');
            this.foo = 'foo' + newValue;
            this.bar = 'bar' + newValue;
        },
        immediate:true // The callback is immediately triggered with the current value of the expression}}Copy the code

Object listening and deep listening. If it is not deep listening, it can only listen for the change of the whole object, but not for the change of a property in the object.

const app = new Vue({
    el:'#app'.data: {user: {name:'hjj'.age:18}},watch: {user: {handler(newVal, oldVal){
                console.log(newVal);
            },
            deep:true // Deep listening, when a property of an object changes
        }
        // You can also listen on a property of an object
        'user.name': {handler(newVal, oldVal){
                console.log('user.name is changed');
                console.log(newVal); }}}})Copy the code

Conditions apply colours to a drawing

  • v-if
  • v-else-if
  • v-else
<div id="app">
    <div v-if="age<18">A minor</div>
    <div v-else-if="age=18">18 years of age</div>
    <div v-else>The adult</div>
</div>

<script>
    const app = new Vue({
      el: '#app'.data: {
        age:18}})</script>
Copy the code

V-if vs v-show If it is V-if, it will not render when the condition is not met; V-show is controlled by the style style

The list of rendering

List rendering of arrays

<div id="app">
    <ul>
        <li v-for="(item, index) in users">{{index}} -- {{item.name}} -- {{item.age}}</li>
    </ul>
</div>

<script>
const app = new Vue({
  el: '#app'.data: {
    users:[
        {
            id:1.name:'hhh'.age:18
        },
        {
            id:2.name:'jjj'.age:30}]}})</script>
Copy the code

Render a list of objects

<div id="app">
    <ul>
        <li v-for="(val, key, index) in userInfo">{{index}} -- {{key}} -- {{val.name}} -- {{val.age}}</li>
    </ul>
</div>

<script>
const app = new Vue({
  el: '#app'.data: {
    userInfo: {1: {id:1.name:'hhh'.age:18
        },
        2: {id:2.name:'jjj'.age:30}}}})</script>
Copy the code

class & style

class

<style>
    .red{
        color: red;
    }

    .fontSize{
        font-size: 60px;
    }
</style>

<div id="app">
    {{msg}}
    <div :class="classes">foo</div>
</div>
<script>
    const app = new Vue({
        el:'#app'.data: {msg:'hello Vue'.count:1.// 1. Object form
            // classes:{
            // red:false
            // },
            // 2
            // classes:['red']
            // 3
            // classes:['red', {fontSize:true}]
        },
        // 4. Calculate attributes
        computed: {
            classes() {
                return ['red',
                    {
                        fontSize:this.count == 1}]}},})</script>
Copy the code

style

<div id="app">
    {{msg}}
    <div :style="styleInfo">foo</div>
</div>
<script>
    const app = new Vue({
        el:'#app'.data: {msg:'hello Vue'.count:1.styleInfo: {color:"blue".fontSize:"100px"}}})</script>
Copy the code

Form input binding

v-model

<div id="app">
    <input v-model="inputVal"/>{{inputVal}}
</div>
<script>
    const app = new Vue({
        el:'#app'.data: {inputVal:' '}})</script>
Copy the code