Vue学习之vue实例中的数据、事件和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue.js</title>
<script src="vue.js"></script>
</head>
<body>
<!-- 挂载点、模板、实例之间的关系
挂载点 指的是Vue实例里的el属性对应的dom节点 id
模板 指的是挂载点内部的内容，实例里template属性的内容
实例：定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中
加载数据的方法：
1、插值表示
2、v-text:将内容进行转义
3、v-html：不会转义
事件：
v-on:click="handleClick" 或者 @click="handleClick"
面向数据
-->
<div id="root">
<h1 @click="handleClick">{{msg}}</h1>
</div>
<script>
new Vue({
el:"#root",
data: {
msg:"hello dog!",
number: 123
},
methods: {
handleClick: function() {
// alert(123)
this.msg = "twodoge"
}
}
})
</script>
</body>
</html>
Vue学习之vue实例中的数据、事件和方法的更多相关文章
- 39.VUE学习--组件,子组件中data数据的使用,x-template模板的使用,改变for循环里的某条数据里的值
多处引用相同组件时,操作data不会相互影响 <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级 1.插槽(slot)的基本使用 A:基本使用: <slot></slot> B:默认置:<slot><h1>中间可以放默认值< ...
- vue学习之vue基本功能初探
vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...
- vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus
vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- PatentTips - 在物联网中进行数据过滤的方法和装置
背景技术 [0001] 本发明涉及物联网,特别涉及在物联网进行数据过滤的方法和装置. [0002] 物联网是新一代信息技术的重要组成部分,特指物物相连的网络.具体地,物联网是指通过各种信息传感设备,如 ...
随机推荐
- shiro@RequiresPermission的设置
public class MyShiroRealm extends AuthorizingRealm { //slf4j记录日志,可以不使用 private Logger logger = Logge ...
- Windows内核原理-同步IO与异步IO
目录 Windows内核原理-同步IO与异步IO 背景 目的 I/O 同步I/O 异步I/O I/O完成通知 总结 参考文档 Windows内核原理-同步IO与异步IO 背景 在前段时间检查异常连接导 ...
- shell中if的各种判断
shell编程中使用到得if语句内判断参数 –b当file存在并且是块文件时返回真 -c当file存在并且是字符文件时返回真 -d当pathname存在并且是一个目录时返回真 -e当pathname指 ...
- React之 redux 的简单介绍及使用
1.为什么使用redux?在小型react项目的开发中 ,view(视图层)中的数据模型(即数据),可以存放在组件中的 state 对象,换句话说页面中的动态数据存放在 state 中. 但对于开发大 ...
- hive 四种表，分区表，内部，外部表，桶表
Hive四大表类型内部表.外部表.分区表和桶表 一.概述 总体上Hive有四种表:外部表,内部表(管理表),分区表,桶表.分别对应不同的需求.下面主要讲解各种表的适用情形.创建和加载数据方法. 二.具 ...
- python控制窗口缩放
import win32gui import win32con import time # 使用之前先打开一个记事本 notepad = win32gui.FindWindow("Notep ...
- hdu 5977 Garden of Eden（点分治+状压）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5977 题解:这题一看就知道是状压dp然后看了一下很像是点分治(有点明显)然后就是简单的点分治+状压dp ...
- Error executing DDL via JDBC Statement 导致原因之一:列名使用了sql关键字
WARN: GenerationTarget encountered exception accepting command : Error executing DDL via JDBC Statem ...
- Intellij IDEA在maven项目中添加外部Jar包运行
一. 问题概述 我们知道Intellij IDEA是非常好用的Java语言开发的集成环境.提供了非常多实用的功能,包括了智能代码助手.代码自动提示.代码重构.各种插件等,当然也集成了maven 正常情 ...
- zabbix -- 学习之一
网上说这东西是运维必须学会的东西,于是乎捣鼓的第一步就开始了. 首先,在度娘上搜索了一下,找到了官网,按照官网的说法没操作成功.后来照这博主的帖子(https://www.cnblogs.com/xi ...