Vue.js核心庫只關注視圖層，而我們只需要注重數據的操作就好，通過接下來的學習會更深的理解這句話，vue.js通過很多指令和修飾符來完成對視圖的關注，第一個是{{}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script> <!-- 使用vue.js需要先使用 -->
</head>
<body>
<div id="root">
<!-- 可以直接寫變量-->
{{userName}}
<!-- 可以寫三元表達式 -->
{{true?'男':'女'}}
<!-- 可以調用函數 功能是倒敘-->
{{userName.split("").reverse().join("")}}
</div>
</body>
<script>
new Vue({
el:'#root',//掛載的元素，只有在這個區域內才能使用Vue
data:{
userName:'倉央嘉措',
sex:"男"，
num:1,
src:'http://img0.imgtn.bdimg.com/it/u=4150802370,1902002068&fm=11&gp=0.jpg',
str:'我是一隻小小小鳥'
},//變量定義在裏面
methods:{},//方法定義在這裏面
filters:{},//過濾器
components:{},//組件
computed:{}//計算屬性
})
</script>
</html>
執行結果：
