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

原文地址:https://www.cnblogs.com/smart-girl/p/9733739.html

时间: 2024-08-29 12:55:19

cdn模式下vue的基本用法的相关文章

Vue组件基础用法

前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需,使用不同的组件来拼接页面.这种开发模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦.本文将详细介绍Vue组件基础用法 概述 组件是一个自定义元素或称为一个模块,包括所需的模板.逻辑和样式.在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能.通过Vue.js的声明式渲染后,

5.1 vim介绍 5.2 vim颜色显示和移动光标 5.3 vim一般模式下移动光标 5.4 vim一般模式下复制、剪切和粘贴

5.1 vim介绍 5.2 vim颜色显示和移动光标 5.3 vim一般模式下移动光标 5.4 vim一般模式下复制.剪切和粘贴 5.1 vim介绍 vim 是 vi的一个升级版本 vim 是带有颜色显示的 再试下vim 命令 [[email protected] ~]# vi /etc/passwd[[email protected] ~]# vim /etc/passwd-bash: vim: 未找到命令 [[email protected] ~]# yum install -y vim-e

浅析WPF中MVVM模式下命令与委托的关系

??各位朋友大家好,我是Payne,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com.最近因为项目上的原因开始接触WPF,或许这样一个在现在来讲显得过时的东西,我猜大家不会有兴趣去了解,可是你不会明白对某些保守的项目来讲,安全性比先进性更为重要,所以当你发现银行这类机构还在使用各种"复古"的软件系统的时候,你应该相信这类东西的确有它们存在的意义.与此同时,你会更加深刻地明白一个道理:技术是否先进性和其流行程度本身并无直接联系.由此我们可以推论出:一项不流行

【转】linux下find查找命令用法

原文链接 http://www.jb51.net/os/RedHat/1307.html Linux下find命令在目录结构中搜索文件,并执行指定的操作.Linux下find命令提供了相当多的查找条件,功能很强大.由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时间来了解一下.即使系统中含有网络文件系统( NFS),find命令在该文件系统中同样有效,只你具有相应的权限. 在运行一个非常消耗资源的find命令时,很多人都倾向于把它放在后台执行,因为遍历一个大的文件系统可

Linux下套接字详解(十)---epoll模式下的IO多路复用服务器

epoll模型简介 epoll可是当前在Linux下开发大规模并发网络程序的热门人选,epoll 在Linux2.6内核中正式引入,和select相似,其实都I/O多路复用技术而已,并没有什么神秘的. 其实在Linux下设计并发网络程序,向来不缺少方法,比如典型的Apache模型(Process Per Connection,简称PPC),TPC(Thread PerConnection)模型,以及select模型和poll模型,那为何还要再引入Epoll这个东东呢?那还是有得说说的- 常用模型

简介Intel MIC上的分布式开发以及Offload模式下的各种限制

最近要在MIC机群上做分布式开发,发现有两种模式可以用: 1) offload模式:该模式和GPGPU编程思想类似,把并行度高的代码转移到local的MIC处理器上执行,其它代码仍然在CPU上执行.MIC只负责本地计算,分布式通信必须在CPU上执行. 2)symmetric模式:编译出在MIC和CPU上执行的两份二进制代码.该模式逻辑上允许MIC进行分布式通信,虽然物理上消息还是从CPU走的.这种模式编程最大的难点是load balancing问题. 通过几天探索,发现了offload模式下的各

第三篇:Linux的基本操作与文件管理(纯命令行模式下)(上)

与Windows做对比来介绍Linux的基本操作方法与文件管理!(纯命令行模式下,为何要强调是命令行呢?因为在第二篇结尾我说明了,运维工作中几乎都是在用命令行操作的) 为什么要和Windows做对比呢?因为我当初学习Linux时整个脑袋完全没有它的概念,一直在想linux的"C盘.D盘"在哪里呢?怎么安装和卸载一些程序呢?怎么创建文件夹和创建文档? (其实把linux和Windows对比学习的方法很不科学,不过我笨人有笨办法呗,这么学法我感觉还是挺快的,一旦上手linux后慢慢你就懂了

工作在服务器模式下的rsync的安装、配置与使用22

rsync命令可以用于在本地系统中复制文件(如同cp命令),也可以在本地和远程主机之间复制文件(如同scp命令),还可以工作在服务器模式下(使用功能上类似FTP.SAMBA等).本文主要介绍rsync在服务器模式下的配置和应用举例. rsync命令常用选项 -n: 仅做执行测试,不做实际动作 -v, --verbose: 输出详细执行信息 -q, --quiet: 静默模式 -c, --checksum: 开启校验功能,强制对文件传输进行校验 -r, --recursive:递归复制 -a, -

四周第二次课(1月3日) 5.1 vim介绍 5.2 vim颜色显示和移动光标 5.3 vim一般模式下移动光标 5.4 vim一般模式下复制、剪切和粘贴

四周第二次课(1月3日)5.1 vim介绍5.2 vim颜色显示和移动光标5.3 vim一般模式下移动光标5.4 vim一般模式下复制.剪切和粘贴   [[email protected] ~]# [[email protected] ~]# [[email protected] ~]# [[email protected] ~]# [[email protected] ~]# [[email protected] ~]# Last login: Tue Jan 2 22:13:55 2018