Vue入门学习笔记【基本概念、对象、过滤器、指令等】


Posted in Javascript onApril 13, 2019

本文实例讲述了Vue入门基本概念与使用。分享给大家供大家参考,具体如下:

1. Vue.js是什么?

1). 一位华裔前Google工程师(尤雨溪)开发的前端js库

2). 作用: 动态构建用户界面

3). 特点:

* 遵循MVVM模式
* 编码简洁, 体积小, 运行效率高, 移动/PC端开发
* 它本身只关注UI, 可以轻松引入vue插件和其它第三库开发项目

4). 与其它框架的关联:

* 借鉴angular的模板和数据绑定技术
* 借鉴react的组件化和虚拟DOM技术

5). vue包含一系列的扩展插件(库):

* vue-cli: vue脚手架
* vue-resource(axios): ajax请求
* vue-router: 路由
* vuex: 状态管理
* vue-lazyload: 图片懒加载
* vue-scroller: 页面滑动相关
* mint-ui: 基于vue的组件库(移动端)
* element-ui: 基于vue的组件库(PC端)

2. 基本使用

1). 引入vue.js

2). 创建Vue实例对象(vm), 指定选项(配置)对象

el : 指定dom标签容器的选择器
data : 指定初始化状态数据的对象/函数(返回一个对象)

3). 在页面模板中使用{{}}或vue指令

3. Vue对象的选项

1). el

指定dom标签容器的选择器

Vue就会管理对应的标签及其子标签

2). data

对象或函数类型

指定初始化状态属性数据的对象

vm也会自动拥有data中所有属性

页面中可以直接访问使用

数据代理: 由vm对象来代理对data中所有属性的操作(读/写)

3). methods

包含多个方法的对象

供页面中的事件指令来绑定回调

回调函数默认有event参数, 但也可以指定自己的参数

所有的方法由vue对象来调用, 访问data中的属性直接使用this.xxx

4). computed

包含多个方法的对象

对状态属性进行计算返回一个新的数据, 供页面获取显示

一般情况下是相当于是一个只读的属性

利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化

如何给对象定义get/set属性

在创建对象时指定:

get name () {return xxx} / set name (value) {}

对象创建之后指定:

Object.defineProperty(obj, age, {get(){}, set(value){}})

5). watch

包含多个属性监视的对象

分为一般监视和深度监视

'xxx' : {
    deep : true,
    handler : fun(value)
}

另一种添加监视方式:

vm.$watch('xxx', funn)

4. 过渡动画

利用vue去操控css的transition/animation动画

模板: 使用<transition name='xxx'>包含带动画的标签

css样式

.fade-enter-active: 进入过程, 指定进入的transition
.fade-leave-active: 离开过程, 指定离开的transition
.xxx-enter, .xxx-leave-to: 指定隐藏的样式

编码例子

.xxx-enter-active, .xxx-leave-active {
   transition: opacity .5s
  }
  .xxx-enter, .xxx-leave-to {
   opacity: 0
  }
<transition name="xxx">
   <p v-if="show">hello</p>
  </transition>

5. 生命周期

vm/组件对象

生命周期图

主要的生命周期函数(钩子)

created() / mounted(): 启动异步任务(启动定时器,发送ajax请求, 绑定监听)
beforeDestroy(): 做一些收尾的工作

6. 自定义过滤器

1). 理解

对需要显示的数据进行格式化后再显示

2). 编码

1). 定义过滤器

Vue.filter(filterName, function(value[,arg1,arg2,...]){
 // 进行一定的数据处理
 return newValue
})

2). 使用过滤器

<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>

7. vue内置指令

v-text/v-html: 指定标签体

        * v-text : 当作纯文本
        * v-html : 将value作为html标签来解析

v-if v-else v-show: 显示/隐藏元素

        * v-if : 如果vlaue为true, 当前标签会输出在页面中
        * v-else : 与v-if一起使用, 如果value为false, 将当前标签输出到页面中
        * v-show: 就会在标签中添加display样式, 如果vlaue为true, display=block, 否则是none

v-for : 遍历

        * 遍历数组 : v-for="(person, index) in persons"  
        * 遍历对象 : v-for="value in person"   $key

v-on : 绑定事件监听

       * v-on:事件名, 可以缩写为: @事件名
        * 监视具体的按键: @keyup.keyCode   @keyup.enter
        * 停止事件的冒泡和阻止事件默认行为: @click.stop   @click.prevent
        * 隐含对象: $event

v-bind : 强制绑定解析表达式  

        * html标签属性是不支持表达式的, 就可以使用v-bind
        * 可以缩写为:  :id='name'
        * :class
          * :class="a"
                * :class="{classA : isA, classB : isB}"
                * :class="[classA, classB]"
        * :style
                :style="{color : color}"

v-model

        * 双向数据绑定
        * 自动收集用户输入数据

ref : 标识某个标签

        * ref='xxx'
        * 读取得到标签对象: this.$refs.xxx

8. 自定义指令

1). 注册全局指令

Vue.directive('my-directive', function(el, binding){
 el.innerHTML = binding.value.toUpperCase()
})

2). 注册局部指令

directives : {
 'my-directive' : function(el, binding) {
   el.innerHTML = binding.value.toUpperCase()
 }
}

3). 使用指令

<div v-my-directive='xxx'>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
jquery.validate分组验证代码
Mar 17 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
理解JavaScript表单的基础知识
Jan 25 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
BootStrapTable 单选及取值的实现方法
Jan 10 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 #Javascript
JS实现倒序输出的几种常用方法示例
Apr 13 #Javascript
JS实现马赛克图片效果完整示例
Apr 13 #Javascript
ES6入门教程之let、const的使用方法
Apr 13 #Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 #Javascript
微信小程序template模版的使用方法
Apr 13 #Javascript
vue基于viewer实现的图片查看器功能
Apr 12 #Javascript
You might like
PHP中使用mktime获取时间戳的一个黑色幽默分析
2012/05/31 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
2014/11/13 Javascript
javascript 动态创建表格
2015/01/08 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
node实现分片下载的示例代码
2018/10/17 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
vue的keep-alive用法技巧
2019/08/15 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
PyQt5打开文件对话框QFileDialog实例代码
2018/02/07 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
活动总结新闻稿
2014/08/30 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
MongoDB数据库之添删改查
2022/04/26 MongoDB