写在前面的话

本文章是个人学习过程的总结，以便日后的回顾和复习记忆。如果有什么地方理解错误，希望大家额可以指出，一起学习共同成长。

1. Vue是什么

1.1 直接引入

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

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

1.2 构造器

每个Vue.js应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的；在实例化Vue时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项

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

• [el]
  • 参数el，是element的缩写。el:"#app"表示挂载标签为id为"app"的元素，也可以用el:".app", 表示挂载标签中class为"app"的元素
• [data]
  • 参数data表示Vue实例的数据对象，在html中用指令v-text关联
• [methods]

  • 参数methods表示事件处理器

    注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

2. Vue指令

• v-text（简写为{{}}）——其用于连接vue里面的data的属性值
• v-html——相当于v-text，但可以解析html语言即DOM元素等
• v-on（简写为@事件名）——用于监听事件，如click、keyup...
• v-show——用于隐藏组件，原理是改变display属性
• v-if——用于隐藏组件，原理是直接删除DOM树的元素，故若调用的频次高，则v-if消耗的性能较高
• v-bind（简写为：属性名）——绑定标签的属性值
• v-for——用于循环组件，语法为v-for="（item, index in list）"

• v-model——用于双向绑定，类似全局变量

  部分指令的实例代码

    <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网络工具

3.1 get方法

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

3.2 post方法

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

3.3 注意事项

axios属于回调函数，在回调函数then()中，关键字this指代的对象不是原先指代的对象，所以无法获取data中的数据。若需要获取data中的数据，则需要先把this对象存起来，例如：

<!-- 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 //  在回调函数外面先把对象保存起来

}

Vue入门基础

原文：https://www.cnblogs.com/zhengzejun666/p/12149601.html