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

飞熊 • 2023年4月20日上午9:43 • 后端笔记 • 阅读 133

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

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>