Vue Beginner's Guide: Environment Building and Getting Started

Initial Vue
Building a Vue development environment
Creating a Vue Instance
Vue Template Syntax
Vue Data Binding
Two ways to write el-data
MVVM Model
Vue Data Proxy
Event handling in Vue
Summarize

Vue official website: https://cn.vuejs.org

insert image description here

Initial Vue

What is Vue?

A progressive JavaScript framework for building user interfaces

Vue can be applied layer by layer from bottom to top

Simple applications: only a small and lightweight core library is needed

Complex use: various Vue plug-ins can be introduced

insert image description here

Features of Vue:

1. Componentized mode to improve code reuse and better maintain code

2. Declarative coding: no need to directly operate DOM, improving development efficiency

3. Use virtual DOM + Diff algorithm to reuse DOM nodes

Building a Vue development environment

1. Download vue.js

insert image description here

2. Create a project and import idea

insert image description here

3. Download from the official website: https://github.com/vuejs/devtools/tree/main

And use Vue.js devtools

insert image description here

Note: After this, if the web page you open is written in Vue, the Vue logo at the top will turn green.

The above Vue environment is set up

Creating a Vue Instance

1. To make Vue work, you must create a Vue instance and pass in a configuration object

2. The code in the root container still complies with the HTML specification, but is mixed with some special Vue syntax

3. The code in the root container is called [Vue template]

4. Vue instances and containers correspond one to one

5. There is only one Vue instance in real development, and it will be used together with components

6 . The xxx in {xxx}} needs to be written as a js expression, and xxx can automatically read all the attributes in data.

7. Once the data in data changes, the place where the data is used in the page will also be automatically changed

Pay attention to the difference between js expressions and js codes

1. Expression: An expression generates a value that can be placed anywhere a value is needed.

(1)a (2)a+b (3)demo(1) (4)x===y?'a':'b'

2. js code (statement)

(1)if(){} (2)for(){}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Initial Vue</title>
    <!--Introduce Vue development version-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--Prepare the container to provide a template for Vue to display the results of Vue-->
<div id="root">
    <!--{{js expression}} interpolation syntax-->
    <h1>Hello!{{name.toUpperCase()}},{{address}}</h1>
</div>
    <script type="text/javascript">
        Vue.config.productionTip=false //To prevent Vue from generating production tips at startup.

       //Create a vue instance new Vue({
        //el is used to determine which container the current Vue instance serves. The value is usually a css selector string el:'#root'.  
            //data is used to store data for use by the container specified by el, and the value is temporarily written as an object.
            data:{ 
                name:"The south wind knows my intention",
                address:"Shanghai"
            }
        })
    </script>
</body>
</html>

Running results:

insert image description here

Vue Template Syntax

There are two main categories of Vue template syntax

1. Interpolation syntax:

Function: used to parse the tag body content

Writing method: {xxx}}, xxx is a js expression, and all attributes in data can be directly read

2. Command syntax:

Function: used to parse tags (including tag attributes, tag body content, binding events...)

For example: v-bind:href="xxx" or abbreviated as: href="xxx", xxx also needs to write a js expression and can directly read all the attributes in data

Note: There are many instructions in Vue, and they are all in the form of: v-???. Here we just take v-bind as an example

<!--Prepare the container-->
<div id="root">
  <h1>Interpolation Syntax</h1>
  <h3>Hello, {{name}}</h3>
  <hr/>
  <h1>Command Syntax</h1>
  <!--Bind url as expression-->
  <a v-bind:href="school.url.toUpperCase()" x="hello">Go to {{school.name}}</a>
 <a :href="url" x="hello">Go to {{name2}}</a>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false //To prevent Vue from generating production tips at startup.
  new Vue({
    el:'#root',
    data:{
      name:'Southern Wind Knows My Intentions',
      school:
        name: 'csdn',
        url:'https://blog.csdn.net/weixin_50823456?spm=1000.2115.3001.5343',
      }
    }
  })
</script>

Running results:

insert image description here

Vue Data Binding

There are two ways of data binding in Vue:

1. One-way binding (v-bind): data can only flow to the page

2. Two-way binding (v-model): Data can flow not only from data to page but also from page to data

Remark:

1. Two-way binding is generally applied to form elements (such as: input, select, etc.)

2. v-model:value can be abbreviated as v-model, because the default collection of v-model is value value

<!--Prepare a container-->
<div id="root">
    <!--Normal writing-->
<!-- One-way data binding: <input type="text" v-bind:value="name"><br>
  Two-way data binding: <input type="text" v-model:value="name"><br>-->
    <!--Abbreviation-->
    One-way data binding: <input type="text" :value="name"><br>
    Two-way data binding: <input type="text" v-model="name"><br>
    <!--The following code is wrong: v-model can only be applied to form elements (input elements)-->
    <h2 v-model:x="name">Hello</h2>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  new Vue({
    el:'#root',
    data:{
      name:'The South Wind Knows My Intentions'
    }
  })
 </script>

Running results:

insert image description here

Two ways to write el-data

Two ways to write data and el

1. There are two ways to write el

(1)Configure el attributes when creating new Vue

(2) Create a Vue instance first, then specify the value of el through vm.$mount('#root')

2. There are two ways to write data

(1) Object-oriented

(2) Functional

How to choose: Currently, any writing method is fine. When learning components in the future, data must be written in a functional way, otherwise an error will be reported.

3. An important principle

For functions managed by Vue, you must not write arrow functions. Once you write an arrow function, this is no longer a Vue instance.

<!--Prepare the container-->
<div id="root">
  <h1>Hello, {{name}}</h1>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  //Two ways to write el const v=new Vue({
    //el:'#root', //The first way to write data:{
      name:'Shang Silicon Valley'
    }
  })
  console.log(v)
  v.$mount('#root') //The second way of writing //Two ways of writing data const v=new Vue({
    el:'#root',
    //The first way to write data is object-style /*data:{
      name:'Shang Silicon Valley'
    }*/

    //The second way to write data: functional data(){
      console.log('@@@',this) //This is the Vue instance object return{
        name:'The South Wind Knows My Intentions'
      }
    }
  })
</script>

MVVM Model

1. M: Model: data in data

2. V: View: Template code

3. VM: View Model: Vue instance

Observations:

1. All attributes in data finally appear in vm

2. All properties of vm and all properties of Vue prototype can be used directly in Vue template

<!--Prepare the container-->
<div id="root">
  <!--view-->
  <h1>School name:{{name}}</h1>
  <h1>School address:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  const vm = new Vue({ //viewmodel
    el:'#root',
    data:{
      /*model*/
      name:'South Wind',
      address:'Changsha'
    }
  })
  console.log(vm)
</script>

Vue Data Proxy

Operation (read, write) of properties in another object through an object proxy

1. Data proxy in Vue:

Use the vm object to proxy the operation (read and write) of the attributes in the data object

2. Benefits of Data Proxy in Vue

More convenient operation of data in data

3. Basic principles

Add all the properties in the data object to vm through Object.defineProperty()

Assign a getter and setter to each property added to the vm

Operate (read, write) the corresponding attributes in data inside getter and setter

<!--Prepare the container-->
<div id="root">
    <!--view-->
    <h1>School name:{{name}}</h1>
    <h1>School address:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //Prevent Vue from generating production tips at startup const vm=new Vue({
        el:'#root',
        data:{
            name:'South Wind',
            address:'Changsha'
        }
    })
</script>

Event handling in Vue

Basic usage of events:

1. Use v-on:xxx or @xxx to bind events where xxx is the event name

2. The event callback needs to be configured in the methods object and will eventually be on the vm

3. The function configured in methods does not require an arrow function, otherwise this will not be vm

4. The functions configured in methods are all functions managed by Vue, and this points to vm or component instance object

5. @click="demo" and @click="demo($event)" have the same effect, but the latter can pass parameters

<!--Prepare the container-->
<div id="root">
    <h1>Welcome to Shang Silicon Valley to study</h1>
    <!--<button v-on:click="showInfo">Click me for information</button>-->
    <button @click="showInfo1">Click me for info 1</button>
    <button @click="showInfo2(66,$event)">Click me for info 2</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false //Prevent Vue from generating production tips at startup new Vue({
        el:'#root',
        data: {
            name: 'Shang Silicon Valley'
        },
        methods:{
            showInfo1(event){
               /* console.log(event.target.innerHTML)
               console.log(this) //This is vm*/
                alert("Hello classmate 1")
            },
            showInfo2(number,a){
                /* console.log(event.target.innerHTML)
                console.log(this) //This is vm*/
                alert("Hello classmate 2")
                console.log(number,a)
            }
        }
        })
        </script>

insert image description here

Summarize

This is the end of this article about Vue's Beginner's Guide to Environment Setup and Getting Started. For more relevant Vue environment setup and getting started content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Vue Vuex builds vuex environment and vuex sum case sharing
Detailed explanation of Vuex environment
Detailed summary of Vue project environment construction
Build a Vue development environment
Simple tutorial on setting up vue environment
Vue2.0 from scratch_Environment construction steps
Detailed explanation of the simplest strategy for setting up a vue.js development environment
Step-by-step guide to build and install a Windows-based Vue.js runtime environment
Tutorial on setting up vue.js development environment
Vue project environment construction

<<: Detailed explanation of the reason why the MySQL 5.7 slow query log time is 8 hours behind the system time

>>: nginx+tomcat example of accessing the project through the domain name