使用cdn導入vue.并使用vue做一些簡單的操作.
cdn導入vue:
<script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
vue-router的CDN導入:
<script src="https://unpkg.com/vue-router@2.5.3/dist/vue-router.js"></script>
往dom元素中添加信息
<div id="app">數據驅動視圖:{{name}}
</div><script>let vm = new Vue({el:'#app',data:{name:'來自于vue'}})
</script>
// 上述操作,僅僅只改變了只,并未進行dom的操作.就能在網頁中顯示
雙向綁定:
<div id ="app"><input v-model="number"><p> {{ number }} </p>
</div><script>var vm = new Vue({el:'#app',data:{number:'',}})
</script>
組件化:
// 正常寫法(寫3遍)的dom結構
// 使用vue組件寫法
<div id ='app'><card></card><card></card><card></card>
</div>
<script>// 注冊組件Vue.component('card',{template:`<div><img src="logo.png" alt=""><h2>vue真好用</h2><p>紫薯布丁|紫薯布丁|紫薯布丁</p><button>按鈕一枚</button></div>`});new Vue({el:'#app',});
</script>
// Dom結構如下:
監聽鍵盤的回車鍵:
<input @keydown.enter = "addTask">
參考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654408&idx=1&sn=7d9dfcc28404a652a2a65d2bd78e2184&chksm=872c4337b05bca21c5f6d817f8643ce479a6db8fa9e9ea6c720f421118a542beec9960f2a2fa&scene=21#wechat_redirect
