自学Vue（笔记1）
程序员文章站
2022-05-16 14:22:21
...
自学Vue笔记1
el的简单使用
三步：1：导入开发版本Vue.js
2：创建Vue实例对象（设置el属性和data属性）
3：使用简介的模板语法把数据熏染到页面上
el的三个思考
1 .Vue实例的作用范围是什么呢？ Vue会管理el选项命中的 元素 及其 内部 的 后代元素
2 .是否可以使用其他是选择器？ 可以使用其他选择器，但是建议使用ID选择器。
3 . 是否可以设置其他啊的dom元素呢？ 可以使用其他的双标签，但是不能使用 HTML 和 BODY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue基础</title>
</head>
<body>
<div id="app">
{{message}}
</div>
<!-- 导入开发版本的Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app", // el 为挂载点，后面可以挂载：id选择器、class选择器、标签选择器
data:{
message:"你好Vue！"
}
})
</script>
</body>
</html>
效果图：
data简单介绍和使用
data:数据对象
重点:
1.Vue中用到的数据定义在data中。
2.data中可以写复杂类型的数据 。
3 .渲染类型数据时，遵循js的语法即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>data：数据对象</title>
</head>
<body>
<div id="app">
{{message}}
<h2>{{person.name}}{{person.IdentityCard}}</h2>
<ul>
<li>兴趣爱好：</li>
<li>{{hobby[0]}}</li>
<li>{{hobby[2]}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app =new Vue({
el:"#app",
data:{
message:"你好 Vue data!",
person:{
name:"小明",
IdentityCard:41272720001215
},
hobby:["足球","篮球","撸代码 ","搞算法"]
}
})
</script>
</body>
</html>
效果图：
上一篇： 深入了解 JavaScript 中的 for 循环 的详细介绍
下一篇： Object