01. 什么是Vue.js？
什么是Vue.js？
==============
Vue.js是一套开发Web页面的Javascript脚本框架，听起来难，其实是Web-Javascript脚本框架中最容易上手的框架，没有之一。
官方网站
竞争对手
- AngularJS1/AngularJS2
- ReactJS
- EmberJS
- Knockout
- 等等
https://cn.vuejs.org/v2/guide/comparison.html
技术前提
- HTML/CSS
- Javascript
- Node.js(极力推荐)
开发工具
- 记事本等文本编辑器
- Visual Studio Code
- Brackets
- ATOM
- 浏览器（IE9,Chrome,FireFox,Safari）
02. 从index.html开始
知识点
- html5文档
- vue.js导入
- Vue对象
index.html
从第一个index.html开始吧！
vue.js引用
<script src="https://unpkg.com/vue/dist/vue.js"></script>
html代码块
<div id="myApp"> {{ message }} </div>
javascript脚本部分
var myApp = new Vue({ el: '#myApp', data: { message: 'Hello Vue.js World!' } });
03. 条件与循环
知识点
- v-if
- v-for
v-if
条件判断式，根据表达式的真伪进行页面处理。
<p v-if="seen">快看我！</p>
v-for
处理数组循环，将数据循环显示到页面上。
<ol> <li v-for="game in games"> {{ game.title }} </li> </ol>
综合例
<div id="myApp"> <h3>游戏列表</h3> <div v-if="seen">2017最新发卖</div> <ol> <li v-for="game in games">{{game.title}} / {{game.price}}元</li> </ol> </div> <script> var myApp = new Vue({ el: '#myApp', data: { seen: true, games: [ {title:'勇者斗恶龙',price:400}, {title:'超级马里奥',price:380}, {title:'我的世界',price:99}, ], }, }); </script>
04. 处理用户输入
知识点
- v-model
v-model
为页面输入框进行数据邦定，例如：
- input
- select
- textarea
- components
使用例
<div id="myApp"> <p>您最喜欢的游戏是：{{mygame}}</p> <input v-model="mygame"> </div> <script> var myApp = new Vue({ el: '#myApp', data: { mygame: '超级马里奥' }, }); </script>
05. 按钮事件
知识点
- v-on
v-on
为页面元素绑定各种事件。（keydown, keyup, click, dbclick, load, etd.）
<div id="myApp"> <p>您最喜欢的游戏是：{{mygame}}</p> <button v-on:click="btnClick('我的世界')">我的世界</button> <button v-on:click="btnClick('勇者斗恶龙')">勇者斗恶龙</button> <button v-on:click="btnClick('塞尔达传说')">塞尔达传说</button> <button @click="btnClick('魔界战记5')">魔界战记5</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { mygame: '超级马里奥' }, methods: { btnClick: function(pname){ this.mygame = pname; }, }, }); </script>
06. 组件
知识点
- component
component
定义页面的局部区域块，完成单独的页面小功能。
<div id="myApp"> <ol> <game-item v-for="item in games" v-bind:game="item"></game-item> </ol> </div> <script> /* 组件定义：game-item */ Vue.component('game-item', { props: ['game'], template: '<li>{{ game.title }}</li>' }); /* Vue对象实例化 */ var myApp = new Vue({ el: '#myApp', data: { games: [ { title: '斗地主' }, { title: '打麻雀' }, { title: 'UNO' } ] } }); </script>
