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:`
标题组件
`})//定义html结构

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

写法二

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

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

局部组件

定义在Vue实例内:

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

组件数据

定义方式：

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

动态展示组件

传递数据到组件

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

路由

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

自动安装

通过