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的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- python基础 (初识函数&函数进阶)
函数基础部分 .什么是函数? 函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 函数能提高应用的模块性,和代码的重复利用率. 2.定义函数 定义:def 关键词开头,空格之后接函数名 ...
- Xamarin.Android 报错问题
如果程序无法调试,输出中提示:(无法连接到logcat,GetProcessId 返回了:0) https://yq.aliyun.com/articles/618738
- Navicat Premium 修改MySQL密码（忘记密码的情况下）
Navicat Premium 修改MySQL密码 1,首先,Navicat Premium还能够连接MySQL. 2,选择数据库,右键单击,选择“命令行模式...”,下图示例 3,打开命令行模式, ...
- Python3.7 Scrapy crawl 运行出错解决方法
安装的是Python3.7,装上依赖包和scrapy后运行爬虫命令出错 File "D:\Python37\lib\site-packages\scrapy\extensions\telne ...
- CentOS7安装特定版本的Docker
查询可用版本 [root@bogon ~]# yum list docker-ce --showduplicates | sort -r 查询结果 * updates: centos.ustc.edu ...
- 根据缺少的so，安装相关的软件
http://blog.csdn.net/dianyueneo/article/details/8161350. ubuntu缺少libGL.so sudo apt-get install apt-f ...
- inet_pton, inet_ntop
Linux下这2个IP地址转换函数,可以在将IP地址在“点分十进制”和“整数”之间转换而且,inet_pton和inet_ntop这2个函数能够处理ipv4和ipv6.算是比较新的函数了. inet_ ...
- PHP中逻辑运算符的高效用法---&&和||
偶尔遇到这个,查了一下,所以就摘录了. 逻辑运算符无非是将值进行逻辑运算.还有其它用法吗?首先让我们先看一下下面的代码,然后我们再一起展开话题.提前给出结论就是(&&)or(||)”这 ...
- cropper.js 裁剪图片
https://blog.csdn.net/weixin_38023551/article/details/78792400
- 周报数据采集之生存图片（execl方法）
https://blog.csdn.net/Luzaofa/article/details/81675364 Python之Excel chart另存为图片大家好,好久没有更新博客了,这一段时间有点忙 ...