01-Vue的步骤原理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 第一步:导入vue.js库文件到本网页,提供vue技术支持 -->
<script src="js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<!-- 第三步:管理app元素,app可以使用获取Vue对象提供的格式数据和函数等内容
1 页面元素的使用数据方法
{{name}} 占位符:在这个位置获取Vue对象的是指定的数据,显示出来
-->
<div id="app">
<h2>我的第一个Vue程序</h2>
<h3>个人信息:姓名:{{name}} 性别:{{sex}} 年龄:{{age}}</h3>
<h3>我的爱好是:{{hobby}}</h3>
</div>
<!-- 第二步:创建 Vue对象,名称为app,管理网页上的所有元素和数据
1 const app=new Vue({})
定义一个app对象用Vue()构造器来初始化,{}用来传递实参,是集合型的实参
2 el:"#app", el|:element(元素) 管理网上的元素对象---挂载 用#抓取对象
3 vue 提供的数据,提供各种类型的数据 普通数据、数组数据、集合,对象数据等
data:{
name:"XXX",
age:29,
sex:'男'
hobby:['爬山','打游戏','唱歌'] 数组数据
}
4 普通数据的格式: key:value 键值对形式:通过key获取值
age:43,
5 数组数据,可以向Java使用数组方式一样使用:可以获取元素的值,下标,
可以利用下标获取数据hobby:['爬山','打游戏','唱歌']
6 methods: app提供的所有函数用methods管理
总结:1 app对象就是Vue对相关管理网页各种元素,提供各种元素、函数、计算属性等内容工元素使用
2 Vue 编程实现了代码和数据完全分离
-->
<script type="text/javascript">
const app=new Vue({
el:"#app", // 1 管理网页元素
data:{ // 2 管理数据--提供了数据
name:"XXX",
age:29,
sex:'男',
hobby:['爬山','打游戏','唱歌']
},methods:{ // 1 app对象管理函数,使用者可以调用
add(){
this.counter++; //这个对象app的counter++
},
sub(){
this.counter--;
}
}
})
</script>
</body>
</html>