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>
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
