vue实例之el
一 概念
实例：el
```html
<div id='app'>
</div>
<script>
new Vue({
el: '#app'
})
</script>
```
- 数据：data
```html
<div id='app'>
<p v-text='msg1'></p>
<p>{{ msg2 }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg1: '段落1',
msg2: '段落2'
}
})
</script>
```
二 代码示范
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>vue实例</title>
<style type="text/css">
p {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app" class="app">
<p title="你真的是P">你是P</p>
<!-- v-bind: 属于vue语法:vue指令 -->
<!-- 第一个title是html标签的全局属性title -->
<!-- 第二个title是vue的一个变量，变量名可以随意自定义 -->
<p v-bind:title="title">你就是P</p>
<!-- vue的变量一般需要进行初始化（赋初值） -->
</div>
<div id="main">
<p v-bind:title="my_title">你还是P</p>
</div>
</body>
<!-- 在页面中引入vue -->
<script src="js/vue-2.5.17.js"></script>
<!-- 拥有vue环境后可以写vue支持的语法逻辑 -->
<script type="text/javascript">
// 自身代码块
// 创建vue实例
new Vue({
// 将实例与页面结构进行关联, 尽量(只允许)用id进行绑定(将唯一的对象与页面唯一的结构进行一一绑定)
// 该实例只操作关联的页面结构(包含子结构)
// el: "#app"
el: '.app',
data: {
title: "你就是P..."
}
});
// 将一个vue实例挂载到页面的一个页面结构
new Vue({
// 挂载点
el: "#main",
data: {
my_title: ""
}
})
</script>
</html>
