1婚脱、vue的介紹
- Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。
- Vue 只關(guān)注視圖層勺像， 采用自底向上增量開發(fā)的設計障贸。
- Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。
2吟宦、Vue的簡單應用,常用語法
1篮洁、vue的引入
新手不建議直接使用webpack自動化構(gòu)建vue應用，這個我們后面會講⊙晷眨現(xiàn)講2種簡單的方式
(1)直接引用袁波，引用地址為：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
(2)直接下載，在引入下載包使用蜗侈。
2篷牌、vue的簡單渲染實例
- 文本賦值 {{value}}
- 表單賦值 v-model
- 屬性綁定 v-bind或 ":"
- 事件綁定 v-on: 或 "@"
- 實例化vue：new Vue
html代碼:
<html>
<head>
<title>vue的簡單實例</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p :class="colorClass">這是插入的一段文本{{msg}}</p>
<input type="text" v-model="msg"/>
<button @click="prompt">點擊彈出輸入值</button>
</div>
<body>
</html>
js代碼：(本例使用的版本為v2.5)
var vm = new Vue({
el:"#app", //綁定根節(jié)點
data:{ //數(shù)據(jù)源
msg:"", //消息初始化為空
colorClass:"classa"
},
methods:{
prompt:function(){
alert(this.msg);
}
}
})
第一小節(jié)到此結(jié)束，附一張vue的生命周期圖踏幻，后面的很多場景都需要用到
image.png
