Vue的基本使用
VUE
- vue挂载点
el:"标签id"
- vue绑定属性
:v-model:"属性值"
- vue绑定事件
@click:"事件名"
- vue基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="vuejs/vue.js"></script> // 一点要引入vue.js文件
</head>
<body>
<div id="box">
<button @click="ccc">+</button>
<input type="text" v-model="aa">
<button @click="ddd">-</button>
</div>
<script>
// 生成一个vue对象
let vm = new Vue({
// 绑定挂载点
el:'#box',
// 数据
data:{
aa:0
},
// 方法
methods:{
ccc(){
this.aa+=1
},
ddd(){
this.aa-=1
}
}
}
)
</script>
</body>
</html>
Vue的基本使用的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程（2）相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程（1）功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0，你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼？
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- 使用gcc命令编译多个文件
使用g++命令直接一次性编译多个文件 这里以简单的HelloWorld程序为例,假设我们一共有三个文件:main.cpp,HelloWorld.cpp和HelloWorld.h. 其中HelloWor ...
- 用SAX解析xml文件，java
(此文为(https://www.imooc.com/video/4482)之随笔) 1.用SAX解析xml文件大致分为三步 写了一个XML文件作为例子 (1)main方法代码如下: import j ...
- python基础之Day23
1.封装 什么是? 封:明确地把属性隐藏起来 ,对外隐藏,对内开放 申请名称空间,往里面装入一系列名字 /属性(类比 类 和对象 只是装的概念) 为什么要用? __init__往对象里丢属性 封装 ...
- ef 连接mysql，code first
方法“MySql.Data.MySqlClient.MySqlProviderServices.GetDbProviderManifestToken(System.Data.Common.DbConn ...
- C/C++生成静态库动态库及语言交互
C++静态库与动态库(比较透彻) Go中调用C的动态库与静态库 我的示例 文件结构 |- sample |- c |- libsample |- libsample.h |- libsample.cp ...
- 记录学习WeakReference发现的问题
在学习ThreadLocal时发现ThreadLocalMap里的Entry使用到了WeakReference,所以重新学习WeakReference 查看相关博客例如: https://blog.c ...
- Python 的经典设计格言，格言来源于 Python 但不限于 Python
The Zen of Python, by Tim Peters Beautiful is better than ugly. Explicit is better than implicit. Si ...
- thymeleaf拆分头部（head）显示异常问题
问题描述: 刚用thymeleaf不久,考虑到公共头部的导入css,js代码,需要拆分. 拆分之后,bootstrap-select下拉多选框出现“样式异常”,本认为是头部拆分问题,css样式未导入成 ...
- linux系统下部署DNS反向解析
DNS服务概述 DNS(Domain Name System)域名系统,能够提供域名与IP地址的解析服务. 反向解析 反向解析是从IP地址到域名的解析过程.主要作用于服务器的身份验证. 部署反向解析 ...
- 将n个东西分成n1，n2，n3，n4，....nr 共 r组分给r个人有多少种分法。
(n!/(n1! *n2! *n3!..nr!) ) * r!/( 同数量组A的数量! 同数量组B的数量!....) 比方20个东西分成2,2,,2,2 3,3,3,3 8组分给8个人有多少种 ...