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

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

#### 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/][https_cn.vuejs.org]

###### 竞争对手 ######

*  AngularJS1/AngularJS2
 *  ReactJS
 *  EmberJS
 *  Knockout
 *  等等

[https://cn.vuejs.org/v2/guide/comparison.html][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引用 ######

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

条件判断式，根据表达式的真伪进行页面处理。

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

[https_cn.vuejs.org]: https://cn.vuejs.org/
[https_cn.vuejs.org_v2_guide_comparison.html]: https://cn.vuejs.org/v2/guide/comparison.html