一 概念
實例：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>