Vue Start Basics

EDITORIAL words

This article is a summary of individual learning process for future review and review memory. If something is misunderstood, I hope you can point out the amount, learn together and grow together.

What is 1. Vue

1.1 direct introduction

<!-- 开发版本，包含完整的警告和调试模式 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产版本，删除了警告，33.30KB min+gzip -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Constructor 1.2

Each Vue.js applications are created by constructing a function Vue Vue root instance start; when instantiating Vue, the options need to pass a object that can contain data, templates, mounting elements, methods, life cycle hook other options

var app = new Vue({
    el:"#app",    
    data:{
        message: ""
    },
    methods:{
        helloVue:function(){
            console.log("hello vue!")
        }
    }
})

• [the]
  • Parameters el, is an abbreviation for the element. el: "# app" label represents the mount id is "app" elements can also be used el: ". app", represents the mount tag class is "app" elements
• [data]
  • Vue parameter data indicates that the data object instances, v-text instructions associated with the html
• [methods]

  • Parametric methods represents an event processor

    Note that should not be used to define the function arrow function method (e.g., plus: () => this.a ++). The reason is a function of the arrow bound the context of the parent scope, so this will not be as desired point Vue instance, this.a will be undefined.

2. Vue instruction

• v-text (abbreviated as {{}} ) - for data connections inside an attribute value vue
• v-html-- corresponding to v-text, but may be parsed html language and other elements i.e. DOM
• v-on (abbreviated as @ event name ) - used to monitor events, such as click, keyup ...
• v-show-- used to hide components, the principle is to change the display property
• High v-if-- used to hide components, the principle is the direct delete elements in the DOM tree, so if the frequency of calls is high, the v-if consumption performance
• v-bind (abbreviated as : property name ) - the attribute value binding tag
• v-for-- for circulating assembly syntax v-for = "(item, index in list)"

• v-model-- for two-way binding, similar to global variables

  Examples of the instruction code portion

    <div id="app">
    <input type="button" value="添加" @click="addFood" />
    <input type="button" value="删除第一个" @click="removeFirst" />
    <input type="button" value="删除最后一个" @click="removeLast" />
  
    <ul>
        <li v-for="(item, index) in arr">{{ item }}</li>
    </ul>
    <h2 v-for="item in food" :title="item.name">{{ item.num }} : {{ item.name }}</h2>
  
    <input type="button" value="修改message" @click="setM" />
    <input type="text" v-model="message" @keyup.enter="getM" />
    <h2>{{ message }}</h2>
    </div>
  
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                arr:[1, 2, 3, 4, 5],
                food:[
                    {name: "新兰花", num: 1},
                    {name: "西红柿", num: 2}
                ],
                message: "双向绑定"
            },
            methods:{
                addFood: function () {
                    this.food.push({name: "番茄", num: 3});
                },
                removeLast:function () {
                    this.food.pop();
                },
                removeFirst:function () {
                    this.food.shift();
                },
                getM:function () {
                    alert(this.message);
                },
                setM:function () {
                    this.message = "我很帅"
                }
            }
  
        })
    </script>

3. vue + axios networking tools

3.1 get method

axios.get(url).then(function(response){}),function(err){}

3.2 post method

axios.post(url, parameter).then(function(response){}),function(err){}

3.3 Considerations

axios belong to the callback function, the callback function then (), the keyword this refers to the object is not to refer to the original object, so I can not get the data in the data. If the data needs to obtain the data, it is necessary to first save this object, for example:

<!-- axios在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

方法A.function(){ //  joke为data中的属性
console.log(this.joke)  //  这里的this和下面的this不同
axios.get("").then(function(){
console.log(this.joke)  //  最终会显示undefined
})

解决方法：var that = this //  在回调函数外面先把对象保存起来

}