Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写

基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上

官网：https://cn.vuejs.org

Vue快速入门

1.新建HTNL页面，引入Vue.js文件

2.在JS代码区域，创建Vue核心对象，进行数据绑定

其中data可以简写

注;Vue核心对象是一个JSON

el代表要对哪个区域的代码进行控制，需要写入一个选择器

data代表模型数据，其内部的模型可以看作是变量，之后在选择器选中的代码中可以使用模型，并且可以值可以随着模型值的变化而实时变化

3.编写视图

注：在html中，如果想要直接使用Vue中的模型，需要使用双大括号将模型包裹

Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义

常用指令:

v-bind

v-bind的作用是为原生的HTML标签绑定属性值，即绑定一个模型

v-bind可以省略，即只在属性前加一个：可以起到相同的作用

v-model

v-model可以为表单元素创建一个双向数据绑定，即该元素中值的改变，可以同时改变模型的值，模型值的改变也可以同步影响元素的值。

v-on

v-on可以为HTML标签绑定事件，在触发该事件后执行响应的方法，该方法需要在Vue核心对象中

v-on可以使用一个@代替，可以起到相同效果，且show()方法的括号若无参数可以省略

在Vue中，所有的方法需要放在methods中

v-if，v-else，v-else-if

v-if，v-else，v-else-if类似Java中的if语句，可以条件性的渲染某元素，判定为true时渲染，否则不渲染

如图，count为一个模型，当count为3时，div1展示;为2时，div2展示;当两个条件均不满足时，div3展示

v-show

v-show可以根据条件展示某元素，其和v-if的区别在于：

v-if若不满足则在源码中不存在

v-show若不满足条件，仍会在源码中出现，但是会将display属性的值设为none

v-for

v-for可以进行列表渲染，遍历容器的元素或者对象的属性

如图，addrs为遍历的容器，addr为遍历到的元素的名称，可以自由设定

v-for存在索引，如图，需要将遍历到的元素的名称和索引名称用括号包裹，前面的代表元素，后面的代表索引，索引从0开始

v-for遍历到的元素也可以通过v-bind在标签的属性上使用，如图，元素phone也可以变化的为label属性赋值

Vue生命周期

Vue生命周期有八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

mounted

mounted:挂载完成，Vue初始化成功，HTML页面渲染成功，接下来一般需要发送异步请求，加载数据

该方法的设定需要在Vue核心对象中

其同样是经过简化后的写法，原写法如下：

Vue核心对象的各种属性

el

el:用于指定该Vue对象在哪个标签内部生效

一般可以用div标签（无具体用处），为div标签指定id（如app），然后再el中使用"#app"来指定div，这样所有在该div内的html代码都可以受到Vue对象的作用

method

method：其内部是各种方法，可以在其他方法或者html代码中调用

data

data：其内部是各种模型数据，可以实时发生变化，也可以装一些JSON数据

watch

watch：用于监听data中指定数据的变化，然后触发事件

可以在其内部指定某个data中的数据，在该数据发生变化的时候就会触发对应的function事件

格式：

watch:{

"name":function(){

对应事件的代码

}

}

其中name是data中的一个模型数据

注意事项

1.this对象的指定

当在方法中使用axios发送异步请求时，axios内部的this指定的是windows对象，而不是Vue对象，这会导致无法使用this来获取Vue中data的模型，可以在axios外定义一个变量并让其等于Vue对象，如下

new Vue({
  el:"#app"
  data(){
    return{
      brands:[]
    }
  },
  mounted(){
    //定义一个变量，让其等于Vue对象
    var _this = this;

    axios({
      method:"get"
      url:""
    }).then(function(resp){
      _this.brands = resp.data;
    })
  }
})

亦或者使用箭头来代替function，类似于Java的Lamda表达式

new Vue({
  el:"#app"
  data(){
    return{
      brands:[]
    }
  },
  mounted(){
    axios({
      method:"get"
      url:""
    }).then(resp =>{
      this.brands = resp.data;
    })
  }
})

2.mounted的使用

在mounted中我们可以使用this.xxx来调用methods中的方法，但是在mothods中的方法我们是不能调用mounted的（会不生效），因此我们应该将所有方法写在methods中，然后再mounted中调用初始化方法，这样初始化方法在后续中就可以被其他方法调用