写在前面的话

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

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/[email protected]"></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入门基础