随心记录

Bug不空，誓不成佛

  menu
70 文章
14633 浏览
1 当前访客
ღゝ◡╹)ノ❤️
/      

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是前端的主流框架之一，和Angular、React 一起，并成为前端三大主流框架！

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容器，并渲染给浏览器
    • 响应式体现
内事不懂问百度，外事不懂问谷歌~