vue系统知识点

随风飞2019
125 阅读7分钟

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel

MVC和MVVM的关系图解

使用 v-cloak 能够解决 插值表达式闪烁的问题 v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空。 v-bind Vue提供的属性绑定机制 缩写是 : v-on Vue提供的事件绑定机制 缩写是 @

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
  • .once 事件只触发一次

绑定class样式，第一种使用方式，直接传递一个数组

这是一个很大很大想象

第二种使用方式，在数组中使用三元表达式

这是一个很大很大想象

第三种使用方式，在数组中使用对象代替三元表达式，提高代码可读性

这是一个很大想象

第四种使用方式，行内样式的属性绑定

这是一个h1

或者写成如下

这是一个h1

data: { styleObj1: { color: 'red', 'font-weight': 200 }, styleObj2: { 'font-style': 'italic' } },

在遍历对象身上的键值对的时候， 除了val key ,在第三个位置是索引index

值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}

in 后面我们放 普通数组，对象数组，对象， 还可以放数字 如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始

这是第 {{ count }} 次循环

v-for循环的时候，key属性只能使用number或string，必须使用v-bind属性绑定的形式指定key值

v-if每次都会重新删除或创建元素，有较高的切换性能消耗，如果元素可能永远也不会被显示出来被用户看到推荐使用 v-if v-show每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，有较高的初始渲染消耗，如果元素涉及到频繁的切换推荐使用v-show

使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；

通过Vue.config.keyCodes.名称 = 按键值来自定义案件修饰符的别名： Vue.config.keyCodes.f2 = 113; 使用自定义的按键修饰符 <input type="text" v-model="name" @keyup.f2="add">

[vue实例的生命周期]

  • 什么是生命周期：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期！
  • [生命周期钩子]：就是生命周期事件的别名而已；
  • 生命周期钩子 = 生命周期函数 = 生命周期事件
  • 主要的生命周期函数分类：
  • 创建期间的生命周期函数：
    • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
    • created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
    • beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
    • mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
  • 运行期间的生命周期函数：
    • beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
    • updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
  • 销毁期间的生命周期函数：
    • beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
    • destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
      生命周期.png

Vue中的动画能够提高用户的体验 使用transition将需要过渡的元素包裹起来 1.定义两组类样式（进入和离开时的过渡状态，进入过渡的开始状态 和 离开过渡的结束状态） 2.使用第三方 CSS 动画库，

动画哦
3.使用动画钩子函数

OK
然后再定义三个methods 钩子方法 methods: { beforeEnter(el) { // 动画进入之前的回调 el.style.transform = 'translateX(500px)'; }, enter(el, done) { // 动画进入完成时候的回调 el.offsetWidth; el.style.transform = 'translateX(0px)'; done(); }, afterEnter(el) { // 动画进入完成之后的回调 this.isshow = !this.isshow; } } 4.定义动画过渡时长和样式 .show{ transition: all 0.4s ease; } 需要使用 transition-group组件把v-for循环的列表包裹起来，才能让新增的也有动画效果

什么是组件： 组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可； 组件化和模块化的不同：

  • 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
  • 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；

父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法 <son @func="getMsg"> 子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法 还可以使用 this.$refs 来获取元素和组件，简单的实现传值的方法

命名视图路由实现经典布局
<router-view name="a"></router-view>
<router-view name="b"></router-view>
// 创建路由对象
    var router = new VueRouter({
      routes: [ { path: '/', components: {
            default: header,
            a: sidebar,
            b: mainbox
          } } ]  });
  1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  2. methods方法表示一个具体的操作，主要书写业务逻辑；
  3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods

nrm提供了一些最常用的NPM包镜像地址，能够让我们快速的切换安装包时候的服务器地址； 什么是镜像：原来包刚一开始是只存在于国外的NPM服务器，但是由于网络原因，经常访问不到，这时候，我们可以在国内，创建一个和官网完全一样的NPM服务器，只不过，数据都是从人家那里拿过来的，除此之外，使用方式完全一样；

  1. 运行npm i nrm -g全局安装nrm包；
  2. 使用nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址；
  3. 使用nrm use npm或nrm use taobao切换不同的镜像源地址；

借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令。 下面是一个案例，一步步使用webpack来解决问题

初步使用webpack打包构建列表隔行变色案例

  1. 运行npm init初始化项目，使用npm管理项目中的依赖包
  2. 创建项目基本的目录结构
  3. 使用cnpm i jquery --save安装jquery类库
  4. 创建main.js并书写各行变色的代码逻辑：
import $ from 'jquery'    // 导入jquery类库
    $('#list li:even').css('backgroundColor','lightblue');
    $('#list li:odd').css('backgroundColor','pink');
5. 直接在页面上引用`main.js`会报错，因为浏览器不认识`import`这种高级的JS语法，需要使用webpack进行处理，webpack默认会把这种高级的语法转换为低级的浏览器能识别的语法；
6. 运行`webpack 入口文件路径   输出文件路径`对`main.js`进行处理：
webpack src/js/main.js dist/bundle.js
如何使用webpack的配置文件简化打包命令，直接输入webpack回车即可打包：
1. 在项目根目录中创建`webpack.config.js`配置文件
2. 由于运行webpack命令的时候，webpack需要指定入口文件和输出文件的路径，所以，我们需要在`webpack.config.js`中配置这两个路径：
var path = require('path'); // 导入处理路径的模块
    // webpack.config.js导出一个配置对象，将来webpack在启动的时候会默认来查找，并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: {    // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        } }

使用webpack打包css文件，需要安装两个插件`cnpm i style-loader    css-loader --save-dev`，修改webpack.config.js配置文件
module: {         // 用来配置第三方loader模块的
        rules: [     // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }

使用webpack打包less文件，运行`cnpm i less-loader less -D`，修改配置文件
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },

ES6中使用 export default 和 export 导出模块中的成员，使用 import ** from **和 import '路径' ，还有 import {a, b} from '模块标识' 导入其他模块。 export default 向外暴露的成员，可以使用任意的变量来接收（如export default info），但default只允许向外暴露1次。可以同时使用export default和export向外暴露成员，使用 export 向外暴露的成员只能使用 { }的形式来接收。 使用export导出的成员，如果就想换个名称来接收，可以使用as来起别名；

avatar
文章
阅读
粉丝