Vue全家桶实战01_【从入门到放弃系列】
生活随笔
收集整理的這篇文章主要介紹了
Vue全家桶实战01_【从入门到放弃系列】
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
準(zhǔn)備工作
先說一下使用的編程軟件，sublime Text，具體怎么安裝及配置，我已經(jīng)寫好了一篇博客。歡迎查閱。
Sublime Text 的下載巨慢的問題，安裝問題，html頁面代碼生成問題，代碼提示問題 全都解決了【最完美的解決方案】
然后，就是找一個路徑，比如我的D:\VUE? ?【新文件夾】
進(jìn)入cmd模式，在命令行，輸入以下兩條命令：
然后，使用sublime text打開這個目錄。即：【補(bǔ)充：01-vue/02-vue是我自己建的】
插值表達(dá)式?
第一個Demo
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><!-- vue的模板語法：{{}} --><h2>{{ msg }}</h2></div><!-- 引包 --><script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script><!-- 創(chuàng)建實(shí)例化對象 --><script type="text/javascript">new Vue({el:'#app',data:{msg:'喬治大哥'}})</script></body> </html>運(yùn)行結(jié)果：
添加template:
運(yùn)行結(jié)果：
【即】如果template中定義了內(nèi)容，那么優(yōu)先加載template ,如果沒有定義內(nèi)容那么加載的是#app的模板
這個涉及的是生命周期，之前我又寫過關(guān)于這個問題的博客。vue生命周期詳解，不過后續(xù)還會進(jìn)行闡述。可以先點(diǎn)擊看看。
進(jìn)一步添加?
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div id="app"><!-- vue的模板語法：{{}} --><h2>{{ msg }}</h2><h3>{{1+1}}</h3><h4>{{ isTrue }}</h4><h1>{{ str.split('').reverse().join('') }}</h1><h2>{{ 1>2 ? '真的' : '假的' }}</h2><h3>{{'哈哈哈哈哈'}}</h3><h4>{{ {name:'georgedage'} }}</h4></div><!-- 引包 --><script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script><!-- 創(chuàng)建實(shí)例化對象 --><script type="text/javascript">var data ={//數(shù)據(jù)屬性，既可以是一個對象，也可以是一個函數(shù)msg:'喬治大哥',isTrue:1==1,str:'hello georgedage'}var vm = new Vue({el:'#app',data:data,template:''});console.log(vm.$el);console.log(vm.$data===data);//除了數(shù)據(jù)屬性vue實(shí)例還暴露了一 些有用的實(shí)例屬性和方法。他們都有前綴$</script></body> </html>結(jié)果展示：
F12開發(fā)者工具中的輸出：
框架最基本的意義：數(shù)據(jù)發(fā)生改變時，視圖發(fā)生改變，簡言之,數(shù)據(jù)驅(qū)動視圖
另附一個之前的博客鏈接：MVC、MVP、MVVM分別是什么？有什么區(qū)別？
總結(jié)
以上是生活随笔為你收集整理的Vue全家桶实战01_【从入门到放弃系列】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： eclipse开发javaweb项目中T
- 下一篇： Vue全家桶实战02_【从入门到放弃系列