好!
vue使用了mvvm架构来设计框架。架构是说逻辑分层,框架是指具体的实现。很明显vm的实现是这个框架的核心,也是最复杂的地方。从更大范围上看,vue专注界面的实现,也就是mvc中的v层。因此,vue只是一个局部框架,传统mvc中的模型和业务不是vue的范畴,需要自行设计。
vm层:
el:
控制的区域
methods:{}
可用方法
watch:{}
监听数据改变
router:
监听路径,实现页面内路由
computed:
计算属性。它监听相关数据并求值
render:
渲染替换区域
model层:
data:{}
数据
props:[]
标签属性。用于获取标签属性值(只读)
view层:
{{ }}
插值表达式,不提倡直接操控domv-html
插htmlv-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
的argmodifiers
修饰符,如direct.mm.gg
的mm和ggvnode
虚拟节点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>
$refs
在vue实例中,保存了被ref
指令标识的dom属性值。
可用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.***
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>
如对本文有疑问, 点击进行留言回复!!
asp.net中ajax和一般处理程序(handler.ashx)的交互
egg.js创建项目,目录介绍,简单使用,sequelize mysql使用
网友评论