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

v-html 直接插入html结构

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

v-if

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

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

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

v-show

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

v-for
数组

模板中使用 v-for

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

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

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

$watch

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

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

事件

复选框

单选框

select 列表

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

局部组件

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

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

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
安装
1、直接下载 / CDN
https://unpkg.com/vue-router/dist/vue-router.js
2、NPM
推荐使用淘宝镜像:
cnpm install vue-router

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

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

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

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

本文升华自菜鸟教程vue模块
详细的demo见我的github:https://github.com/JserJser/reactWebApp/tree/master/vue-cdn
cdn模式下vue的基本用法的更多相关文章
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
基于 Vue.js 之 iView UI 框架非工程化实践记要 像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...
- webpack + vue 在dev和production模式下的小小区别
上周的某一天,和一位同样是前端技术极度爱好的开发者朋友聊天,他在提出了一个问题,他写的vue程序为什么在dev模式运行良好,而在production模式就直接报错了.这让我感到惊讶,还有这么神奇的事情 ...
- 066——VUE中vue-router之rewrite模式下配置404页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示
VUE Node模式下,如何改变菜单的颜色,如何将超长文字缩略显示,在鼠标进入后展开全部显示,鼠标移出则恢复缩略显示: “事件”引起变量值的变化,系统引擎自动根据变量值的变化刷新页面 在VUE Nod ...
- Vue项目history模式下微信分享总结
原文 : http://justyeh.top/post/39/ 2019-07-02 Vue微信分享 每回遇到微信分享都是一个坑,目前的商城项目使用Vue开发,采用history的路由模式,配置微信 ...
- vim 模式下的几个快捷用法
1.ctrl + v (-- VISUAL BLOCK --) 选中块模式,y 复制,d 剪切,p 粘贴,Esc退出模式 2.Shift + v (-- VISUAL LINE -- ) 快速行选 ...
- 解决IE报错[vue router]Failed to resolve async component default:strict 模式下不允许分配到只读属性
之前遇到过一个奇怪的问题,在其他浏览器下一切正常,但在万恶的IE下,却一直不行. 具体问题场景就是:比如orderDetail页面出现问题,那么只要是路由跳转的,点第1次无法跳转,必须得点第2次才可以 ...
- IView入门练习~CDN模式全局加载JS
关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品. 特性 高质量.功能丰富 友好的 API ,自由灵活地使用空间 细致.漂亮的 UI 事 ...
- ASM:《X86汇编语言-从实模式到保护模式》第8章:实模式下硬盘的访问,程序重定位和加载
第八章是一个非常重要的章节,讲述的是实模式下对硬件的访问(这一节主要讲的是硬盘),还有用户程序重定位的问题.现在整理出来刚好能和保护模式下的用户程序定位作一个对比. ★PART1:用户程序的重 ...
随机推荐
- Popush End
coconut: (咳咳)作为一名后台开发者,我觉得自己在这次作业完成中最大的收获就是跟node.js的异步模型打交道.首先我得出了一个这样的结论:异步模型能够提高服务器的高性能并发请求,但是却加大了 ...
- 11.18 Daily Scrum
这两天开发人员陆续提交了自己开发的部分. 目前所有开发任务都已经完成,剩下的只是测试和整合,做最后的冲刺. 明天的任务: 李承晗:测试与整合
- Beta阶段爬取数目预估
预计于12月29号能进行Beta版本发布. Beta阶段我们的爬取动作应该更有针对性,在爬取期间如若数据处理小组有需求,会优先爬取数据处理小组提供的种子链接.预估在项目展示之前能够爬取的数目: 普通网 ...
- 量产救U盘
同事U盘不能格式化,快速格式化失败,非快速格式化也失败.就问谁有360安全软件,试试能不能格式化. 我说我有火绒,但是不知道火绒并没有格式化U盘的功能(应该没有吧,反正我找了以后没找到) 那怎么办呢? ...
- Linux MYSQL:dead but pid file exists
MYSQL dead but pid file exists问题 - CSDN博客https://blog.csdn.net/shilian_h/article/details/38020567 Er ...
- Glace:generator-jhipster, adding User entity enhancement management
https://github.com/jhipster/generator-jhipster/issues/2538 jhipster,很好用的开发工具.国外知名度高,国内未普及,国外大公司在用. j ...
- Linux列举所有隐藏文件
ll 命令是 ls -l的缩写 ls -a是列举所有(all)文件,包含隐藏文件,以.开头的文件. ls -l是以列表(list)方式列举文件. http://bbs.chinaunix.net/th ...
- node.js依赖express解析post请求四种数据格式()
分别是这四种: www-form-urlencoded, form-data, application/json, text/xml www-form-urlencoded 这是http的post请求 ...
- 流程控制之if判断,while循环,for循环
if判断? 什么是if判断? 判断一个条件如果成立则做...不成立则... 为什么要有判断? 让计算机像人一样具备判断的能力 如何用if判断 if 条件1: code1 code2 cod ...
- Bootstrap手风琴效果
前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...