VUE简单总结

VUE介绍

        VUE是一套用于构建用户界面的渐进式(灵活)框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或    既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

•         新规定:结尾的;号可以省略   2.字符一般使用'单引号'
•         补充知识:var: js中声明变量的修饰符 没有作用域的概念
•                        const: 定义常量的
•                        let: 有作用域的变量声明

VUE基本用法

1.  v-cloak:/*渲染没有完成时不展现*/        [v-cloak]{display: none}
2.  v-text:以优化的效果进行展现,内部兼容了v-cloak
3.  v-html: 将HTML标记语言,以渲染之后的效果进行展现
4.  v-pre: 跳过vue的解析的过程,直接展现数据
5.  v-once:如果数据只需要vue解析一次之后不需要再次解析,则使用v-once指令
6.  v-model: 如果需要实现页面的数据与属性实现双向数据绑定,则使用v-model!!! 一般在输入框中最为常用,一般用来保证数据的一致性.
7.  v-on:如果需要对页面元素进行操作(事件)使用v-on  v-on:click: 事件绑定(可以简写为@click)
8.   methods属性:通过methods属性定义众多方法(函数)

事件修饰符

1. stop: 事件冒泡: 由于操作过程中可能有嵌套的关系,所以会触发冒泡机制,如果需要阻止冒泡,使用.stop进行修饰(v-on:click.stop)
2. prevent:如果阻止默认的行为,则使用prevent属性
3. v-bind属性绑定:需要为href属性动态的绑定数据  v-bind属性绑定   语法:v-bind:href 简化操作 (:href) 

 分支结构语法

      介绍

•         v-if 如果判断为真 则显示标签数据
•         v-else 如果判断为假 则显示数据
•         v-else-if 判断规则 位于if和else之间的.
•         v-show 展现数据. 

       分支结构介绍(if/else)

• 注意事项:v-if/v-else位置应该连续 v-else不可以单独使用

        v-show命令

•         <h3 v-show="isShow">展现一个变化的数据</h3>
•         通过按钮切换状态
•         <button @click="isShow = !isShow">切换</button>

        循环遍历

•             <!-- 1.循环数组 注意事项:循环时最好指定key 标识循环数据的位置 -->
•             <h3 v-for="item in hobbys" v-text="item" :key="item"></h3>
•             
•             <!-- 2.带下标的循环遍历语法 2个参数  参数1:遍历的数据   参数2:下标 -->
•             <h3 v-for="(item,index) in hobbys" v-text="item" :key="index"></h3>
•             
•             <!-- 3.循环遍历对象 -->
•             <div v-for="user in userList" :key="user.id">
•                 <span v-text="user.id"></span>
•                 <span v-text="user.name"></span>
•             </div>

MVVM思想

•     M Model 代表数据
•     V View 代表视图
•     VM (view-model) 视图与数据的控制层

vue表单操作

    常见表单元素

1.         input 文本框
2.         textarea 文本域
3.         select 下拉框
4.         radio 单选框
5.         checkbox 多选框

   表单修饰符

1.       number : 将用户输入的内容转户为数值类型.
2.       trim: 去除左右2边多余的空格.
3.       lazy: 简化input框调用js的次数 当失去焦点时调用

计算属性

        <!-- 需求: 需要对一个字符串进行反转操作
            用户输入内容 abc 
            要求的输出内容   cba
            思路: 字符串拆分为数组  将数组进行反转  将数组拼接成串                 
            方法说明:
            reverse(): 将数组进行反转
            join("连接符") 将数组拼接为字符串
         -->
         用户输入: <input type="text" v-model="msg" /> <br>
         常规调用:{{msg.split('').reverse().join('')}}<br>
         
         <!-- 添加计算属性的名称-->
         计算属性调用: {{reverseMethod}}

   计算属性和方法的区别

        考点:   1.方法调用时每次都会执行.
                    2.计算属性调用时 有缓存机制
                    3.如果数据需要被大量的引用 则使用计算属性更好 效率高

   计算属性与方法的区别

        计算属性如果调用多次,里面有缓存机制,只计算一次方法的调用,没有缓存机制,调用多次,则计算多次如果一个计算重复调用时首选计算属性

数组操作:

1.     push(): 在最后追加元素
2.     pop(): 在最后删除元素
3.     shift(): 从头删除元素
4.     unshift(): 从头添加元素
5.     splice(): 替换元素 参数说明:参数1 操作数据的起始位置(下标) 参数2 替换的数量 参数3 替换的值   隐藏用法: 可用作删除操作,删除第二个参数数据,参数3不传值
6.     sort() 排序按照字符编码顺序排列
7.     reverse() 数组反转

vue生命周期

•         钩子函数:整个vue有一个完整的执行的过程,如果用户需要对vue的对象进行额外的扩展时,可以采预留的接口进行扩展我们把项目中提前设定好的接口在JS中称为钩子函数
• 1.钩子函数的作用:对原有的操作进行扩展 8个函数
  2.初始化函数 4个 修改函数 2个 销毁函数 2个
  3.mounted() 函数标志vue对象实例化成功
  4.生命周期函数是vue对象独有的内容 注意写法,不要放到methods中.

   vue生命周期函数说明

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法(例如reated()=>this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

    vue对象生命周期demo

1.         VUE对象的生命周期函数,可以单独的调用
2.         生命周期的函数名称是固定的,不能随意修改
3.         beforeCreate:在实例初始化之后，数据观测 (data observer) 和             event/watcher 事件配置之前被调用。
4.         created:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置
5.         beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。
6.         mounted:实例被挂载后调用 页面真正的加载完成之后调用
7.         beforeUpdate:数据更新时调用，发生在虚拟 DOM 打补丁之前
8.         updated:由于数据更改之后调用
9.         beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用
10.         destroyed:实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

vue中的数组操作

变更方法:

•         vue将被侦听的数组的变更方法进行了包裹,所以他们也将会触发视图更新.这些被包裹过的方法包括:
•         push():在数组末尾追加数据
•         pop():删除数组最后一个元素
•         shift():删除数组第一个元素
•         unshift():在数据开头追加数据
•         splice():在指定的位置替换数据
•         sort():对数组进行排序,按照 编码进行排序,由小到大
•         reverse():数组反转

vue中组件化思想

组件化介绍:组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想

     组件化入门:全局组件

组件驼峰规则命名:

        1)如果组件名称使用了驼峰规则,则默认的条件下vue渲染数据时都采用小写字母
        2)如果需要事项驼峰规则,则使用'-'线连接
          强调:组件的调用时 可以添加'-' 

组件模板标签的使用

        1)``号的使用:组件结构HTML数据
            ''当前行有效
            ``支持多种格式的html
        2)组件template的写法
            a)模板标签不要与vue div耦合
            b)template标签需要添加id 进行表识
            c)template模板标签中 必须有根标签div
            组件化模板优化:使用id进行绑定

局部组件定义:

        

路由机制

VUE Router介绍

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。        

包含的功能有：
            嵌套的路由/视图表
            模块化的、基于组件的路由配置
            路由参数、查询、通配符
            基于 Vue.js 过渡系统的视图过渡效果
            细粒度的导航控制
            带有自动激活的 CSS class 的链接
            HTML5 历史模式或 hash 模式，在 IE9 中自动降级
            自定义的滚动条行为

VUE Router存在意义

传统页面跳转.需要把请求发送到后端服务器由后端服务器进行页面跳转,请求都需要经过后端服务器,导致后端服务器压力        过大,这种方式称为后端路由,这种方式的弊端是集中式的管理,性能瓶颈在服务器端.
   解决策略:
            将所有的路由的配置生成JS,保存到浏览器中,当用户发起某个请求 时,自己映射的请求页面信息(组件),之后直接访问静态页面,这样的方式速度更快,这种方式称为前端路由/客户端路由.

children属性说明

说明:children属性可以实现路由的嵌套,通过父子关系,则子组件的渲染,在父组件定义router-view标签中展现

转发与重定向

    转发

 概念: 由服务器内部进行页面的跳转.
 说明: 一般情况下 SpringMVC内部 以转化为主.

 特点:转发时 会携带用户提交的数据.
 转发的意义:如果直接转向到页面中,如果页面需要额外的参数处理,则没有执行.
                    如果在该方法中添加业务处理,则方法的耦合性高.不方便后续维护
                    所以方法应该尽可能松耦合

     重定向

说明: 当用户发起请求时,由服务器返回有效的网址信息.之后由用户再次发起请求的结构.

关键字:forward: 转发的是一个请求
            redirect:多次请求多次响应

特点:   a).转发时 会携带用户提交的数据.
           b).转发时 用户浏览器的地址不会发生改变.
           c).重定向时  由于是多次请求,所以不会携带用户的数据
           d).重定向时  由于是多次请求,所以用户的浏览器的地址会发生变化
           F)重定向时 不能传递参数,重定向是服务器行为

实际意义:实现了方法内部的松耦合

什么时候使用转发/重定向:

      1).如果需要携带参数 使用转发 
      2).如果一个业务已经完成需要一个新的开始 则使用重定向  

重定向/转发意义:

       1).转发时 会携带用户提交的数据.
       2).转发时 用户浏览器的地址不会发生改变.
       3).重定向时 由于是多次请求,所以不会携带用户的数据
       4).重定向时 由于是多次请求,所以用户的浏览器的地址会发生变化