vue.js 学习笔记
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实例的生命周期
初始化阶段
- new vue()
- 初始化 events、生命周期管理
- beforecreate()
- 初始化 data、methods
- created()
- 根据el绑定编译模板
- beforemount()
- 替换页面中对应的元素
- mounted()
运行阶段
- 数据改变
- beforeupdate()
- 更新页面数据
- updated()
释放阶段
- 对象释放程序执行
- beforedestroy()
- 释放事件监听器等
- destroyed()
网络请求 get、post、jsonp
可用vue-resource包或axios包。
动画
用<transition></transition>
标签和css实现动画。
全场动画
-
.v-enter-active
进入渐变过程-
.v-enter
开始进入状态 -
.v-enter-to
完结进入状态
-
-
v-leave-active
离开渐变过程-
v-leave
开始离开状态 -
v-leave-to
完结离开状态
-
第三方库:animate.css
半场动画
通过事件实现。
-
@before-enter
进入前 -
@enter
进入 -
@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
共享组件数据
-
state:{}
存储数据this.$store.state.***
-
mutations:{}
修改数据的方法this.$store.commit("方法名称", arg)
-
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组件:
<template>
<script>
<style>
项目结构
- src/
- main.js
- index.html
- js/
- images/
- css/
- dist/
- node_modules/
- package.json
- webpack.config.js
上一篇: 2014 年10个最佳的PHP图像操作库,2014php_PHP教程
下一篇: 常用在线软件获取