Fork me on GitHub

Vue学习笔记

发表于 | 更新于 | 分类于 | | 阅读次数：
本文字数： 14k | 阅读时长 ≈ 13 分钟

目录

  • 背景
  • 第一部分 开发、测试环境项目部署
  • 第二部分 项目打包
  • 第三部分 生产环境部署
  • 第四部分 总结
  • 参考文献及资料

背景

第一部分 第一个案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "Hello"
    }
  });
</script>

</body>
</html>

第二部分 组件

2.1 v-bind

绑定

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="app">
  <span v-bind:title="messageTest">
  鼠标悬停
  </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>

  var vm = new Vue({
    el: "#app",
    data: {
      //messageTest: "页面加载与"+ new Date().toLocaleString()
      messageTest: "test"
    }
  });
</script>

2.2 判断循环（v-if、v-else、v-else-if）

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="app">
  <h1 v-if="ok">Yes</h1>
  <h1 v-else>No</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      ok: true
    }
  });
</script>

表达式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <h1 v-if="type==='A'">A</h1>
  <h1 v-else-if="type==='B'">B</h1>
  <h1 v-else>C</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      type: "A"
    }
  });
</script>

2.3 Vue.component

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
  <rongxiang v-for="item in items" v-bind:mid="item"></rongxiang>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script>

  Vue.component("rongxiang",{
    props: ["mid"],
    template: '<li>{{mid}}</li>'
  })

  var vm = new Vue({
    el: "#app",
    data: {items: ["java","python","lua","scala"]},

  });
</script>

第三部分 通信Axios

参考文献及资料

1、vue项目文档，链接：https://vuejs.org/

本文标题:Vue学习笔记

文章作者:rong xiang

发布时间:2021年07月31日 - 13:07

最后更新:2022年10月25日 - 23:10

原始链接:https://zjrongxiang.github.io/posts/71513ccb/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%