Vue 的使用步驟
- 1.創(chuàng)建一個標簽,用于數據的填充
- 2.引入 Vue.js 庫文件
- 3.實例化 Vue 對象
- 4.把 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>
<div id="app">
<div>{{ msg }}</div>
<div>{{ 1 + 1}}</div>
<div>{{"===" + msg + "==="}}</div>
</div>
<script src="js/vue-2.5.16.js"></script>
<script type='text/javascript'>
var vm = new Vue({
el: '#app', // 元素的掛載位置(值可以是CSS選擇器或者DOM元素)
// data 模型數據(值是一個對象)
data: {
msg: 'Hello Vue',
}
});
</script>
</body>
</html>
實例參數分析
- 在 Vue 對象里 el 為元素的掛載位置(值可以是 CSS 選擇器也可以是 DOM 元素) data 為模型數據(類型是一個對象)
插值表達式的用法
- 使用插值表達式{{}}將數據填充到 HTML 標簽里
- 插值表達式還支持 JavaScript 的基本計算操作
Vue代碼運行原理分析
概述編譯過程概念(Vue 語法→原生 js 語法)