Vue

Vue基础，快速入门。axios回调函数中的this已经改变,无法访问到data中数据； 和本地应用的最大区别就是改变了数据来源，因为有一部分数据来自网络。

Vue

• Vue基础
  • Vue简介
    • 1. JavaScript框架
    • 2. 简化Dom操作
    • 3. 响应式数据驱动
    • 文档传送门
      • https://cn.vuejs.org
  • 第一个Vue程序
    • 导入开发版本的Vue.js
    • 创建Vue实例对象, 设置el属性和data属性
    • 使用简洁的模板语法把数据渲染到页面上
  • el:挂载点
    • eg
      • <div id="app"> {{ message }} </div>
    • 总结
      • Vue实例的作用范围是什么呢？
        • Vue会管理el选项命中的元素及其内部的后代元素
      • 是否可以使用其他的选择器？
        • 可以使用其他的选择器,但是建议使用ID选择器
      • 是否可以设置其他的dom元素呢？
        • 可以使用其他的双标签,不能使用HTML和BODY
      • 作用
        • el是用来设置Vue实例挂载（管理）的元素
  • data:数据对象
    • eg
      • <div id="app"> {{ message }} </div>
    • 总结
      • Vue中用到的数据定义在data中
      • data中可以写复杂类型的数据
      • 渲染复杂类型数据时,遵守js的语法即可
• 本地应用
  • 1. 内容绑定,事件绑定
    • v-text
      • 设置标签的文本值(textContent)
      • eg
        • <div id="app"> <h2 v-text="message+’!’"></h2> <h2>深圳{{ message + "! "}}</h2> </div>
          • var app = new Vue({ el:"#app", data:{ message:"黑马程序员" } })
      • 总结
        • v-text指令的作用是:设置标签的内容(textContent)
        • 默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容
        • 内部支持写表达式
    • v-html
      • 设置标签的innerHTML
      • eg
        • • var app = new Vue({ el:"#app", data:{ // content:"黑马程序员" content:"<a href='#'>黑马程序员</a>" } })
      • 总结
        • v-html指令的作用是:设置元素的innerHTML
        • 内容中有html结构会被解析为标签
        • v-text指令无论内容是什么,只会解析为文本
        • 解析文本使用v-text,需要解析html结构使用v-html
    • v-on基础
      • 为元素绑定事件
      • eg
        • • var app = new Vue({ el:"#app", methods:{ doIt:function(){ // 逻辑 } } })
      • 总结
        • v-on指令的作用是:为元素绑定事件
        • 事件名不需要写on， 指令可以简写为@
        • 绑定的方法定义在methods属性中
        • 方法内部通过this关键字可以访问定义在data中数据
  • 2. 显示切换,属性绑定
    • v-show
      • 根据表达值的真假,切换元素的显示和隐藏
      • eg
        • <div id="app"> <img src="地址" v-show="true"> <img src="地址" v-show=“isShow"> <img src="地址" v-show=“age>=18"> </div>
          • var app = new Vue({ el:"#app", data:{ isShow:false, age:16 } })
      • 总结
        • v-show指令的作用是:根据真假切换元素的显示状态
        • 原理是修改元素的display,实现显示隐藏
        • 指令后面的内容,最终都会解析为布尔值
        • 值为true元素显示,值为false元素隐藏
        • 数据改变之后,对应元素的显示状态会同步更新
    • v-if
      • 根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)
      • eg
        • 我是一个p标签 我是一个p标签 我是一个p标签
          • var app = new Vue({ el:"#app", data:{ isShow:false } })
      • 总结
        • v-if指令的作用是:根据表达式的真假切换元素的显示状态
        • 本质是通过操纵dom元素来切换显示状态
        • 表达式的值为true,元素存在于dom树中,为false,从dom树中移除
        • 频繁的切换v-show,反之使用v-if,前者的切换消耗小
    • v-bind
      • 设置元素的属性(比如:src,title,class)
      • eg
        • <div id="app"> <img :src= "imgSrc" > <img :title="imgtitle+’!!!!’"> <img :class="isActive?'active':‘’”> <img :class="{active:isActive}"> </div>
          • var app = new Vue({ el:"#app", data:{ imgSrc:"图片地址", imgTitle:"黑马程序员", isActive:false } })
      • 总结
        • v-bind指令的作用是:为元素绑定属性
        • 完整写法是 v-bind:属性名
        • 简写的话可以直接省略v-bind,只保留 :属性名
        • 需要动态的增删class建议使用对象的方式
  • 3. 列表循环,表单元素绑定
    • v-for
      • 根据数据生成列表结构
      • eg
        • var app = new Vue({ el: "#app", data: { arr: [1, 2, 3, 4, 5], objArr: [ { name: "jack" }, { name: "rose" } ] } })
          • {{ index }}{{ item }} {{ item.name }}
      • 总结
        • v-for指令的作用是:根据数据生成列表结构
        • 数组经常和v-for结合使用
        • 语法是( item,index ) in 数据
        • item 和 index 可以结合其他指令一起使用
        • 数组长度的更新会同步到页面上,是响应式的
    • v-on补充
      • 获取和设置表单元素的值(双向数据绑定)
      • eg
        • • var app = new Vue({ el: "#app", data: { message: "黑马程序员" } })
      • 总结
        • 事件绑定的方法写成函数调用的形式，可以传入自定义参数
        • 定义方法时需要定义形参来接收传入的实参
        • 事件的后面跟上 .修饰符 可以对事件进行限制
        • .enter 可以限制触发的按键为回车
        • 事件修饰符有多种
    • v-model
      • 获取和设置表单元素的值(双向数据绑定)
      • eg
        • • var app = new Vue({ el: "#app", data: { message: "黑马程序员" } })
      • 总结
        • v-model指令的作用是便捷的设置和获取表单元素的值
        • 绑定的数据会和表单元素值相关联
        • 绑定的数据←→表单元素的值
• 网络应用
  • axios
    • eg
      • <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){})
    • 总结
      • 功能强大的网络请求库
      • axios必须先导入才可以使用
      • 使用get或post方法即可发送对应的请求，地址就是文档提供的接口地址
      • then方法中的回调函数会在请求成功或失败时触发，成功触发第一个回调函数，失败则触发第二个回调函数
      • 通过回调函数的形参可以获取响应内容,或错误信息
  • axios+vue
    • 总结
      • axios回调函数中的this已经改变,无法访问到data中数据
      • 把this保存起来,回调函数中直接使用保存的this即可
      • 和本地应用的最大区别就是改变了数据来源，因为有一部分数据来自网络
• 综合应用