vue 入门笔记 Vue数据和方法
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue.js</title>
<link rel="stylesheet" href="style.css">
<!-- 引入 VUE -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- 对应 js 的 el -->
<div id="vue-app">
<h1> {{name}} </h1>
<p> job:{{job}}</p>
<p> function:{{greet()}} </p>
<p> function:{{greet("张三")}}</p>
<p> function:{{greetTo("李四")}}</p>
</div>
{{ name }}
<!-- 关联 JS -->
<script src="app.js"/>
</body>
</html>
app.js
//实例化 vue 对象
new Vue({
el:"#vue-app",
data:{
name:"Mr.吴",
job:"web开发",
},
methods:{
// 函数的重载是 不支持的
greet:function(){
return "good Morning";
},
greet:function(other){
return "good Morning "+other;
},
greetTo:function(other){
return "good Morning "+other + " "+this.job;//访问数据
},
},
});
/*
el : element 需要获取的元素， html中的根容器元素
data: 用于数据的储存
*/小结：
JS 元素对应的 作用范围 只能当当前 DIV "{{name}}" 超出 作用范围 DIV 所以不显示
JS方法 不支持方法的重载