Vue.js基礎
阿新 • • 發佈：2018-03-01
highlight mode app () 當我 ren .net alert com 
官網教程：https://cn.vuejs.org/v2/guide/
ES6基礎 http://www.cnblogs.com/0bug/p/8488092.html
引入方式
CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
本地引入
<script src="vue.js"></script>
練習demo
<!-- html css js es6 node==>npm ==>node package manager webpack:打包機 babel:能將es6的代碼轉換成瀏覽器識別的代碼練習demo--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .div1{ width: 100px; height: 100px; background: red; } .div2{ width: 100px; height: 100px; background: green; } .div3{ background: yellow; }</style> </head> <body> <div id=‘app‘> <!-- vue中有它自己特殊的語法 插值 vue{{}} react {} angular {{}}--> <h3>{{msg}}</h3> <!-- vue中核心語法：指令系統 v-*--> <div class="div1" v-if="isShow">1</div> <div class="div1" v-show=‘isShow‘>2</div> <button v-on:click = ‘showHandler‘>按鈕</button> <div class="div2" v-bind:class=‘{div3:isYellow}‘></div> <button v-on:click = ‘changeHandler‘>按鈕</button> <a v-bind:href="url">百度一下</a> <!-- 當我們數據量比較大的時候，比如說用數組存儲我們的數據 --> <!-- vue MVVM --> <!-- Model: url View:img ul li --> <br> <img :src="imgSrc"> <ul> <!-- v-for 事件綁定v-on:===>@ 屬性綁定v-bind:===:>--> <li v-for=‘(item,index) in imgArr‘ @click=‘currentHandler(item)‘>{{index}}</li> </ul> <button @click=‘nextHandler‘>下一張</button> </div> <script type="text/javascript" src=‘./vue.js‘></script> <script type="text/javascript"> var app = new Vue({ // 參數對象中有幾個重要的屬性 el:"#app", data:{ msg:‘今天 我們學習vue‘, isShow:true, isYellow:false, url:‘https://www.baidu.com‘, imgSrc:‘./images/0.png‘, currentIndex:0, imgArr:[ ‘./images/0.png‘, ‘./images/1.png‘, ‘./images/2.png‘, ‘./images/3.png‘, ] }, methods:{ showHandler () { this.isShow = !this.isShow }, changeHandler(){ this.isYellow = !this.isYellow }, currentHandler(item){ // alert(1) this.imgSrc = item }, nextHandler(){ this.currentIndex = this.currentIndex+1; console.log(this.currentIndex) if (this.currentIndex == 4) { this.currentIndex = 0 } this.imgSrc = this.imgArr[this.currentIndex] } } }) // console.log(app.msg) </script> </body> </html>
Vue.js基礎