Vue 开发入门

前置：Linux 系统搭建 Node.js 环境

https://yuwei.cc/posts/linux-nodejs.html

前置：Windows 系统搭建 Node.js 环境

https://yuwei.cc/posts/windows-nodejs.html

npmmirror 中国镜像站

起步

版本

Vue2

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

Vue3

1	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

语法

el：
data：
指令
v-text：内容（文本）绑定
v-html：内容（html）绑定

v-on：事件绑定，可以用 @ 表示

<html>
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <p v-html="H2"></p>
      <button v-on:click="sub">-</button>
      <span> {{num}} </span>
      <button @click="add">+</button>
      <br>
      <button v-on:click="sub">-</button>
      <span v-text="num"></span>
      <button @click="add">+</button>
    </div>
    <script>
      var app = new Vue({
        el:"#app",
        data: {
          num:0,
          H2:"<h2>Demo</h2>"
        },
        methods: {
          sub:function(){
            if(this.num>0){
              this.num--;
            }else{
              alert("已经清零了");
            }
          },
          add:function(){
            if(this.num<10){
              this.num++;
            }else{
              alert("加不上去啦");
            }
          }
        },
      })
    </script>
  </body>
</html>

v-show：根据布尔值真假来设置显示或隐藏（重排）
v-if：根据布尔值真假来添加或移除 DOM（重绘）

v-bind：设置元素的熟悉，v-bind:属性名，可以用 : 表示

<html>
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <img :src="imgs[index]">
      <br>
      <a href="javascript:void(0)" @click="prev" v-show="index!=0">上一张</a>
      <a href="javascript:void(0)" @click="next" v-show="index<imgs.length-1">下一张</a>
    </div>
    <script>
      var app = new Vue({
        el:"#app",
        data: {
          imgs:[
            "https://tvax1.sinaimg.cn/mw690/91e9ebb3ly1h8sxxkbiy2j218g18e7ca.jpg",
            "https://tva1.sinaimg.cn/mw690/91e9ebb3ly1h8sxxkh8htj218g18gwqy.jpg",
            "https://tva2.sinaimg.cn/mw690/91e9ebb3ly1h8sxxkm1ghj218g18e47c.jpg",
            "https://tvax1.sinaimg.cn/mw690/91e9ebb3ly1h8sxxkqc8tj218g11adob.jpg",
            "https://tvax4.sinaimg.cn/mw690/91e9ebb3ly1h8sxxkx6ufj218g18en7d.jpg",
            "https://tva4.sinaimg.cn/mw690/91e9ebb3ly1h8sxxl1ylqj218g18eqb1.jpg",
            "https://tva2.sinaimg.cn/mw690/91e9ebb3ly1h8sxxl6yk2j218g18ek2w.jpg",
            "https://tva3.sinaimg.cn/mw690/91e9ebb3ly1h8sxxllt4hj218g15wwmr.jpg",
            "https://tva1.sinaimg.cn/mw690/91e9ebb3ly1h8sxxlqbo5j218g18e46q.jpg",
            "https://tva2.sinaimg.cn/mw690/91e9ebb3ly1h8sxxluxi4j218g18ewui.jpg",
            "https://tvax1.sinaimg.cn/mw690/91e9ebb3ly1h8sxxm308rj218g13yk6p.jpg",
            "https://tva2.sinaimg.cn/mw690/91e9ebb3ly1h8sxxm99ytj218g18edvy.jpg"
          ],
          index:0
        },
        methods: {
          prev:function(){
            this.index--;
          },
          next:function(){
            this.index++;
          }
        },
      })
    </script>
  </body>
</html>

v-for：根据数据生成列表结构，常用于遍历
v-on 扩展：传递自定义参数，事件修饰符

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

<html>
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <input v-model="inputValue" @keyup.enter="add">
      <ul>
        <li v-for="(item,index) in txts">
          <span>{{index+1}}.</span>{{item}}<button @click="del(index)">删除</button>
        </li>
      </ul>
      <span v-if="txts.length!=0">共 {{txts.length}} 个代办</span> <button v-show="txts.length!=0" @click="clear">清空</button>
    </div>
    <script>
      var app = new Vue({
        el:"#app",
        data: {
          txts:[
            "好好学习",
            "天天向上"
          ],
          inputValue:"输入任务"
        },
        methods: {
          add:function(){
            this.txts.push(this.inputValue);
          },
          del:function(index){
            this.txts.splice(index,1);
          },
          clear:function(){
            this.txts = [];
          }
        },
      })
    </script>
  </body>
</html>

应用

axios

axios 是一个基于 promise 功能强大的 HTTP 网络请求库，作用于 Node.js 和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和 Node.js中)。在服务端它使用原生 Node.js http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequest

特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据

客户端支持防御 XSRF

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})
axios.post(地址,{key1:value1,key2:value2}).then(function(response){},function(err){})
查询字符串：