昔洛 的个人博客 昔洛 的个人博客

Bug不空,誓不成佛

目录
Vue 框架学习(一)
/      

Vue 框架学习(一)

学习内容

  • Vue 简介
  • Vue 基本指令
  • Vue 的基本属性
  • Vue 的声明周期

Vue 简介

Vue.js (view)是一套构建用户界面的前端框架技术,内部集成了许多基础技术,例如html、css、javascript、ajax、node等,当然还有vue本身高级技术体现,例如组件、过滤器、指令、路由、webpack等等,2012年出现,是中国人 尤雨溪 开发的,2016年3月 加入阿里巴巴公司(该事件助推了vue的发展)

  • jquery库:侵入性弱 (工具 库),应用对其进行 安装卸载非常方便

Vue 框架

  • vue:框架 侵入性强 (框架),项目 从内到外 都是vue,不可以随便拆卸;Vue只关注视图(页面)层的开发,文档非常丰富、易于上手,流行度高,拥抱经典的web技术、早起灵感来源于angular,vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点,支持所有兼容ECMAScript 5的浏览器,IE9以上

  • 与 vue 相关话题:组件、路由、webpack、loader、vue-cli、VirtualDOM(虚拟DOM)、NPM、SPA、ES6、单文件组件、双向数据绑定等

  • vue是前端的主流框架之一,和AngularReact 一起,并成为前端三大主流框架!

angular 框架

2009年出现,google公司出品
Angular.js 出现最早的前端框架,曾经很火,但是现在已经 被边缘化了;也不好学;
Angular 1.x 学起来好麻烦;
Angular 2.x ~ 5.x 学习起来相对简单;

React 框架

2010年出现,facebook公司出品
React.js 是目前最流行的一个框架;是用的人最多的一个框架;但是,学习起来也比较难,因为在 React中,所有的功能,都要用 JavaScript 来实现;
JSX(JavaScript XML/Xhtml) & ES2015(es6) 一切都是javascript、包括html、css
(JSX的引入导致代码清晰度很差)
太笨拙,难以掌握,有些地方的代码看起来完全没有逻辑性,学习过程痛苦

获取 Vue

Vue 基本指令

简单使用 vue

vue 操作需要有个容器,可以是 div,p,span 等等许多标签

  • 示例代码如下:
    	<div id="app"></div>
    	<script src="./vue.js"></script>
    	<script>
    		var vm = new Vue({
    			el: '#app',
    		})
    	</script>
    
  • Vue-MVVM 设计模式
    • m:model 数据部分 data
    • v: view 视图部分 div 容器
    • vm:view & model 视图和数据的结合体

指令

  • 插值表达式:<p>{{ 表达式 }}</p>,存在解析闪烁

    • {{ }} 前后符号可使用 delimiters : ['${', '}$']进行自定义设置,设置后语法就变为
      <p>${ 表达式 }$</p>
  • v-text:与插值表达式{{}}作用一样,控制标签内容区域的信息,不会有解析闪烁的效果

  • v-html:控制标签内容,与 v-text 不一样的是他会解析 html 的标签

  • v-bind(:):绑定属性操作

    	<标签 v-bind:属性="表达式"></标签>
    	<标签 :属性名称="表达式"></标签>
    
    • 绑定 class:
      	1) 对象方式
      		<tag :class="{xx:true, xx:false}"></tag>
      		<!--true: 设置   false:不设置-->
      
      	2) 数组方式
      		<tag :class="['xx','yy','zz']"></tag>
      		<!--数组元素值如果不是data成员 就要通过单引号圈选,代表是普通字符串-->
      
      • 注意:通过数组方式给class绑定多个值,值如果不是 Vue成员,相反就是普通的字母字符串内容,则需要通过单引号圈选
    • 绑定 style:
      	1) 对象方式
      	<tag :style="{xx:yy,xx:yy.....}"></tag>
      	<!--xx:样式名称,yy:样式的值-->
      	2) 数组方式
      	<tag :style="[{xx:yy},{xx:yy.....}]"></tag>
      	<!--根据需要,数组的每个元素都是一个对象,每个对象包含一对或多对css样式-->
      
  • v-on(@):在 Vue 中给元素进行事件绑定

    	<input v-on:事件类型="事件处理驱动">
    	<p @事件类型:"事件处理驱动"></p>
    
    • 事件处理驱动需要通过 methods 定义
    • 被绑定的事件类型可以是 click、dblclick、keyup 等,不需要添加 on
    • 定义事件驱动程序时参数的传递:
      <tag @:"fun(value)"></tag>
      <tag @:"fun()"></tag>
      这种情况下传递的参数为 value/undefined
      <tag @:"fun"></tag>
      在传递参数时,事件处理程序接受的参数为事件对象
    • vue 中的事件处理程序中的 this 指向 vue 实例对象,嵌套的异步函数另行判断
    • 按键修饰符:对于键盘类的事件有着独特的处理方式,提供了快捷的键码供使用
      • 语法:<input type="text" @keyup.keyCode="method"> @keyup.keyCode(别名)/@keyup.keyCode(数值码)内置的有常用的快捷键如 ctrl、alt、esc、enter 等,也可多条件使用,例如 ctrl+enter: @keyup.ctrl.center
      • 自定义键码:Vue.config.keyCodes.自定义别名 = 数值码
  • v-model:为表单控件的 value 进行数据的双向绑定 <标签 v-model="data成员"></标签>

    • v-model是vue中唯一的双向数据绑定指令
    • v-model只针对value属性可以绑定,因此经常用在form表单标签中,例如input(输入框、单选按钮、复选框)/select(下拉列表)/textarea(文本域)
    • v-model只能绑定data成员,不能设置其他表达式,否则错误

      v-model="score+100" 错误
      v-model="120" 错误
      v-model="score" 正确的

    • v-model绑定的数据需要在data中提前声明好
    	  <div id="app">
    	    <p>{{ city }}</p>
    	    <p><input type="text" :value="city"></p>
    	    <p><input type="text" v-model="city"></p>
    	  </div>
    	  <script src="./vue.js"></script>
    
    	  <script>
    	    var vm = new Vue({
    	      // delimiters:['$','#'],
    	      el:'#app',
    	      data:{
    	        city:'北京'
    	      },
    	    })
    	  </script>
    
    • 响应式:
      • 页面初始加载,vue的数据渲染给div容器
      • 通过v-model修改数据,修改的信息会直接反馈给vue内部
      • vue的数据发生变化,页面上(也包括Vue实例本身)用到该数据的地方会重新编译渲染

        2和3 步骤在条件满足情况下会重复执行

      • 其中的3步骤才是“响应式”
  • v-for:遍历数组信息,使用v-for指令的html标签,由于遍历机制,本身会被创建多份出来

    • 遍历对象:
    	<标签 v-for="小单元 in  对象"></标签>
    	<标签 v-for="(小单元,成员名称) in  对象"></标签>
    	<标签 v-for="(小单元,成员名称,下标) in  对象"></标签>
    
    • :key 值介入:

      在vue中v-for做遍历应用时,都需要与:key一并进行使用
      在2.2.0+版本里边,v-for使用的同时必须使用:key,以便vue能准确跟踪每个节点,从而重用和重新排序现有元素,你需要为每个数据项提供一个唯一的、代表当前项目的属性值赋予给key

      • <标签 v-for="" :key="可以代表每个项目的唯一的值"></标签>
  • v-if&v-show:在vue中,v-if 和 v-show 会根据接收 true/false 信息使得页面上元素达到显示或隐藏的效果

    	<标签 v-if="true/false"></标签>
    	<标签 v-show="true/false"></标签>
    	<!--true:显示   false:隐藏-->
    
    • v-if:v-if 有更高的切换消耗 、v-show有更高的渲染消耗,如果需要频繁切换 则v-show 较合适,如果在运行时条件不大可能改变 则v-if 较合适。v-if使得元素被隐藏后,这个元素的物理位置有一个名称为"<!---->"的占位符,其与html的注释信息没有关系
  • v-fi&v-else:在Vue中,v-if 、v-else-if 和 v-else 三个指令结合可以实现多路分支结构

    • v-if可以单独使用,形成单路分支结构
    • v-if 和 v-else 也可以合作使用,实现双路分支结构
    • v-if 、v-else-if 和 v-else 也可以合作使用,实现多路分支结构
    	<标签 v-if="true/false"></标签>
    	<标签 v-else-if="true/false"></标签>
    	<标签 v-else-if="true/false"></标签>
    	<标签 v-else></标签>
    	以上4个标签只分支结构,最终只会走一个,第一个为true的那个标签会执行 或 执行else标签
    

Vue 的基本属性

  • computed 计算属性应用

    	new Vue({
    	  computed:{
    	    属性名称:function(){
    	      // 业务表达式实现,可以通过this操作data成员
    	      return  返回结果
    	    }
    	  }
    	})
    
    • 使用:形式上,如何应用data成员,就如何应用计算属性;另外,如果页面需要访问一个数据,这个数据比较复杂,是需要通过其他data经过复杂步骤制作出来的,那么就可以通过“计算属性”简化获得该数据
    • 特点:
      • 计算属性关联的data如果发生变化,会重新编译执行 获得 并 使用 对应新结果,即响应式
      • 计算属性内部可以使用this关键字,与Vue对象等效
      • 每个计算属性都需要通过return关键字返回处理结果
    • 与 methods 方法区别:
      • computed计算属性本身有“缓存”,在关联的data没有变化的情况下,后续会使用缓存结果,节省资源
      • methods方法没有缓存,每次访问 方法体 都需要加载执行,耗费资源
  • 过滤器 filter:

    在项目应用中,同样一份数据信息,表现形式确有千奇百怪,例如时间信息可以是对象、时间戳、格式化等,字符串可以是大写的、小写的、首字母大写的等等,如果提供方给我们提供的信息是其中一种形式,而我们需要的是另一种,在Vue中,可以通过 “过滤器” 转换处理。过滤器是Vue中实现数据格式转换的一种机制。

    • 私有过滤器:
      	new Vue({
      	  filters:{
      
      	    // 如下方法格式是es6简易设置方式,完整写法: 过滤器名称:function(被处理数据){]}
      	    过滤器名称(被处理的数据){
      	      // 对数据进行加工处理
      	      return 结果
      	    },
      	    ...
      	  }
      	})
      
      • 使用:{{ 时间信息成员 | 过滤器名称 }}
    • 全局过滤器
      	Vue.filter(名称, function(被处理的数据){})
      	var vm = new Vue()
      	var vm2 = new Vue()
      
    • 注意:
      • 过滤器只可以用在两个地方: 插值表达式和 :冒号 属性绑定表达式。
        1. 插值表达式: {{ 数据 | 过滤器 }}
        1. v-bind属性绑定中使用: <标签 :属性=“数据 | 过滤器‘>
        2. v-if="city|xx" 错误
    • 传参:
      • 定义实参:
        <span>{{ dt | 过滤器的名称(实参,实参...) }}</span>
      • 定义形参:
        Vue.filter('过滤器的名称', function(origin,形参,形参...){})
  • 自定义指令:可以自定义一些指令用于使用

    • 声明语法:
    	// 1. 声明全局指令
    	Vue.directive(指令名称,{ 配置对象成员 })
    	// 2. 声明私有指令
    	new Vue({
    	  directives:{
    	    指令名称:{ 配置对象成员 }
    	  }
    	})
    	配置对象:
    	inserted(m){m代表使用该指令的html标签dom对象,可以通过m进行业务需求实现}
    
  • template: 在Vue实例内部可以声明template,其内容可以覆盖掉原生的div容器的

  • $mount:new Vue().$mount()绑定 vue 容器,与 el 作用相同

  • render成员:在Vue中如果定义了render成员,那么其提供的内容会渲染到页面中,并且会覆盖原容器,包括template

    • 优先级关系:render >>>>> template >>>>>>默认容器
    	<div id="app">{{ city }}</div>
    	<script src="./vue.js"></script>
    	<script>
    	  var vm = new Vue({
    	      el:'#app', // 使得Vue实例 与 div容器联系
    	      data:{
    	        city:'北京'
    	      },
    	      template:'<p>天津</p>',
    	      // render:设置内容去覆盖渲染容器并显示
    	      // render:function(create){
    	      //   // return是固定用法
    	      //   // return create(标签,内容区域信息)
    	      //   return create('span','广州')  // <span>广州</span>
    	      // },
    	      // render:function(h){
    	      //   return h('span','广州')  // <span>广州</span>
    	      // },
    	      // render:h=>{
    	      //   return h('span','广州')  // <span>广州</span>
    	      // },
    	      render:h=> h('span','广州')  // <span>广州</span>
    
    	  });
    	</script>
    

Vue 的生命周期:

  • 创建期:

    • beforeCreate:此时Vue对象刚创建好,没有任何成员,data、methods等都没有呢,只有this
    • created:此时vue对象已经长大一点,内部已经完成了data、methods等成员的设置,也是data初始化的最好时机
    • beforeMount:此时vue实例已经把div容器给获得到了,但是内部的vue指令等信息还没有被编译处理
    • mounted:此时,vue获取到的div容器内部的原生指令已经被编译处理好了,并且也完成了容器的渲染工作,此时模板中已经看不到vue原始指令了
  • 运行期:

    • beforeUpdate(){ 可以感知到数据变化之前页面上关于该数据的样子 }
    • updated(){ 可以感知到数据变化之后页面上该数据的样子 }

    运行阶段方法不会自动执行,当data成员数据发生变化,就执行了,并且数据变化多次,方法也会重复执行多次

  • 销毁期:

    	new Vue({
    		beforeDestroy(){ 实例销毁之前 }
    		destroyed(){ 实例销毁之后 }
    	})
    

    当vue实例被销毁后,就要执行以上两个方法,vm.$destroy()

    • 注意:运行阶段各个方法与创建阶段不同,本身不会自动执行,需要数据变化的条件触发才会执行
    • 销毁阶段各个方法也不会自动执行,需要Vue实例对象调用$destroy()方法

VirtualDOM

div容器 在 Vue实例中存在的状态,就是 VirtualDOM(虚拟dom内容),具体是内存信息的体现,在Vue实例运行期间,该VirtualDOM始终存在

  • VirtualDOM作用
    • 编译解析div容器,并渲染给浏览器
    • 响应式体现
内事不懂问百度,外事不懂问谷歌~