Vue基础入门

游星凌

已于 2023-01-14 13:00:28 修改

阅读量183

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2023-01-03 18:15:57 首次发布

本文链接：https://blog.csdn.net/youxing_ling/article/details/128537166

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue快速入门

Vue基础

特点：JavaScript框架、简化Dom操作、响应式数据驱动（数据改变，页面改变）

第一个Vue程序

首先，我们尝试着跑起来第一个程序。

直接去官网找起步教程：https://v2.cn.vuejs.org/v2/guide/

先将开发版本的 vue.js 引入 html 文件（这里先不用vue-cli脚手架）。

再将 vue 的关键代码粘贴进去（创建 Vue 实例对象，使用模板语法把数据渲染到页面上）

最终代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue基础入门</title>

</head>

<body>

    <div id="app">
        {{ message }}
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>

</html>

成功运行：

Vue指令

内容绑定，事件绑定：v-text、v-html、v-on
显示切换，属性绑定：v-show、v-if、v-bind
列表循环，表单元素绑定：v-for、v-model

v-text

设置标签的内容，默认写法会替换全部内容,使用差值表达式 {{}} 可以替换指定内容。

这标签就挺。。一般用 {{}} 就行。

v-html

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

v-on

为元素绑定事件，指令可以简写为@，绑定的方法定义在 methods 属性中。

事件的后面跟上.修饰符可以对事件进行限制：

计数器

CSS 太差了，样式调不出来，直接写个纯净版。。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计数器</title>
</head>

<body>

    <div id="app">
        <div>
            <button @click="sub">-</button>
            <span>{{num}}</span>
            <button @click="add">+</button>
        </div>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                num: 0,
            },
            methods: {
                add() {
                    if(this.num < 10) {
                        this.num++;
                    }else {
                        alert("别点了，受不了了");
                    }
                },
                sub() {
                    if(this.num > 0) {
                        this.num--;
                    }else {
                        alert("别点了，没了");
                    }
                },
            }
        })
    </script>
</body>

</html>

v-show

根据表达式的真假，切换元素的显示或隐藏。（实质为更改样式 display）

v-if

根据表达式的真假切换元素的显示状态。（本质是通过操纵 dom 元素）

v-bind

设置元素的属性（比如：src，title，class）

切换图片

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue指令</title>
    <style>
        .active {
            border: 1px solid cyan;
        }
    </style>
</head>

<body>

    <div id="app">
        <button @click="prev" v-show=" index > 0 ">上一张</button>
        <img :src="imgList[index]" style="width: 10%;">
        <button @click="next" v-show=" index < imgList.length-1 ">下一张</button>
        
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                imgList: [
                "https://youxing-typora.oss-cn-qingdao.aliyuncs.com/%E7%9A%AE%E5%8D%A1%E4%B8%98.jpg",
                "https://youxing-typora.oss-cn-qingdao.aliyuncs.com/a9da3032114f4db013a2333b4d37a9b0(1).jpeg",
                "https://youxing-typora.oss-cn-qingdao.aliyuncs.com/%E7%9A%AE%E5%8D%A1%E4%B8%982.jpg" ,
                "https://youxing-typora.oss-cn-qingdao.aliyuncs.com/%E6%9C%88%E8%89%B2.jpg"
                ],
                index: 0,
                
            },
           methods: {
                prev() {
                    this.index--;
                },
                next() {
                    this.index++;
                }
           }
        })
    </script>
</body>

</html>

v-for

根据数据生成列表结构，语法是（item,index) in 数据。

v-model

获取和设置表单元素的值（双向数据绑定）

小黑记事本

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="./index.css" />
</head>

<body>

  <!-- 主体区域 -->
  <section id="todoapp">
    <!-- 输入框 -->
    <header class="header">
      <h1>小黑记事本</h1>
      <input  autofocus="autofocus" autocomplete="off" placeholder="请输入任务"
        class="new-todo" v-model="inputValue" @keyup.enter="add"/>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item,index) in arr">
          <div class="view">
            <span class="index">{{index+1}}</span>
            <label>{{item}}</label>
            <button class="destroy" @click="del(index)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-if="this.arr.length != 0" >
      <span class="todo-count" >
        <strong> {{arr.length}} </strong> items left
      </span>
      <button  class="clear-completed" @click="clear">
        Clear
      </button>
    </footer>
  </section>

  <!-- 底部 -->
  <footer class="info">
    <p>
    
    </p>
  </footer>

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: "#todoapp",
      data: {
        arr:[
            "吃饭饭",
            "睡觉觉",
        ],
        inputValue :"",
      },
      methods: {
        del(index) {
            this.arr.splice(index,1);
        },
        add() {
            this.arr.push(this.inputValue);
            this.inputValue = "";
        },
        clear() {
            this.arr = []
        }
      },
    })
  </script>
</body>

</html>

css代码

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

.hidden {
  display: none;
}

#todoapp {
  background: #fff;
  margin: 180px 0 40px 0;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

#todoapp input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#todoapp input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}

#todoapp h1 {
  position: absolute;
  top: -160px;
  width: 100%;
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, .8);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  border: 1px solid #999;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
  position: relative;
  z-index: 2;
  border-top: 1px solid #e6e6e6;
}

.toggle-all {
  width: 1px;
  height: 1px;
  border: none; /* Mobile Safari */
  opacity: 0;
  position: absolute;
  right: 100%;
  bottom: 100%;
}

.toggle-all + label {
  width: 60px;
  height: 34px;
  font-size: 0;
  position: absolute;
  top: -52px;
  left: -13px;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.toggle-all + label:before {
  content: "❯";
  font-size: 22px;
  color: #e6e6e6;
  padding: 10px 27px 10px 27px;
}

.toggle-all:checked + label:before {
  color: #737373;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 420px;
  overflow: auto;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  border-bottom: 1px solid #ededed;
  height: 60px;
  box-sizing: border-box;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 16px;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}

.todo-list li .toggle {
  opacity: 0;
}

.todo-list li .toggle + label {
  /*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-list li .toggle:checked + label {
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E");
}

.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
  color: #af5b5e;
}

.todo-list li .destroy:after {
  content: "×";
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.clear-completed:hover {
  text-decoration: underline;
}

.info {
  margin: 50px auto 0;
  color: #bfbfbf;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.info a:hover {
  text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: 10px;
  }
}

效果图

网络应用-天知道

axios

功能强大的网络请求库。

首先去官网找到使用方式：https://www.axios-http.cn/docs/intro

这里直接采用简单的 cdn 方式引入。

测试如下：

需要注意的是，axios 请求中 this 发生了改变，无法直接取到 data 中的数据：

如果想要将请求到的数据赋值给 data 中的数据，应该将 this 保存起来：

天知道

跟本地应用小黑记事本比，就多了个 axios 网络请求，就不写了。

不过把 js 部分单独抽取出来再引入倒是我没想到的。

音乐播放器

素材与接口不好搞，参考了一下别人的 git 仓库：https://gitee.com/wuyuyang_bklyyds/wustudy/tree/master/17.musicplayer.html