官网教程：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 es6node==>npm ==>node package managerwebpack:打包机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>
Vue.js基础
原文地址：https://www.cnblogs.com/0bug/p/8488238.html