cdn模式下vue的基本用法详解


Posted in Javascript onOctober 07, 2018

我们知道jq是简化了dom操作,而react和vue则是通过使用虚拟dom的方式,不需要频繁的更改ui界面,而是通过更改数据的方式来更新界面。我们知道些jq插件时会在IFFE中传入jQuery,jQuery在此程序中映射为符号,这样可以避免$号被其他库覆写。其实vue中new Vue()对象,效果也是类似,可以避免vue范围类的数据或变量被污染。我们先来看一些基本的用法插入文本值

cdn模式下vue的基本用法详解

v-html 直接插入html结构 

cdn模式下vue的基本用法详解 

v-bind属性 <a :href="url" rel="external nofollow" > 

 cdn模式下vue的基本用法详解

 v-if 

cdn模式下vue的基本用法详解 

v-else 用作 v-if 的 else-if 块。可以链式的多次使用

cdn模式下vue的基本用法详解

v-model v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。

cdn模式下vue的基本用法详解

v-on 按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。 <a @click="doSomething">

cdn模式下vue的基本用法详解

v-show

cdn模式下vue的基本用法详解

Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。

cdn模式下vue的基本用法详解

v-for 数组

cdn模式下vue的基本用法详解

模板中使用 v-for

cdn模式下vue的基本用法详解

v-for 可以通过一个对象的属性来迭代数据

cdn模式下vue的基本用法详解

computed与method 可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

cdn模式下vue的基本用法详解

computed 属性默认只有 getter ,不过在需要时你也可以提供一个 setter

cdn模式下vue的基本用法详解 $watch cdn模式下vue的基本用法详解

style 在对象中传入更多属性用来动态切换多个 class

cdn模式下vue的基本用法详解

直接绑定到一个样式对象,v-bind:style 可以使用数组将多个样式对象应用到一个元素上

cdn模式下vue的基本用法详解

事件

 cdn模式下vue的基本用法详解

复选框

cdn模式下vue的基本用法详解

单选框

cdn模式下vue的基本用法详解

select 列表

cdn模式下vue的基本用法详解

组件组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。全局组件所有实例都能用全局组件 

cdn模式下vue的基本用法详解 

局部组件

cdn模式下vue的基本用法详解

prop 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop"

cdn模式下vue的基本用法详解

自定义事件父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件

cdn模式下vue的基本用法详解

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

安装

1、直接下载 / CDN https://unpkg.com/vue-router/dist/vue-router.js

2、NPM 推荐使用淘宝镜像: cnpm install vue-router

cdn模式下vue的基本用法详解

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件。

cdn模式下vue的基本用法详解

mixin mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改。如果组件中定义的方法与混入对象中的方法/属性一样,组件中的优先级大于混入对象中的(方法会调用多次)

cdn模式下vue的基本用法详解

Ajax Vue 要实现异步加载需要使用到 vue-resource 库 get请求

cdn模式下vue的基本用法详解

post 发送数据到后端,需要第三个参数 {emulateJSON:true}。 emulateJSON 的作用: 如果Web服务器无法处理编码为 application/json 的请求,你可以启用 emulateJSON 选项。

cdn模式下vue的基本用法详解

本文升华自菜鸟教程vue模块详细的demo见我的 github: https://github.com/JserJser/reactWebApp/tree/master/vue-cdn

Javascript 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
详解Angularjs filter过滤器
Feb 06 Javascript
JS排序之选择排序详解
Apr 08 Javascript
详解tween.js 中文使用指南
Jan 05 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
layui中table表头样式修改方法
Aug 15 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
vue实现添加与删除图书功能
Oct 07 #Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 #Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 #Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 #Javascript
详谈js的变量提升以及使用方法
Oct 06 #Javascript
浅析js中mvvm模式实现的原理
Oct 06 #Javascript
js for终止循环 跳出多层循环
Oct 04 #Javascript
You might like
消息持续发送的完整例子
2006/10/09 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
Android App中DrawerLayout抽屉效果的菜单编写实例
2016/03/21 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
2013/05/10 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
jQuery预加载图片常用方法
2015/06/15 Javascript
javascript数组去重小结
2016/03/07 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
基于Vue.js实现简单搜索框
2020/03/26 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
举例讲解Django中数据模型访问外键值的方法
2015/07/21 Python
Python读写及备份oracle数据库操作示例
2018/05/17 Python
基于python3 OpenCV3实现静态图片人脸识别
2018/05/25 Python
基于python实现计算且附带进度条代码实例
2020/03/31 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
优秀中学生事迹材料
2014/01/31 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
《秋游》教学反思
2014/04/24 职场文书
保送生自荐信
2015/03/06 职场文书
工商行政处罚决定书
2015/06/24 职场文书