前端之VUE.js学习

安装和引入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

基础

1. el：挂载点

   1. el是用来设置Vue实例挂载（管理）的元素
   2. Vue会管理el选项命中的元素及其内部的后代元素
   3. 可以使用其他的选择器,但是建议使用ID选择器
   4. 可以使用其他的双标签,不能使用HTML和BODY

2. data数据对象

   1. Vue中用到的数据定义在data中
   2. data中可以写复杂类型的数据
   3. 渲染复杂类型数据时,遵守js的语法即可

3. 本地应用

   1. 方法中通过this,关键字获取data中的数据

   2. 内容绑定,事件绑定

   3. v-text：

      1. v-text指令的作用是:设置标签的内容(textContent)
      2. 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
      3. 内部支持写表达式

   4. v-html:

      1. v-html指令的作用是:设置元素的innerHTML
      2. 内容中有html结构会被解析为标签
      3. v-text指令无论内容是什么,只会解析为文本
      4. 解析文本使用v-text,需要解析html结构使用v-html

   5. v-on

      1. v-on指令的作用是:为元素绑定事件
      2. 事件名不需要写on v-on
      3. 指令可以简写为@
      4. 绑定的方法定义在methods属性中
      5. 方法内部通过this关键字可以访问定义在data中数据

   6. 显示切换,属性绑定

   7. v-show

      1. v-show指令的作用是:根据真假切换元素的显示状态原理是修改元素的display,实现显示隐藏
      2. 指令后面的内容,最终都会解析为布尔值
      3. 值为true元素显示,值为false元素隐藏
      4. 数据改变之后,对应元素的显示状态会同步更新

   8. v-if

      1. v-if指令的作用是:根据表达式的真假切换元素的显示状态
      2. 本质是通过操纵dom元素来切换显示状态
      3. 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
      4. 频繁的切换v-show,反之使用v-if,前者的切换消耗小

   9. v-bind

      1. v-bind指令的作用是:为元素绑定属性
      2. 完整写法是 v-bind:属性名
      3. 简写的话可以直接省略v-bind,只保留 :属性名 v-bind
      4. 需要动态的增删class建议使用对象的方式

   10. 列表循环,表单元素绑定

       1. v-for
          1. v-for指令的作用是:根据数据生成列表结构
          2. 数组经常和v-for结合使用 v-for
          3. 语法是( item,index ) in 数据
          4. item 和 index 可以结合其他指令一起使用
          5. 数组长度的更新会同步到页面上,是响应式的
       2. v-on补充
          1. 事件修饰符：https://cn.vuejs.org/v2/api/#v-on
          2. 事件绑定的方法写成函数调用的形式，可以传入自定义参数
          3. 定义方法时需要定义形参来接收传入的实参
          4. 事件的后面跟上 .修饰符 可以对事件进行限制
          5. .enter 可以限制触发的按键为回车
          6. 事件修饰符有多种
       3. v-model
          1. v-model指令的作用是便捷的设置和获取表单元素的值
          2. 绑定的数据会和表单元素值相关联
          3. 绑定的数据←→表单元素的值

   11. 网络应用

       1. axios网络请求库： https://github.com/axios/axios

           <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
          

          1. 请求

              <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
                 axios.get(地址?key=value&key2=values).then(function(response){},function(err){})     
                 axios.post(地址,{key:value,key2:value2}).then(function(response){},function(err){})
             

          2. 总结：

             1. axios必须先导入才可以使用
             2. 使用get或post方法即可发送对应的请求
             3. then方法中的回调函数会在请求成功或失败时触发
             4. 通过回调函数的形参可以获取响应内容,或错误信息

       2. axios + vue

          1. axios回调函数中的this已经改变,无法访问到data中数据
          2. 把this保存起来,回调函数中直接使用保存的this即可
          3. 和本地应用的最大区别就是改变了数据来源