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 相关文章推荐
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
JS交换变量的方法
Jan 21 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
Sep 20 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
BootStrap 弹出层代码
Feb 09 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
解决vue-loader加载不上的问题
Oct 21 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 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 存取 MySQL 数据库的一个例子
2006/10/09 PHP
php表单提交问题的解决方法
2011/04/12 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
ng-zorro-antd 入门初体验
2018/12/03 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
2021/02/10 Javascript
Flask SQLAlchemy一对一,一对多的使用方法实践
2013/02/10 Python
Python入门篇之数字
2014/10/20 Python
python友情链接检查方法
2015/07/08 Python
python基于ID3思想的决策树
2018/01/03 Python
使用Python和xlwt向Excel文件中写入中文的实例
2018/04/21 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
LookFantastic丹麦:英国美容护肤精品在线商城
2016/08/18 全球购物
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
英国最大的电子零件及配件零售商:Partmaster
2017/04/24 全球购物
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
King Apparel官网:英国街头服饰品牌
2019/09/05 全球购物
旅游管理专业大学生职业规划书
2014/02/27 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
股东授权委托书范文
2014/09/13 职场文书
退货证明模板
2015/06/23 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
Python图像处理之图像拼接
2021/04/28 Python
Android在Sqlite3中的应用及多线程使用数据库的建议
2022/04/24 Java/Android