学习Vue---1.Vue核心

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

渐进式 JavaScript 框架，用来动态构建用户界面

1.特点

  1. 遵循 MVVM 模式

    1. 编码简洁，体积小，运行效率高，适合 移动/pc 端开发

    2. 它本身只关注 UI，可以轻松引入 vue 插件或其它第三方库开发项目

2.与其他前端 JS 框架的关联

  1. 借鉴 angular 的模板 和 数据绑定技术

  2. 借鉴 react 的组件化 和 虚拟 DOM 技术

3.Vue 扩展插件

  1. vue-cli：vue 脚手架

  2. vue-resource(axios)：ajax 请求

  3. router" title="vue-router">vue-router：路由

  4. vuex：状态管理（它是 vue 的插件但是没有用 vue-xxx 的命名规则）

  5. vue-lazyload：图片懒加载

  6. vue-scroller：页面滑动相关

  7. mint-ui：基于 vue 的 UI 组件库（移动端）

  8. element-ui：基于 vue 的 UI 组件库（PC 端）

二、Vue 的基本使用

1.编码

  1. 引入Vue.js

  2. 创建 Vue 对象

    el：指定根 element (选择器)

    data：初始化数据(页面可以访问)

  3. 双向数据绑定：v-model

  4. 显示数据：{{xxx}}

  5. 理解 vue 的 mvvm 实现

<!--template模板-->
<div >
  <input type="text" v-model="msg"><br><!--指令-->
  <input type="text" v-model="msg"><!--指令-->
  <p>hello {{msg}}</p><!--大括号表达式-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  const vm = new Vue({ // 配置对象 options
    // 配置选项(option)
    el: '#test',  // element: 指定用vue来管理页面中的哪个标签区域
    data: {
      msg: 'atguigu'
    }
  })
</script>

2.MVVM --> model-view-viewModel

  1. model：模型，数据对象（data）

  2. view：视图，模板页面

  3. viewModel：视图模型（vue 的实例）

MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。

模型指的是后端传递的数据，视图指的是所看到的页面。

视图模型是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：

  1. 将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。

  2. 将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。

这两个方向都实现的，我们称之为数据的双向绑定。

三、模板语法

1.模板的理解

  1. 动态的 html 页面

  2. 包含了一些 JS 语法代码：

    1. 双大括号表达式

    2. 指令（以 v- 开头的自定义标签属性）

2.双大括号表达式

  1. 语法：{{exp}}

  2. 功能：向页面输出数据

  3. 可以调用对象的方法

3.指令

指令一：强制数据绑定

  1. 功能：指定变化的属性值

  2. 完整写法：v-bind:xxx='yyy' //yyy会作为表达式解析执行

  3. 简洁写法：:xxx='yyy'

指令二：绑定事件监听

  1. 功能：绑定指定事件名的回调函数

  2. 完整写法：v-on:keyup='xxx'，v-on:keyup='xxx(参数)'，v-on:keyup.enter='xxx'

  3. 简洁写法：@keyup='xxx'，@keyup.enter='xxx'

四、计算属性和监视

1.计算属性

  1. 在 computed 属性对象中定义计算属性的方法（什么时候执行？初始化显示/相关的data属性数据发生改变

    1. 回调函数满足三个条件：你定义的；你没有调用；但最终它执行了

    2. 回调函数需要知道两件事：什么时候调用；用来做什么　

  2. 在页面中使用 {{方法名}} 来显示计算的结果

2.监视属性

  1. 通过 vm 对象的 $watch() 或 watch 配置 来监视指定的属性

  2. 当属性变化时，回调函数自动调用，在函数内部进行计算

3.计算属性高级

  1. 通过 getter/setter 实现对属性数据的计算读取 和 变化监视

    1. getter：属性的ge方法

    2. setter：属性的set方法

  2. 计算属性存在缓存，多次读取只执行一次 getter 计算

五、class 与 style 绑定

  1. 在应用界面中, 某个(些)元素的样式是变化的

  2. class/style 绑定就是专门用来实现动态样式效果的技术

1.class 绑定：:class='xxx'

  1. 表达式是字符串: 'classA'

  2. 表达式是对象: {classA:isA, classB: isB}

  3. 表达式是数组: ['classA', 'classB']

2.style 绑定

:style="{ color: activeColor, fontSize: fontSize + 'px' }" 其中 activeColor/fontSize 是 data 属性

六、条件渲染条件渲染指令

  1. v-if + v-else

  2. v-show

如果需要频繁切换 v-show 较好。当条件不成立时, v-if 的所有子节点不会解析。

七、列表渲染

1.列表显示指令

  1. 数组：v-for/index

  2. 对象：v-for/key

2.列表的更新显示

1.删除item：变更方法，顾名思义，会变更调用了这些方法的原始数组。

// 两种更新方式
this.persons[index] = newP  
// 这样只更新persons中的某一个数据，vue根本就不知道，视图不会更新
this.persons.splice(index, 1, newP)
// splice方法被 Vue 将进行了包裹，所以也将会触发视图更新。
vue本身只是监视了persons的改变，没有监视数组内部数据的改变；
Vue重写了数组中的一系列改变数组内部数据的方法（先原生，更新界面）--->数组内部改变，界面自动变化

这些被包裹过的方法包括：

  1. push()

  2. pop()

  3. shift()

  4. unshift()

  5. splice()：增删改

  6. sort()

  7. reverse()

2.替换item：相比之下，也有非变更方法，例如 filter()、concat() 和 slice()。它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组。

let fpersons = persons.filter(
  p => p.name.includes(searchName)
)

3.列表的高级处理

  1. 列表过滤

  2. 列表排序

fpersons.sort(function (p1, p2) {
  if (orderType === 1) { // 降序
    return p2.age - p1.age
  } else { // 升序
    return p1.age - p2.age
  }
})

八、事件处理

1.绑定监听

1) v-on:xxx="fun"
2) @xxx="fun"
3) @xxx="fun(参数)"
4) 默认事件形参: event， 隐含属性对象:

$event 就是当前触发事件的元素，即使不传 $event，在回调函数中也可以使用 event 这个参数。

2.事件修饰符

事件修饰符用来控制事件的冒泡和默认行为。

1) .prevent : 阻止事件的默认行为event.preventDefault()
2) .stop : 停止事件冒泡event.stopPropagation()

<!-- 阻止事件冒泡 -->
<div >
    <div ></div>
</div>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

3.按键修饰符

1) .keycode : 操作的是某个 keycode 值的键
2) .keyName : 操作的某个按键名的键(少部分)

<!-- 任何按键按下都会触发回调函数 -->
<textarea @keyup="testKeyup"></textarea>
<!-- 下面的两种写法效果是一致的 -->
<!-- 使用按键码，回车键的keyCode是13 -->
<textarea @keyup.13="testKeyup"></textarea>
<!-- 使用按键修饰符，因为回车键比较常用，所以vue为他设置了名称，可以直接使用enter来代替 -->
<textarea @keyup.enter="testKeyup"></textarea>

九、表单输入绑定

使用 v-model 对表单数据自动收集

1) text/textarea
2) checkbox
3) radio
4) select

十、vue 实例生命周期

1.生命周期流程图

2.vue 生命周期分析

  1. 初始化显示（1次）

    1. beforeCreate()

    2. created()

    3. beforeMount()

    4. mounted()：初始化显示之后立即调用

  2. 更新显示：this.xxx = value（n次）

    1. beforeUpdate()

    2. updated()

  3. 销毁 vue 实例：vm.$destroy()（1次）

    1. beforeDestory()：死亡之前调用

    2. destoryed()

3.常用的生命周期方法

  1. created()/mounted()：发送 ajax 请求，启动定时器等异步任务

  2. beforeDestroy()：做收尾工作，如：清除定时器

十一、过渡&动画

1.vue 动画的理解

  1. 操作 css 的 transition 或 animation

  2. vue 会给目标元素添加/移除特定的 class

  3. 过渡的相关类名

    xxx-enter-active：指定显示的 transition

    xxx-leave-active：指定隐藏的 transition

    xxx-enter/xxx-leave-to：指定隐藏时的样式

2.基本过渡动画的编码

  1. 在目标元素外包裹<transition name="xxx">

  2. 定义 class 样式

    指定过渡样式：transition

    指定隐藏时的样式：opacity/其它

十二、过滤器

1.理解过滤器

1) 功能: 对要显示的数据进行特定格式化后再显示

2) 注意: 并没有改变原本的数据, 可是产生新的对应的数据

2.定义和使用过滤器

定义过滤器：

Vue.filter(filterName, function(value[,arg1,arg2,...]){ 
    // 进行一定的数据处理 
    return newValue 
})

使用过滤器 ：

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

其中，myData 会作为 value 传入 filter 中。

十三、内置指令与自定义指令

1.常用内置指令

1) v-text : 更新元素的 textContent

2) v-html : 更新元素的 innerHTML

3) v-if : 如果为 true, 当前标签才会输出到页面

4) v-else: 如果为 false, 当前标签才会输出到页面

5) v-show : 通过控制 display 样式来控制显示/隐藏

6) v-for : 遍历数组/对象

7) v-on : 绑定事件监听, 一般简写为@

8) v-bind : 强制绑定解析表达式, 可以省略 v-bind

9) v-model : 双向数据绑定

10) ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象

11) v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }

2.自定义指令

el：指令所在的标签对象

binding：包含指令相关数据的容器对象

1) 注册全局指令 ：

Vue.directive('my-directive', function(el, binding){ 
    el.innerHTML = binding.value.toupperCase() 
})

2) 注册局部指令 ：

directives: { 
    'my-directive'(el, binding) { 
        el.innerHTML = binding.value.toupperCase() 
    } 
}

3) 使用指令 ：v-my-directive='xxx'

（binding.value 就是 xxx 的值）

十四、自定义插件

1.说明

1) Vue 插件是一个包含 install 方法的对象

2) 通过 install 方法给 Vue 或 Vue 实例添加方法，定义全局指令等

2.其他 API

vm.$nextTick([callback])

用法：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

用途：需要在视图更新之后，基于新的视图进行操作。

//改变数据
vm.message = 'changed'
//想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
console.log(vm.$el.textContent) // 并不会得到'changed'
//这样可以，nextTick里面的代码会在DOM更新后执行
Vue.nextTick(function(){
    console.log(vm.$el.textContent) //可以得到'changed'
})

十五、创建VUE项目

1.vue-cli3/4 的项目文件目录

目录/文件说明
build

webpack相关的配置文件夹（基本不需要修改）

dev-server.js：通过express启动后台服务器

config

webpack相关的配置文件夹（基本不需要修改）

    |--index.js：指定的后台服务的端口号和静态资源文件夹

dist项目打包后生成的文件
node_modulesnpm加载的项目依赖模块
public静态资源目录，如图片、字体、icon图标 ，其中里面的index.html是模板，当运行npm run build打包的时候，就是以这里的index.html作为模板打包 输出 到dist 文件夹下生成一个新的 index.html文件
src包含了如下几个目录及文件:
assest: 放置一些图片，如logo等
components: 这里一般用来放置一些公共的组件
App.vue:应用组件，我们写的所有组件都是在这个组件之上运行的
main.js: 项目的核心文件，入口js文件
router: 路由文件夹，决定页面路由的跳转规则
store: vuex的状态管理文件
common: 存放一些公共的js文件
package.json项目的配置文件，以及一些插件依赖包的信息
package-lock.json插件依赖的详细信息
babel.config.js用来配置一些ui插件
README.md项目的说明文档，markdown格式

2.使用组件的三步骤

3.项目的打包与发布

打包：npm run build

发布：

  1. 使用静态服务器工具包：npm install -g serve，serve dists，访问：http://localhost:5000

  2. 使用动态web服务器（Tomcat）：

    1. 修改配置：webpack.prod.conf.js，output:{publicPath:'/xxx/' //打包文件夹的名称}

    2. 重新打包：npm run build

    3. 修改dist文件夹为项目名称：xxx

    4. 将xxx拷贝到运行的tomcat的webapps目录下

4.ESLint

代码规范检查工具，官网：http://eslint.org/

支持：ES、JSX、style教程、自定义错误和提示；

校验：语法错误，不重要或丢失的标点符号；没法运行到的代码块；未被使用的参数提醒；确保样式的统一规则，如sass或者less；检查变量的命名。

规则的错误等级：

  1. 0：关闭规则；

  2. 1：打开规则，并且作为一个警告（信息打印黄色字体）

  3. 2：打开规则，并且作为一个错误（信息打印红色字体）

可以在.eslintignore里面设置不需要检查的文件夹或文件

参考链接：

【1】https://www.bilibili.com/video/BV1Wp411d7Ur?p=57

【2】Vue 全家桶 | Woc12138

【3】面试题

【4】vue构造函数（根实例化时和组件实例对象选项）参数：选项详解_weixin_30755393的博客-CSDN博客

以上是 学习Vue---1.Vue核心 的全部内容， 来源链接： utcz.com/z/375265.html

回到顶部