1. el：挂载点
1.1 Vue实例的作用范围
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id='app'>
<!-- el选择命中内部及后代元素有效-->
{{message}}
<span >{{message}}</span>
</div>
<!-- 外部无效 -->
{{message}}
<script>
var app= new Vue({
el:'#app',
data:{
message:'我是测试小白'
}
})
</script>
</body>
</html>
1.2 其他选择器
- 可使用其他的选择器如 class ，标签，但是建议使用ID选择器
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id='app' class="app">
<!-- el选择命中内部及后代元素有效-->
{{message}}1
<span >{{message}}2</span>
</div>
<!-- 外部无效 -->
{{message}}3
<script>
var app= new Vue({
// el:'#app', // id 选择器
// el:'.app', // class 选择器
el:'div',
data:{
message:'我是测试小白'
}
})
</script>
</body>
</html>
1.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>Document</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<p id='app' class="app">
<!-- el选择命中内部及后代元素有效-->
{{message}}1
<span >{{message}}2</span>
</p>
<!-- 外部无效 -->
{{message}}3
<script>
var app= new Vue({
el:'#app', // id 选择器
// el:'.app', // class 选择器
// el:'div',
data:{
message:'我是测试小白'
}
})
</script>
</body>
</html>
2. data 数据对象
- Vue中用到的数据定义在data中
- data中可以写复杂类型的数据,如：数组，字典
- 渲染复杂类型数据时，遵守js的语法即可，如：数组通过下标取值 city[0]，字典通过key取值 info.name
- 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id='app'>
{{message}}
<h2>{{info.name}} {{info.age}} {{info.sex}}</h2>
<ul>
<li>{{city[0]}}</li>
<li>{{city[1]}}</li>
</ul>
</div>
<script>
var app= new Vue({
el:'#app',
data:{
message: '你好 测试小白!',
info:{
name: '小白',
age: 26,
sex: 'man'
},
city:['辽宁','大连']
}
})
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
