vue pc端 输入验证码_纯、vue、Taro(vue)移动端

纯移动端，vue移动端，Taro(移动端比较)

一、适配移动端

纯移动端

直接在js文件中放入font-auto.js和zepto.min.js(移动端适配字体和移动端jq),然后在每个页面引用就可以了

<script src="js/font-auto.js">script>

<script src="js/zepto.min.js">script>

Vue移动端

引入font-auto.js(移动端的字体设置)

Taro(vue) h5的移动端

不用做任何改动，它就是用来多端适配的(纯移动端和vue移动端单位都建议使用rem(1rem=100px)，Taro中依然用px(Taro内部会自动将小写的px转成rem且1rem=25.3px,大写的PX则不会))

二、路由跳转页面

纯移动端

直接使用a链接实现跳转

走，去列表页瞧瞧去！

Vue移动端

1).先安装路由cnpm installvue-router

2).全局引入一下在main.js中

3).配置路由，在路由配置文件index.js中

4).在需要的页面写路由跳转

<router-link :to="{name:'list'}">我们去列表页router-link>

Taro(vue) h5的移动端

1).在app.js中进行路由配置

2).如果使用Button的话引入taro和Button

import Taro from '@tarojs/taro'

import {View,Button} from '@tarojs/components'

3).写跳转和点击世事件

<Button @click="handleClick">来，点我去列表页看看！Button>

methods:{

    handleClick(){

      console.log(1);

      Taro.navigateTo({

       url:"/pages/list/list"

      })

    }

  }

三、连接数据

纯移动端

$(function(){

    console.log(1);

    $.ajax({

        type:"get",

        url: "http://49.233.206.17:8001/admin/courselist",

        data:({

            limit:10,

            page:1

        }),

        dataType : "JSON",

        success:function(data){

            var datas=JSON.stringify(data)

            console.log(datas);

        }

    })

})

Vue移动端

1).安装依赖cnpm installaxios

2).全局引入axios，在main.js

import axios from 'axios'

Vue.prototype.$axios=axios

3).使用axios

created(){

    // 调取接口

    this.$axios({

      url: "http://49.233.206.17:8001/admin/courselist",

      method: "get",

      params: {

        limit:10,

        page:1

      }

    }).then(res => {

      console.log(res.data[0]);

      console.log(this.msg);

      this.msg=res.data[0];

    })

  }

Taro(vue) h5的移动端

和vue完全一样

四、数据渲染

纯移动端

数据渲染是有后端完成的

Vue移动端

<div>{{ msg }}div>

data () {

    return { 

      msg: '欢迎来到我的世界！'

    }

  },

this.msg=res.data[0];

Taro(vue) h5的移动端

和vue移动端完全一样

五、列表渲染

纯移动端

纯移动端是写出来，之后又后端完成活列表数据的渲染

               

               

               

         

Vue移动端

Taro(vue) h5的移动端

和vue移动端一样(但是由于Taro导入图片不能使用require的原因，Taro的使用本地图片无法实现循环，只能导入单张图片；详细信息见下)

六、引入静态资源图片

纯移动端

直接写路径即可

<img src="img/工业的-84.png" alt="">

Vue移动端

1).写路径的时候要用@(相当于./)

<img src="@/assets/contTu1.jpg" alt="">

2).数据return中使用require()引入

<img :src='imgkall' alt="">

imgkall:require("../assets/contTu1.jpg"),

3).使用import引入，在数据return定义

<img :src='imgkall' alt="">

Import在js中顶部写

import imgkall from '../assets/contTu1.jpg'

return中定义

imgkall: imgkall,

Taro(vue) h5的移动端

目前亲测只有vue方法中的第三中有效(同上)(这里我们给出调取接口后的文字带图片的渲染，不给静态的(静态的目前无法实现))

相关链接：https://blog.csdn.net/qq_44114279/article/details/107359920?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-5.channel_param

上面链接中虽然提到了怎样批量到入静态图片；但是直接写始终提示，找不到图片

调取接口代码如下(和纯vue移动端调取接口是一样的)

七、事件

纯移动端

$(".dianwo").click(function(){

        console.log(111);

    })

Vue移动端

<p @click="dianwo">点点我p>

methods:{

    dianwo(){

      console.log(111);

    }

  }

Taro(vue)移动端

和vue移动端一样

八、数据的双向绑定

纯移动端

数据是单向的，不存在数据的双向绑定

Vue移动端

Vue数据的双向绑定，可以将用户输入的数据直接传入后台

<p><input type="text" v-model="hhh">p>

<p>{{hhh}}p>

在数据中

hhh:123

Taro(vue)移动端

和vue移动端一样