官网教程：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的代码转换成浏览器识别的代码 --> <!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>
