Vue快速入门（附实战小项目：记事本天气预报音乐播放器）

Posted 步尔斯特

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue快速入门（附实战小项目：记事本天气预报音乐播放器）相关的知识，希望对你有一定的参考价值。

文章目录

一、前言

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

​ Vue通过MVVM模式,能够实现视图与模型的双向绑定。
​ 简单来说，就是数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

二、Vue.js安装

NPM方法（推荐使用）

  1. 安装node.js
    从node.js官网下载并安装node，安装过程很简单，一直点下一步就ok了，输入
    node -v命令，查看node的版本

  2. npm -v

  3. 安装cnpm
    在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org

  4. 安装vue-cli2 脚手架构建工具（必须在全局中进行安装）
    在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。
    是否安装成功：vue -V

三、初始化Vue项目

命令：vue init webpack firstApp
输入命令后，会询问我们几个简单的选项，我们根据自己的需要进行填写就可以了。

  1. Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
  2. Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
  3. Author：作者，如果你有配置git的作者，他会读取。
  4. Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
  5. Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n（建议），如果你是大型团队开发，最好是进行配置。
  6. setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
  7. Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n

四、项目目录解析

  1. build：最终发布的代码的存放位置。

  2. config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

  3. node_modules：npm 加载的项目所需要的各种依赖模块。

  4. src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

    1. assets：放置一些图片(会根据图片大小分类进行base64命名还是其他方式命名)，如logo等

    2. components：目录里放的是一个个的组件文件

    3. router/index.js：配置路由的地方

  5. App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，这里面的必不可少。

  6. main.js ：项目的核心文件（整个项目的入口js）引入依赖包、默认页面样式等（项目运行后会在index.html中形成一个app.js文件）。

  7. static：静态资源目录(会原分不动的对文件进行处理)，如图片、字体等。

  8. test：初始测试目录，可删除

  9. .XXXX文件：配置文件。

  10. index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

  11. package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（大概版本）

  12. package-lock.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。（具体版本）

  13. README.md：项目的说明文件。

  14. webpack.config.js：webpack的配置文件，例：把.vue的文件打包成浏览器能读懂的文件。

  15. .babelrc:是检测es6语法的配置文件，例：适配哪些浏览器的限制

  16. .gitignore:上传到服务器忽略哪些文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

  17. .postcssrc.js:前缀的配置 （css转化的配置）

  18. .editorconfig:对代码进行规范，例：root是否进行检测，代码尾部是否换行，缩行前面几个空格…（建议定义这个规范）

  19. .eslintrc.js:配置eslint语法规则（在这里面的rules属性中配置让哪个语法规则失效）

  20. .eslintignore:忽略eslint对项目某些文件的语法规则的检查

若拿到别人的项目或从gethub上下载的项目第一步就是要在项目中cnpm install;下载项目所依赖的插件，然后npm run dev （npm run start）运行项目

五、Vue核心指令

Vue导入

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

1、插值表达式

指令： 

  <div id="app">
  	<!-- 插值表达式获取vue中的msg信息 -->
    <p> msg </p>
       message
      <hr>
      student
      <hr>
      student.name
      <hr>
      school[0]
      <hr>
      school
  </div>

  <script>
    var vm = new Vue(
      el: '#app', 
      data: 
      message: " Hello,Vue!",
      student:
        name:"步尔斯特",
        age:18
      ,
      school:["1","2"]
    ,
    )
</script>

2、v-text

设置标签的文本值（textContent）

<body>
  <div id="app">
    <h2 v-text="message+'very good'"></h2>
    message+"very good"
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        message: "hello,步尔斯特."
      
    )
  </script>
</body>

3、v-html

设置标签的innerHTML，内容中有html结构会被解析为标签

<body>
  <div id="app">
    <b v-html="con"></a>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        message: "hello,步尔斯特.",
        con:"<a href='http://#'>步尔斯特</a>"
      
    )
  </script>
</body>

4、v-on

为元素绑定事件

<body>
  <div id="app">
    <input type="button" value="单击" v-on:click="clicktest">
    <input type="button" value="鼠标" v-on:mouseenter="clicktest">
    <input type="button" value="双击" v-on:dblclick="clicktest">
    <input type="button" value="单击简写" @click="clicktest">
    <hr>
    <h2 @click="clicktest">message</h2>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        message: "步尔斯特",
        count: "0"
      ,
      methods: 
        clicktest: function () 
          this.message = "已经被修改" + this.count++
        
      
    )
  </script>
</body>

传递自定义参数，事件修饰符

    <input type="button" value="单击简写" @click="clicktest('Java')">
    ...
    methods: 
      clicktest: function (p1) 
        this.message = p1 + "已经被修改" + this.count++

5、计数器实战

<body>
  <div id="app">

    <button @click="sub">-</button>
    <span>count</span>
    <button @click="add">+</button>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        message: "步尔斯特",
        count: "0"
      ,
      methods: 
        add: function () 
          this.count++
        ,
        sub:function()
          this.count--
        
      
    )
  </script>
</body>

6、v-show

根据表达式的真假，切换元素的显示和隐藏

<body>
  <div id="app">
    <button @click="changee">步尔斯特</button>
    <h4 v-show="isShow">message</h4>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        message: "步尔斯特",
        isShow: false
      ,
      methods: 
        changee: function () 
          this.isShow = !this.isShow
        
      

    )
  </script>
</body>

7、v-if

根据表达式的真假，切换元素的显示和隐藏（操作dom元素）

<body>
  <div id="app">
    <button @click="changee">步尔斯特</button>
    <h4 v-if="isIf">message</h4>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        message: "步尔斯特",
        isIf: false
      ,
      methods: 
        changee: function () 
          this.isIf = !this.isIf
        
      

    )
  </script>
</body>

8、v-bind

设置元素属性

<body>
  <div id="app">
    <button @click="changee">步尔斯特</button>
    <img v-if="isIf" v-bind:src="mysrc">
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        isIf:false,
        mysrc: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Ff7%2F80%2F97%2Ff7809705cbe5c0fc580e401270522a0a.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650790832&t=74454e75c55e6a3b59f6aa3be6584681"
      ,
      methods: 
        changee: function () 
          this.isIf = !this.isIf
        
      

    )
  </script>
</body>

9、v-for

根据数据生成列表结构，经常和数组结合使用

<body>
  <div id="app">
    <ul>
      <li v-for="(item,index) in arr" :title="item">
        index -> item
      </li>
    </ul>
    <ul>
      <li v-for="(item,index) in objArr" :title="item">
        item.name
      </li>
    </ul>

  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        arr: [1, 2, 3, 4, 5],
        objArr: [
          name: "jack"
        ,
         name: "zhangsan" ]
      
    )
  </script>
</body>

10、v-model

获取和设置表单元素的值

<body>
  <div id="app">
    <input type="text" v-model="message" @keyup.enter="getM">
    <h2>message</h2>
  </div>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

  <script>
    var app = new Vue(
      el: "#app",
      data: 
        message: "步尔斯特"
      ,
      methods: 
        getM: function () 
          alert(this.message)
        
      
    )
  </script>
</body>

六、实战小项目

1、记事本

可动态增加、删除、显示总数、一键清除、隐藏

html

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>步尔斯特记事本</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <meta name="robots" content="noindex, nofollow" />
  <meta name="googlebot" content="noindex, nofollow" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" href="./css/index.css" />
</head>

<body>
  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>步尔斯特记事本以上是关于Vue快速入门（附实战小项目：记事本天气预报音乐播放器）的主要内容，如果未能解决你的问题，请参考以下文章
 

 Node.js+Vue+mysql项目实战入门之环境搭建，项目创建-附github地址


 Node.js+Vue+mysql项目实战入门之环境搭建，项目创建-附github地址


 Node.js+Vue+mysql项目实战入门之环境搭建，项目创建-附github地址


 web前端入门到实战：撸两个天气小程序


 Vue快速入门（从入门到实战）（IDEA版）一篇文章即可快速入门（可直接开发前后端分离项目）


 vue慕课网音乐项目手记：6-手写滚动轮播图（中）