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:用户程序的重 ...
随机推荐
- ssh登陆服务器locale告警(-bash: warning: setlocale:)的处理方法
使用ssh远程登陆 IDC机房服务器,发现老是出现如下告警信息: -bash: warning: setlocale: LC_CTYPE: cannot change locale (en_US.UT ...
- Linux运维笔记-日常操作命令总结(2)
回想起来,从事linux运维工作已近5年之久了,日常工作中会用到很多常规命令,之前简单罗列了一些命令:http://www.cnblogs.com/kevingrace/p/5985486.html今 ...
- hdu 3038 给区间和,算出多少是错的
参考博客 How Many Answers Are Wrong Problem Description TT and FF are ... friends. Uh... very very good ...
- Linux常用指令【转载】
[收藏]Linux常用指令[转载] $ 命令行提示符 粗体表示命令 斜体表示参数 filename, file1, file2 都是文件名.有时文件名有后缀,比如file.zip command 命令 ...
- 11.18 Daily Scrum
这两天开发人员陆续提交了自己开发的部分. 目前所有开发任务都已经完成,剩下的只是测试和整合,做最后的冲刺. 明天的任务: 李承晗:测试与整合
- 【CV】ICCV2015_Unsupervised Learning of Spatiotemporally Coherent Metrics
Unsupervised Learning of Spatiotemporally Coherent Metrics Note here: it's a learning note on the to ...
- 《Linux内核设计与实现》读书笔记 18
第十八章调试 18.1 准备开始 一个bug:大部分bug通常都不是行为可靠而且定义明确的 一个藏匿bug的内核版本:找出bug首先出现的版本 相关内核代码的知识和运气 18.2内核中的bug 可以有 ...
- 个人实验 github地址:https://github.com/quchengyu/cher
一.实践目的 1.掌握类的定义,对象的创建. 2.掌握实现封装.继承.多态的方法,掌握各种修饰符的使用. 3.掌握将对象数组作为方法的参数和返回值. 4.掌握抽象类与接口的概念及实现,理解动态绑定机制 ...
- [Intellij IDEA]_eclipse项目导入
http://www.cnblogs.com/lindp/p/4484390.html
- 201306114357-实验3-C语言
#include<stdio.h>#include <stdlib.h>#include <time.h>main(){ int a,b,c,n,u,i,sum; ...