2-3 Vue实例中的数据，事件和方法
上节课模板是写在Vue的实例里面的，现在我们可以把它恢复出来。写在挂载点的内部，看起来会舒服一点。Vue的数据项，可以配置任意的数据名字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--挂载点，模板，实例之间的关系--> <div id="root">
<!--
<h1>hello {{msg}}</h1>
-->
<h1>{{number}}</h1>
</div>
<!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript">
new Vue({
// 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
// el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
// el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
// 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区
// 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>',
data: {//这个Vue实例里面会有一些数据
msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
//使用这个Vue实例里面的这个msg数据了。
number:123//
}
})
//在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM
//var dom = document.getElementById("root")
//dom.innerHTML = "hello world"
//在Vue里面写代码和以前不一样
//在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和
//这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面
</script>
</body>
</html>
{{number}}插值表达式，把number这个值插入到h1之中。这个语法就是插值表达式。v-text这个指令，它的意思是h1它的内容由number这个变量决定。v-text是Vue之中的一个指令。这个指令里面跟的东西是一个变量，它告诉h1你要显示的内容就是number这个变量。这个时候页面的内容依然是123。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--挂载点，模板，实例之间的关系--> <div id="root">
<!--
<h1>hello {{msg}}</h1>
-->
<h1 v-text="number"></h1>
</div>
<!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript">
new Vue({
// 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
// el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
// el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
// 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区
// 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>',
data: {//这个Vue实例里面会有一些数据
msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
//使用这个Vue实例里面的这个msg数据了。
number:123//
}
})
//在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM
//var dom = document.getElementById("root")
//dom.innerHTML = "hello world"
//在Vue里面写代码和以前不一样
//在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和
//这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面
</script>
</body>
</html>
v-html也可以
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--挂载点，模板，实例之间的关系--> <div id="root">
<!--
<h1>hello {{msg}}</h1>
-->
<h1 v-html="number"></h1>
</div>
<!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript">
new Vue({
// 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
// el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
// el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
// 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区
// 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>',
data: {//这个Vue实例里面会有一些数据
msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
//使用这个Vue实例里面的这个msg数据了。
number:123//
}
})
//在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM
//var dom = document.getElementById("root")
//dom.innerHTML = "hello world"
//在Vue里面写代码和以前不一样
//在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和
//这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面
</script>
</body>
</html>
v-html和v-text这个Vue中的指令它有什么区别呢？
这个时候h1是被转义过后的一个内容。因为这个标签已经被转义了，所以它输出在页面上的时候会连h1一起输出。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--挂载点，模板，实例之间的关系--> <div id="root">
<!--
<h1>hello {{msg}}</h1>
-->
<div v-text="content"></div>
</div>
<!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript">
new Vue({
// 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
// el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
// el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
// 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区
// 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>',
data: {//这个Vue实例里面会有一些数据
//msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
//使用这个Vue实例里面的这个msg数据了。
//number:123//
content: "<h1>hello</h1>"
}
})
//在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM
//var dom = document.getElementById("root")
//dom.innerHTML = "hello world"
//在Vue里面写代码和以前不一样
//在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和
//这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面
</script>
</body>
</html>
如果把v-text换成v-html
这个时候输出的h1是没有被转义过的h1标签。所以v-text和v-html这两个模板指令区别就在于v-html不会转义，而v-text会进行一次转义。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--挂载点，模板，实例之间的关系--> <div id="root">
<!--
<h1>hello {{msg}}</h1>
-->
<div v-html="content"></div>
</div>
<!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript">
new Vue({
// 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
// el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
// el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
// 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区
// 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>',
data: {//这个Vue实例里面会有一些数据
//msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
//使用这个Vue实例里面的这个msg数据了。
//number:123//
content: "<h1>hello</h1>"
}
})
//在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM
//var dom = document.getElementById("root")
//dom.innerHTML = "hello world"
//在Vue里面写代码和以前不一样
//在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和
//这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面
</script>
</body>
</html>
data里面对应的数据如何显示到模板上大概有一个感觉了。如何给模板上的一个标签绑定一个事件？假设我希望这个div标签被点击了之后页面上的内容由hello变成world，怎么办？再说一个指令，这个指令是模板指令，指的是它写在模板标签里面。我希望点击一下hello，这个hello变成world。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--挂载点，模板，实例之间的关系--> <div id="root">
<!--
<h1>hello {{msg}}</h1>
-->
<div id="root">{{content}}</div>
</div>
<!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript">
new Vue({
// 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
// el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
// el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
// 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区
// 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>',
data: {//这个Vue实例里面会有一些数据
//msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
//使用这个Vue实例里面的这个msg数据了。
//number:123//
content: "hello"
}
})
//在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM
//var dom = document.getElementById("root")
//dom.innerHTML = "hello world"
//在Vue里面写代码和以前不一样
//在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和
//这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面
</script>
</body>
</html>
如何做？先绑定点击事件。v-on:是一个新的模板指令，指的是向这个div标签上面你要绑定一个事件。:后面加一个click，指的是绑定一个click事件。当这个click事件被执行的时候，后面要跟一个函数。我呢直接写一个箭头函数吧。也就是这个div标签被点击的时候，会执行里面的这个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入门</title> <!--这个库要放在head部分去引入，这样做会避免页面出现抖屏的一个情况-->
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<!--挂载点，模板，实例之间的关系--> <div id="root">
<!--
<h1>hello {{msg}}</h1>
-->
<div id="root">
<div v-on:click="()=>{alert(123)}">
{{content}}
</div>
</div>
</div>
<!--引入了vue.js这个库，还没有真正使用这个库--> <script type="text/javascript">
new Vue({
// 创建一个Vue的实例，创建Vue的实例的时候我们可以传递一个参数给这个Vue的实例
// el:"" 我让Vue这个实例去接管页面上的哪一个element(元素)
el: "#root", //所以这个Vue实例就和这一个DOM做好了绑定 DOM:<div id="root">hello world</div>
// el是指我这个Vue实例是和哪一个DOM节点做绑定 #是指id=root的DOM元素
// 创建Vue实例的时候，传递了一个大的参数进去，这个大的参数里面有一个el参数：挂载点，它让这个Vue实例去处理id=root这块区
// 域的内容，所以这个实例的挂载点就是id=root的这个标签 //template: '<h1>hello {{msg}}</h1>',
data: {//这个Vue实例里面会有一些数据
//msg: "hello world3", //Vue实例已经接管了这个标签的内容，或者说已经和这个标签做了绑定.那么在这个标签上其实就可以去
//使用这个Vue实例里面的这个msg数据了。
//number:123//
content: "hello"
}
})
//在没有Vue之前我们写原生或者jquery的时候都是这样去写代码的，我们手动的去处理DOM
//var dom = document.getElementById("root")
//dom.innerHTML = "hello world"
//在Vue里面写代码和以前不一样
//在div标签里面声明需要使用一个msg的数据，创建一个Vue的实例，定义好了这个msg的数据，然后让这个Vue的实例通过el把Vue实例和
//这个标签做一个绑定，那么msg的数据就会自动显示到这个div的标签里面
</script>
</body>
</html>
浏览器报错了。alert方法找不到。在这个Vue实例上面找不到。
这个时候你写这个箭头函数实际上是有问题的，我们可以换一个写法。handleClick方法还没有写。如果你希望在
2-3 Vue实例中的数据，事件和方法的更多相关文章
- Vue学习之vue实例中的数据、事件和方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- 详解Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- Vue实例 中的常用配置项
创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项 ...
- Vue实例对象的数据选项（火柴）
前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...
- PatentTips - 在物联网中进行数据过滤的方法和装置
背景技术 [0001] 本发明涉及物联网,特别涉及在物联网进行数据过滤的方法和装置. [0002] 物联网是新一代信息技术的重要组成部分,特指物物相连的网络.具体地,物联网是指通过各种信息传感设备,如 ...
- 关于VUE调用父实例($parent) 根实例 中的数据和方法
this.$parent或者 this.$root 在子组件中判断this.$parent获取的实例是不是父组件的实例 在子组件中console.log(this.$parent) 在父组件中con ...
- vue实例中created、mounted以及其他类型说明
生命周期图示(图片来自coderwhy老师): 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后 ...
随机推荐
- poj 1088 滑雪 DP（dfs的记忆化搜索）
题目地址:http://poj.org/problem?id=1088 题目大意:给你一个m*n的矩阵 如果其中一个点高于另一个点 那么就可以从高点向下滑 直到没有可以下滑的时候 就得到一条下滑路径 ...
- C++迭代器之'插入迭代器
1. 定义 插入型迭代器(Insert Iterator),又叫插入器(Inserter). 2. 作用 插入迭代器的主要功能为把一个赋值操作转换为把相应的值插入容器的操作.算法库对所有在容器上的操作 ...
- 关于.NET玩爬虫这些事 【初码干货】
这几天在微信群里又聊到.NET可以救中国但是案例太少不深的问题,我说.NET玩爬虫简直就是宇宙第一,于是大神朱永光说,你为何不来写一篇总结一下? 那么今天就全面的来总结一下,在.NET生态下,如何玩爬 ...
- java程序验证用户名密码和验证码登录的小例子
package Study02; import java.util.Random; import java.util.Scanner; public class test { static Strin ...
- MySQL Foreign Key
ntroduction to MySQL foreign key A foreign key is a field in a table that matches another field of a ...
- [JLOI2008]提示问题
题目描述 最近在JLOI网上的一个流行游戏中,选手要回答很难的问题.假如在规定时间内不能回答,系统将给出1个提示,之后再依次给出第2,3个提示.出现在答案中的是字母和下列字符: '.',',',':' ...
- 【NOIP2017练习】跳跃切除子序列（模拟）
题意: 思路: 已放弃 #include <bits/stdc++.h> typedef long long LL; int main(){ int T; scanf("%d&q ...
- SQL Server Management Studio自定义快捷键
SQL Server Management Studio支持自定义快捷键:工具->选项->键盘: 其中,Alt+F1.Ctrl+1.Ctrl+2是系统预定义的快捷键. 双击表名(或按Ctr ...
- 洛谷——P1062 数列
洛谷——P1062 数列 题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,1 ...
- 设计并实现一个LRU Cache
一.什么是Cache 1 概念 Cache,即高速缓存,是介于CPU和内存之间的高速小容量存储器.在金字塔式存储体系中它位于自顶向下的第二层,仅次于CPU寄存器.其容量远小于内存,但速度却可以接近CP ...