Vue.js学习课程（1 / 6）
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
定义页面的局部区域块，完成单独的页面小功能。
扫描二维码关注公众号，回复：
14778979 查看本文章
<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>