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

简介: Vue.js学习详细课程系列--共32节(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

定义页面的局部区域块,完成单独的页面功能。

<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>


目录
相关文章
|
2天前
|
移动开发 JavaScript 前端开发
vue源码如何学习?
【4月更文挑战第20天】Vue.js源码学习概要:首先,需深入了解Vue基础知识、JavaScript(ES6+)及Node.js+npm。从GitHub克隆Vue源码仓库,安装依赖并构建。学习路径始于`entry-runtime-with-compiler.js`,然后深入`core/observer`、`vdom`、`renderer`和`instance`模块,理解响应式系统、虚拟DOM、渲染及实例创建。此外,研究`src/compiler`以了解模板编译。学习过程需耐心阅读、注解代码,结合相关资源辅助理解。
24 0
|
1天前
|
设计模式 存储 前端开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
JS的几种设计模式,Web前端基础三剑客学习知识分享,前端零基础开发
|
2天前
|
XML Web App开发 前端开发
字节FE:JavaScript学习路线图
字节FE:JavaScript学习路线图
10 0
|
2天前
|
移动开发 前端开发 JavaScript
VUE3内置组件Transition的学习使用
VUE3内置组件Transition的学习使用
|
2天前
|
移动开发 JavaScript 前端开发
学习vue3使用在线官方开发环境play.vuejs.org进行测试
学习vue3使用在线官方开发环境play.vuejs.org进行测试
10 1
|
2天前
|
存储 移动开发 JavaScript
学习javascript,前端知识精讲,助力你轻松掌握
学习javascript,前端知识精讲,助力你轻松掌握
|
2天前
|
JavaScript 前端开发 测试技术
学习JavaScript
【4月更文挑战第23天】学习JavaScript
15 1
|
2天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
2天前
|
JavaScript
vue3学习 ref和reactive的使用
vue3学习 ref和reactive的使用
21 0
|
2天前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!