Vue.js学习详细课程系列--共32节（1 / 6）

Vue.js学习课程（1 / 6）

01. 什么是Vue.js？
- 什么是Vue.js？
- 官方网站
- 竞争对手
- 技术前提
- 开发工具
02. 从index.html开始
- 知识点
- index.html
- vue.js引用
- html代码块
- javascript脚本部分
03. 条件与循环
- 知识点
- v-if
- v-for
- 综合例
04. 处理用户输入
- 知识点
- v-model
- 使用例
05. 按钮事件
- 知识点
- v-on
06. 组件
- 知识点
- component

01. 什么是Vue.js？

什么是Vue.js？

==============

Vue.js是一套开发Web页面的Javascript脚本框架，听起来难，其实是Web-Javascript脚本框架中最容易上手的框架，没有之一。

官方网站

https://cn.vuejs.org/

竞争对手

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>

Vue.js学习详细课程系列--共32节（1 / 6）相关推荐

Vue.js学习详细课程系列--共32节（4 / 6）
Vue.js学习课程(4 / 6) 19. 表单复选框知识点表单复选框绑定 20. 表单单选按钮知识点表单单选按钮绑定 21. 表单下拉框知识点表单下拉框绑定 22. 表单修饰符知识点 ...
Vue.js学习详细课程系列--共32节（2 / 6）
Vue.js学习课程(2 / 6) 07. 过滤器知识点 filters 08. 计算属性知识点 computed 09. 观察属性知识点 $watch 10. 设定机算属性知识点 sette ...
Vue.js学习系列七——Vue服务器渲染Nuxt学习
我又回来啦~这次我们来学习Vue的服务器渲染SSR. 关于SSR的文章网上很多,一开始看得我云里雾里.然后去Vue.js 服务器渲染指南和nuxt官网看了看,发现文章大多都是搬运官网的内容,真正讲的清 ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
遇见 vue.js --------阿文的vue.js学习笔记（4）------模板语法
** 新学习新征程,我们一起踏上学习 vue.js的新长征遇见 vue.js --------阿文的vue.js学习笔记(1)-----初识vue.js 遇见 vue.js --------阿文的v ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
Vue.js 学习笔记十一自定义指令
之前看到过v-bind,v-on等指令,Vue还可以自定义指<div id="divApp" <div v-focus></div> & ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记九 v-if和v-show
<p v-if="flag">v-if</p><p v-show="flag">v-show</p> flag是 ...