<!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实例中的数据、事件和方法
猜你喜欢
转载自www.cnblogs.com/twodoge/p/10229576.html
今日推荐
周排行