vue.js 学习笔记

目录

• vue.js 学习笔记
  • 前言
  • MVVM 和 MVC 架构
  • Vue 对象
  • 样式
  • 过滤器
  • 键值修饰符
  • 自定义指令
  • 组件
    • 全局组件
      • 写法一
      • 写法二
    • 局部组件
    • 组件数据
    • 动态展示组件
    • 传递数据到组件
  • 路由
    • 自动安装
    • 手动安装
    • 路由匹配规则
      • 传递参数
      • 子路径
      • 命名视图
  • DOM操作
  • Vue实例的生命周期
    • 初始化阶段
    • 运行阶段
    • 释放阶段
  • 网络请求 get、post、jsonp
  • 动画
    • 全场动画
    • 半场动画
    • 组动画
  • 工具
    • vscode 插件
    • 自动构建
    • 源代码
    • 样式
    • 模板文件
  • 项目结构

vue.js 学习笔记

前言

好！

MVVM 和 MVC 架构

• MVVM：M 是模型（数据），V是视图（界面），VM是V和M的双向协调者。
• MVC：M 是模型，V是视图，C是控制器（业务）

vue使用了MVVM架构来设计框架。架构是说逻辑分层，框架是指具体的实现。很明显VM的实现是这个框架的核心，也是最复杂的地方。从更大范围上看，vue专注界面的实现，也就是MVC中的V层。因此，vue只是一个局部框架，传统MVC中的模型和业务不是vue的范畴，需要自行设计。

Vue 对象

vm层：
el: 控制的区域
methods:{} 可用方法
watch:{} 监听数据改变
router: 监听路径，实现页面内路由
computed: 计算属性。它监听相关数据并求值
render: 渲染替换区域

Model层：
data:{} 数据
props:[] 标签属性。用于获取标签属性值（只读）

view层：

• {{ }} 插值表达式，不提倡直接操控DOM
• v-html 插html
• v-text 插纯文本
• v-cloak 防闪烁
• v-bind: 绑定属性，缩写:
• v-model 表单双向数据绑定
• v-on: 绑定事件,缩写@
  • .stop 停止事件冒泡
  • .prevent 禁止默认行为
  • .capture 捕获内层事件
  • .self 只触发自身事件
  • .once 只触发一次事件
• v-for 循环渲染，如v-for="item in xxx"
  • 需用:key保序，保证项对应关系
• v-if 控制是否显示（创建或移除html实体）
• v-show 用样式控制显示

样式

html class 样式，可以通过{typeClassName:bool,...}的对象来引用对应名称的样式表进行绑定。

html style 内联样式通过{styleName:value,...}绑定。

过滤器

过滤器提供了文本格式化的功能，可用在插值表达式和v-bind：表达式内。

vm层：

//全局过滤器
Vue.filter("filterName",function (msg){})//filterName是过滤器的名字，msg是默认传过来的字符串，也可添加其他参数。

//局部过滤器，定义在new Vue对象内
filters:{
    filterName：function(msg){}
}

View层：
{{ str | filterName}} 过滤器filterName对str进行处理。

键值修饰符

用于扩展键盘事件，可通过Vue.config.keyCodes自定义。

• .enter 回车
• .tab 制表符
• .delete 删除
• .esc esc键
• .sapce 空格
• .up 上
• .down 下
• .left 左
• .right 右

自定义指令

自定义指令对象包含以下钩子函数（可选）：

• bind: 初始化
  • el 绑定函数的第一个参数，表示绑定的元素
  • binding 对象包含以下属性：
    • name 指令名
    • value 绑定的值
    • oldValue 前一个值
    • expression 字符串值
    • arg 指令参数，如direct:arg的arg
    • modifiers 修饰符，如direct.mm.gg的mm和gg
  • vnode 虚拟节点
  • oldVnode 上一个虚拟节点
• inserted: 插入父节点时（插入DOM中）
• update: VNode更新时
• componentUpdated: VNode和子节点全体更新时
• unbind: 解绑时

//全局自定义指令directName
Vue.directive('directName',{
    bind:function(el){},
    inserted:function(el){},
    update:function(el){}
    })

//局部自定义指令,在new Vue对象内定义
driectives:{
    bind:function(el,binding,vnode,oldVnode){}
}

组件

定义UI模块。

全局组件

写法一

var comp= Vue.extend({template:`<h3>标题组件</h3>`})//定义html结构

Vue.component('myComp', comp)//注册组件my-comp

写法二

这种书写方式可以有编辑器提供的语法提示。

Vue.component('myComp2',{template:'#tmp1'})

<template id="tmp1">
    <h3>标题组件2</h3>
</template>

局部组件

定义在Vue实例内:

components:{
    comp3:{
        template:'#temp2'
    }
} 

组件数据

定义方式：

Vue.component('comp4',{
    template:'<h3>{{msg}}</h3>',
    data:function(){
        return {
            msg:'标题数据'
        }
})

动态展示组件

<!-- 根据:is的值展示对应组件 -->
<component :is="'comp4'"></component>

传递数据到组件

props:[] 标签属性传值
$emint() 标签事件传值

路由

前端路由通过网址后的#（锚点）来实现，该网址不会重新访问后端服务器。路由实现跳转功能。

自动安装

通过<script>标签添加vue-router.js引用。

手动安装

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

路由匹配规则

var router = new VueRouter({
    //路由表
    routers:[
        //path 定义#号后的字符串
        //component 定义跳转的目标组件
        //redirect 定义跳转到另一个路径
        {path:'/', redirect: '/home'},
        {path:'/home', component: home},
        {path:'/user', component: user}
    ]
})

<!-- 路由匹配的组件展示在下面标签的占位上 -->
<router-view></router-view>

<!-- 通过锚点改变路由 -->
<a href="#/home">简介</a>
<!-- 通过router-link标签改变路由 -->
<router-link to="/user">客户</router-link>

传递参数

//访问路由路径的参数，如#/home?id=3 (/home)
$route.query.id //3

//路由匹配带参数，如#/home/3 (/home/:id)
$route.params.id //3

子路径

//定义路由路径时，增加children定义子路径
{path:'/home',component:home,
children:[
    {path:'n1', component: n1}
]}

命名视图

//定义路由路径时，修改跳转目标为命名视图
{path:'/home',components:{
    default:head,
    left:left,
    right:right
}}

<!-- 指定视图名称 -->
<router-view></router-view>
<router-view name="left"></router-view>
<router-view name="right"></router-view> 

DOM操作

$refs 在Vue实例中，保存了被ref指令标识的DOM属性值。

Vue实例的生命周期

初始化阶段

1. new Vue()
2. 初始化 Events、生命周期管理
3. beforeCreate()
4. 初始化 data、methods
5. created()
6. 根据el绑定编译模板
7. beforeMount()
8. 替换页面中对应的元素
9. mounted()

运行阶段

1. 数据改变
2. beforeUpdate()
3. 更新页面数据
4. updated()

释放阶段

1. 对象释放程序执行
2. beforeDestroy()
3. 释放事件监听器等
4. destroyed()

网络请求 get、post、jsonp

可用vue-resource包或axios包。

动画

用<transition></transition>标签和css实现动画。

全场动画

1. .v-enter-active 进入渐变过程
   1. .v-enter 开始进入状态
   2. .v-enter-to 完结进入状态
2. v-leave-active 离开渐变过程
   1. v-leave 开始离开状态
   2. v-leave-to 完结离开状态

第三方库：animate.css

半场动画

通过事件实现。

1. @before-enter 进入前
2. @enter 进入
3. @after-enter 进入后

组动画

用<transition-group tag=“ul”> 标签实现列表动画。

工具

nrm 镜像地址选择工具

npm i nrm -g #安装nrm到全局包缓存
nrm ls #列出可用地址
nrm use cnpm #使用cnpm镜像地址

webpack 前端自动化构建工具。
Gulp 基于任务来构建。
mint-ui 移动端界面组件库。
mui 界面的代码片段
bootstrap 界面代码片段
vuex 共享组件数据

1. state:{} 存储数据 this.$store.state.***
2. mutations:{} 修改数据的方法this.$store.commit("方法名称", arg)
3. getters:{} 获取包装后的数据this.$store.getters.***

vscode 插件

Vetur
Vue 2 Snippets

自动构建

webpack-dev-server 监听项目变化，配置和运行webpack的工具
html-webpack-plugin 内存中生成html的插件
style-loader css加载器
css-loader css加载器
less-loader less加载器
sass-loader scss加载器
url-loader url加载器
file-loader 文件加载器
babel 高级语法转低级语法
vue-loader .vue文件加载器

源代码

.js .ts(typescript) .coffee .jsx

样式

.css .sass .scss .less

模板文件

.ejs .jade .vue(webpack)

.vue 文件内容分三部分，实现vue组件：

1. <template>
2. <script>
3. <style>

项目结构

• src/
  • main.js
  • index.html
  • js/
  • images/
  • css/
• dist/
• node_modules/
• package.json
• webpack.config.js