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

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

小咪咪 2023-09-25 21:13 195阅读 0赞

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

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