First, the introduction and example of Vue framework

Introduce the Vue framework

The Vue framework is essentially a JS file

Vue. Js development environment version, code format is good, naming rules, suitable for study, learning code - vue.min.js production environment version, code without format, irregular naming, no newline, poor readingCopy the code

Vue format and instance

format

new Vue({
  el:"# id name"     
  data: {message:""    
  }
  methods:{}  
})
Copy the code

The root DOM element used by el:Vue instances, whose value is the ID attribute selector, controls the entire div object; Data: Data key. The value of the key is displayed on the page. Methods: function keys that define methods.

The instance

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_VUE Introduction case</title>
</head>
<body>
    <div id="app">
        <button @click="fnClick()">button</button><br>
        {{message}}
    </div>
    <script type="text/javascript" src=".. /js/vue.min.js"></script>
    <script type="text/javascript">
        
        new Vue({
            el:"#app".data: {message:"hello world"
            },
            methods: {fnClick:function () {
                    alert("-- -- -- -- -- -- --")}}})</script>
</body>
</html>
Copy the code

Note: Fetch the value of the vUE object data {{key name}}

Common Vue directives

Instruction names meaning
v-text Data plain text
v-html The data recognizes the label
v-bind The binding property, abbreviated as a colon:
v-if No Render the HTML page content
v-else Whether to render HTML page content
v-show Conditional rendering using Vue, already rendered, whether to display
v-for traverse
v-on Event binding, @ for short
v-model Two-way data binding for the value property of a form item

V – – HTML text and v

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04 _v - text commands</title>
</head>
<body>
    <div id="app">
        <! The following two results are the same -->
        <div>{{city}}</div>
        <div v-text="city"></div>
        <! -- V-text data plain text V-HTML tag valid -->
        <div v-html="city"></div>
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app".data: {city:
 Shenzhen 
}})</script>
</body>
</html>
Copy the code

Results:

V-bind Indicates the binding attribute(short 🙂

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05 - v - the bind command</title>
</head>
<body>
    <div id="app">
        <! -- V-bind simplifies writing: -->
        <font :color="color" size="+ 5">Text color</font><br>
        <input type="text" :value="age">
    </div>

    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app".data: {color:"blue".age:30}})</script>
</body>
</html>
Copy the code

V – if and v – else

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_Vue instructions V-if and V-else</title>
</head>
<body>
    <div id="app">
        <! --Vue's v-if command determines whether to display -->
        <img v-if="flag" src=".. /img/1.jpg" width="200" height="180">
        <img v-else src=".. /img/2.jpg">
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app".data: {flag:true}})</script>
</body>
</html>
Copy the code

V – show commands

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_vue command V-show</title>
</head>
<body>
    <div id="app">
        <! --vue's v-show command determines whether to display -->
        <img v-show="flag" src=".. /img/1.jpg" >
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app".data: {flag:true}})</script>
</body>
</html>
Copy the code

V – for instructions

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>The 08_vue instruction v-for</title>
</head>
<body>
    <div id="app">
        <! -- v-for traversal v-for directive property, element name in array Fetch array traversal elements, interpolation expression -->
        <div v-for="fruit in fruitList">{{fruit}}</div>
        <hr/>
        <! --for instruction, traverses an array of objects, object name in array -->
        <div v-for="employee in employeeList">
            {{employee.name}}
            {{employee.id}}
        </div>
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script TYPE="text/javascript">
        new Vue({
            el:"#app".data: {employeeList:[
                    {name:"Zhang".id:1},
                    {name:"Bill".id:2}].fruitList: ["Banana".The word "apple"."Watermelon"]}})</script>
</body>
</html>
Copy the code

V-on event binding(abbreviated @)

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09 _vue events</title>
</head>
<body>
<! - bound for the button click event: v - on: the event name = "function" event binding shorthand: @ event name = "function" -- >
        <div id="app">
            <div v-text="message"></div>

            <button type="button" @click="fn1()">button</button>
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            "el": "#app"."data": {
                "message": "Hello world"
            },
            "methods": {
                // Vue functions are declared in methods
                fn1() {
                    alert("I got clicked...")}}})</script>
</body>
</html>
Copy the code

Bubbling of events:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_Vue event bubbling</title>
</head>
<body>
    <div id="app">
        <div @click="fnOuter()" style="background: bisque; width: 300px; height: 200px">
            <! < [email protected] ="doThis"></a>-->
            <div @click.stop="fnClick()" style="background: cadetblue; width: 200px; height: 120px"></div>
        </div>
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app".data: {},methods: {fnOuter:function () {
                   console.log("Click on the outer border")},// Prevent events from bubbling
                fnClick:function () {
                    console.log("Click on the inside border")}}})</script>
</body>
</html>
Copy the code

V-model bidirectional binding

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Two-way binding of 11_Vue data</title>
</head>
<body>
    <div id="app">
        <! --Vue directive v-model data model text box data, value attribute determines two-way binding means that one changes, the other also changes -->User:<input type="text" v-model="username"><br>Password:<input type="text" v-model="password"><br>
        <button @click="changeText()">Change the text box to achieve bidirectional binding</button><br>
        <button @click="changeVue()">Change Vue data to implement bidirectional binding</button><br>


    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        new Vue({
            el:"#app".data: {username:"tom".password:"123"
            },
            methods: {changeVue:function () {
                    this.username="white";
                    this.password="123456"
                },
                changeText:function () {
                    console.log(this.username+"="+this.password); }}})</script>
</body>
</html>
Copy the code

Vue Listening property (Watch)

Based on the following code, we want to modify message when name and age change, and then we need to listen for name or age and call the corresponding function

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>12_Vue listener properties</title>
</head>
<body>
    <div id="app">
        <p>Name: {{name}}</p>
        <p>Age: {{age}}</p>Name:<input type="text" v-model="name"/><br/>Age:<input type="text" v-model="age"/><br/>
        <p>Personal information: {{message}}</p>
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app".data: {name:"Zhang".age:12.message:"Zhang SAN's 12"
            },
            "watch": {"name":function (newName) {
                    this.message=newName+""+this.age;

                },
                "age":function (newAge) {
                this.message=this.name+""+newAge; }}})</script>
</body>
</html>
Copy the code

Interpolation expression

Interpolation is used to get data from Vue objects, simple calculations, ternary operatorsCopy the code
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_ Interpolation expression</title>
</head>
<body>
   
    <div id="app">
        {{studentInfo}}<br>
        {{number-1}}<br>{{number==10?" Equals ":" does not equal "}}</div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            el:"#app".data: {message:"Interpolation".studentInfo:"Students are back in school.".number:"10"}});</script>
</body>
</html>
Copy the code

Vue life cycle

Note the difference between Create and Mounted

Dig deeper and recommend these two blogs :(Segmentfault.com/a/119000000…) (www.jianshu.com/p/672e967e2…)

The instance

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>13_Vue life cycle</title>
</head>
<body>
    <div id="app">
        <div id="d1">{{city}}</div>
    </div>
    <script src=".. /js/vue.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        new Vue({
            "el":"#app"."data": {"city":"Wuhan"
            },
            //Vue's hook functions allow us to execute code at specific stages of the Vue lifecycle
            beforeCreate(){
                // Outputs the value of the data model city
                console.log("Get city in the beforeCreate hook function :"+this.city)
            },
            created(){
                // Outputs the value of the data model city
                console.log("Get city in the created hook function :"+this.city)
            },

            beforeMount(){
                // Execute before the virtual view replaces the real view, so that the real view does not display data from the data model
                console.log(Get the contents of the real view in the beforeMount hook function:+document.getElementById("d1").innerHTML)
            },
            mounted(){
                // Execute after the virtual view replaces the real view, so the real view will display the data model data
                console.log([mounted hook] Retrieve the contents of the real view:+document.getElementById("d1").innerHTML)
            },


        })
    </script>
</body>
</html>
Copy the code

The results of