第一步：下載下傳Vue
利用npm器下載下傳vue到Windows10，這兒我選擇的下載下傳路徑是D:\Desktop\code
檢視是否成功
下載下傳vue，指令：npm install vue -S 或者 npm install vue --save
通過編輯器打開目錄可以看到
OK，現在我們可以開始玩一下vue了
Vue demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<div id="app">
<!-- vue的模闆文法{{}}雙大括号插值 react {}-->
<h2>{{ msg }}</h2>
<h3>{{1+1}}</h3>
<h4>{{ isTrue }}</h4>
<h1>{{ str.split('').reverse().join('')}}</h1>
<h2>{{ 1>2 ? '真':'假'}}</h2>
<h3>{{ {name:'NBA蔡徐坤'} }}</h3>
</div>
<!--1.引包-->
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
// 2.建立執行個體化對象
//資料發生改變時,視圖發生改變,簡言之,資料驅動視圖
var data = {
//資料屬性
//既可以是一個對象 也可以是一個函數
msg:'觀山湖',
isTrue: 1==1,
str: 'hello Vue'
}
// 如果template中定義了内容那麼優先加載template,如果沒有定義内容那麼加載的是#app的模闆
var vm = new Vue({
el:'#app',//目的地
data:data,
template:``
// template:`<div>{{ msg }}</div>`
});
console.log(vm.$el === document.getElementById('app'));
console.log(vm.$data === data);
//除了資料屬性vue執行個體還暴露了一些有用的執行個體屬性和方法.他們都有字首$
</script>
</body>
</html>
實作效果如下