Vue2.0学习小结与知识梳理（一）

最新推荐文章于 2024-07-11 09:56:16 发布

Aero_K

最新推荐文章于 2024-07-11 09:56:16 发布

阅读量329

点赞数

分类专栏： # VUE

本文链接：https://blog.youkuaiyun.com/Aero_K/article/details/81302003

版权

VUE 专栏收录该内容

3 篇文章

订阅专栏

一、vue

主要特点：声明式，数据驱动和组件化。

声明式：注重结果，只需要关注实现的结果，而不关注实现的过程。

数据驱动：响应式的数据，即当数据改变时，vue会自动将其渲染到视图层，开发者不需手动去修改dom结构

组件化：页面是由组件构成，组件又是由数据 + 指令构成。

1、每个Vue应用都是通过Vue函数创建一个实例开始的。创建的方式有两种：全局创建和局部创建

2、实例的生命周期钩子

https://cn.vuejs.org/v2/guide/instance.html（图示）包括create、mounted、updated、destroyed，这几个钩子会在实例生命周期的不同阶段被调用，注意实例生命周期钩子的this上下文会指向调用它的vue实例。

3、组件基础：

el（element）:vue与页面中的dom元素的挂载

data: 相关要渲染的数据。在组件中的数据是私有的，因此要写成函数的形式并用return返回到组件当中。

methods：组件中定义的方法。

props:父级传给子级的数据

computed：计算属性，基于原来属性派生出来的属性。

watch：观察者，监听数据变动，当数据变动时调用。

components:要引入的vue组件

template：组件模板，当前vue组件的html结构

lifecircle:组件的生命周期

3.1一些重要属性的延深

计算属性

重要应用：缓存，复杂逻辑问题的处理

为何需要缓存？如果有一些性能开销比较大的属性a，需要遍历巨大的数组并作大量的计算，若有其他属性依赖于这个属性a，如果不进行缓存的化，那么将不可避免的会执行a的get方法。

计算属性缓存的实现：计算属性是基于依赖进行缓存的，依赖改变才会重新进行求值

计算属性VS方法：

页面重新渲染时，如果依赖源没有改变的化，那么多次访问计算属性将会返回之前计算的值，不必继续执行函数，而方法则会在每次访问时会再次执行函数。

计算属性VS侦听属性:

计算属性computed和侦听属性watch都可以用来观察和响应vue实例上的数据变动，watch是通用的方法，而在大多数情况下用computed 可以减少代码的冗余，并且可读性更高。因此推荐使用computed属性。但如果数据变动时需要执行异步或者开销比较大的操作时，用watch方法比较有用。

计算属性默认只有getter方法，但可以自定义一个setter方法对计算属性派生出来的数据进行修改。而不单单是获取。

4、常用指令：

v-if v-else -if（2.0） v-else 条件渲染

v-for 列表渲染

v-bind 动态绑定多个特性或组件

v-show 根据条件展示元素

v-on 事件监听

v-model:双向数据绑定

一些重要指令的延伸

v-if VS v-show

v-if 是真实的条件渲染，会确保在切换当中适当地销毁与重建条件块内的事件监听器和子组件。它是惰性的。

v-show元素始终被编译并保留，只是简单地基于 CSS 切换

v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用 v-if

双向数据绑定v-model

本质上是一个语法糖，通过一个单向数据流和一个自定义事件来完成一个语法糖，其中要求prop中的名称必须是一个value,然后子组件要向父组件传数据时通过$.emit('input',value)事件就可以实现一个双向数据绑定。

语法糖：语法糖就相当于为计算机语言增加的一种语法，对语言本身功能的使用并不影响，通常来说可以增加程序的可读性，减少代码出错的机会。

v-model的修饰符
v-model.lazy:默认情况下input事件的触发后将输入框的值与数据进行同步，使用lazy会转变为与change事件进行同步

v-model.number 自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符

v-model.trim: 自动过滤用户输入的首尾空白字符，

二、vue的组件化

vue的组件都是由数据 + 指令构成。

1、组件的分类、命名

全局组件 && 局部组件
全局组件：全局注册的组件注册后可用于所有新建的vue根实例的模板中
局部组件：全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
因此，在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件（局部组件）
组件命名
1.kebab-case(短横线分隔命名)
2.PascalCase（驼峰式命名法）
注意事项：
当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

2、props

特点：单向数据流
所有的prop都使得其父子prop之间形成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，但是反过来就不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。(绑定的是原始值)
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
有验证功能

Props是父级向子集传递数据用的(需要用到bind方法)

3、自定义事件

子集元素如何向父级元素传递数据
通过父级定义在子集上元素上的自定义事件函数
如何触发自定义事件：this.$emit("事件名称"，数据) this.$emit会将数据传到method()内对应的事件上,组件内定义一个watch

三、vue-cli脚手架构建vue工程

vue-cli脚手架的作用
新建项目时用来对项目工程进行初始化
整个项目的入口文件是：App.vue

为了速度快速稳定，先进行源的切换

npm install cnpm -g

npm install nrm -g //下载npm管理工具

nrm ls//查看源

nrm use cnpm//修改源

cnpm -v //查看版本信息，检测是否安装成功

需要预先安装node、vue环境（此步骤较为简单，不展示）

#全局安装vue-cli

cnpm install vue-cli -g

基于webpack工具搭建项目模板(需要注意项目名不能大写，不然会报错)

vue init webpack my-project

进入项目并初始化（安装相关的依赖）

测试运行项目

npm run dev

运行成功，在浏览器中打开以下网址

项目搭建完成

vue-cli 构建项目中less的配置

全局下载less

npm install node-less -save
npm install less-loader --save
npm install less -save-dev

在build -> webpack.base.config.js rules中配置

test{

test:' /\.less$/ ',

loaders:' style-loader!css-loader!less-loader '

具体看另外一篇文章https://blog.youkuaiyun.com/aero_k/article/details/81279780

配置完成后需要重启项目

四、vue的状态管理vuex

vue的状态管理vuex主要是用来作非父子组件之间的通信的

五、vue的路由管理