使用cdn導(dǎo)入vue.并使用vue做一些簡(jiǎn)單的操作.

cdn導(dǎo)入vue:

<script src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>

vue-router的CDN導(dǎo)入:

<script src="https://unpkg.com/vue-router@2.5.3/dist/vue-router.js"></script>

往dom元素中添加信息

<div id="app">數(shù)據(jù)驅(qū)動(dòng)視圖:{{name}} </div><script>let vm = new Vue({el:'#app',data:{name:'來(lái)自于vue'}}) </script> // 上述操作,僅僅只改變了只,并未進(jìn)行dom的操作.就能在網(wǎng)頁(yè)中顯示

雙向綁定:

<div id ="app"><input v-model="number"><p> {{ number }} </p> </div><script>var vm = new Vue({el:'#app',data:{number:'',}}) </script>

組件化:

// 正常寫法(寫3遍)的dom結(jié)構(gòu)

// 使用vue組件寫法 <div id ='app'><card></card><card></card><card></card> </div> <script>// 注冊(cè)組件Vue.component('card',{template:`<div><img src="logo.png" alt=""><h2>vue真好用</h2><p>紫薯布丁|紫薯布丁|紫薯布丁</p><button>按鈕一枚</button></div>`});new Vue({el:'#app',}); </script>

// Dom結(jié)構(gòu)如下:

監(jiān)聽(tīng)鍵盤的回車鍵:

<input @keydown.enter = "addTask">

參考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654408&idx=1&sn=7d9dfcc28404a652a2a65d2bd78e2184&chksm=872c4337b05bca21c5f6d817f8643ce479a6db8fa9e9ea6c720f421118a542beec9960f2a2fa&scene=21#wechat_redirect

總結(jié)

以上是生活随笔為你收集整理的vue --- cdn导入,一些基本操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。