Vue全家桶实战01_【从入门到放弃系列】
生活随笔
收集整理的這篇文章主要介紹了
Vue全家桶实战01_【从入门到放弃系列】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
準備工作
先說一下使用的編程軟件，sublime Text，具體怎么安裝及配置，我已經寫好了一篇博客。歡迎查閱。
Sublime Text 的下載巨慢的問題，安裝問題，html頁面代碼生成問題，代碼提示問題 全都解決了【最完美的解決方案】
然后，就是找一個路徑，比如我的D:\VUE? ?【新文件夾】
進入cmd模式，在命令行，輸入以下兩條命令：
然后，使用sublime text打開這個目錄。即：【補充：01-vue/02-vue是我自己建的】
插值表達式?
第一個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><!-- 創建實例化對象 --><script type="text/javascript">new Vue({el:'#app',data:{msg:'喬治大哥'}})</script></body> </html>運行結果：
添加template:
運行結果：
【即】如果template中定義了內容，那么優先加載template ,如果沒有定義內容那么加載的是#app的模板
這個涉及的是生命周期，之前我又寫過關于這個問題的博客。vue生命周期詳解，不過后續還會進行闡述。可以先點擊看看。
進一步添加?
<!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><!-- 創建實例化對象 --><script type="text/javascript">var data ={//數據屬性，既可以是一個對象，也可以是一個函數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);//除了數據屬性vue實例還暴露了一 些有用的實例屬性和方法。他們都有前綴$</script></body> </html>結果展示：
F12開發者工具中的輸出：
框架最基本的意義：數據發生改變時，視圖發生改變，簡言之,數據驅動視圖
另附一個之前的博客鏈接：MVC、MVP、MVVM分別是什么？有什么區別？
總結
以上是生活随笔為你收集整理的Vue全家桶实战01_【从入门到放弃系列】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： eclipse开发javaweb项目中T
- 下一篇： eclipse编码页面中文乱码在哪更改编