IT0009.Vue.js核心技术解析与uni-app跨平台实战开发

最新推荐文章于 2024-07-28 20:27:10 发布

niunan

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量493

点赞数 1

分类专栏：读书笔记文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/niunan/article/details/129344618

版权

读书笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

IT0009.Vue.js核心技术解析与uni-app跨平台实战开发

自己一面看一面跟着打的代码，蛮大，其实很多都是npm的modules

链接:中国移动云盘短信小程序提取码:P7nf

第1章 Vue.js基础入门

v-bind指令可以简写成：

<img v-bind:src="logo" />
<img :src="logo" />
<!--注：logo是vue代码中的data中的变量-->

v-on指令可以简写成@

<button type="button" v-on:click='add'>click</button>
<button type="button" @click='add'>click</button>
<!--注：add是vue代码中的methods中定义的方法名-->

hello world

<div id="app">
    {{msg}}
    <br />
    {{obj.name}}
    <br />
    {{fl()}}
    <br />
    {{num>10?'数字num大于10':'数字num小于10'}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'hello niunan.',
            obj:{
                name:"牛腩"
            },
            fl(){
                return 3+5;
            },
            num:3
        } 
    })
    </script>

计算器代码

<!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>
            <style>
                [v-cloak]{
                    display:none;
                }
            </style>
        </head>
        <body>
            <div id="app" v-cloak>
                <input type="text" v-model="num1" placeholder="请输入第1个数"/>
                <select v-model="sel">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
                <input type="text" v-model="num2" placeholder="请输入第2个数"/>
                <input type="button" value="=" @click="btn" />
                <input type="text" v-model="res" />
            </div>
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
            <script>
                var vm=new Vue({
                    el:'#app',
                    data:{
                        num1:null,
                        num2:null,
                        sel:'+',
                        res:null
                    },
                    methods:{
                        btn(){
                            if(this.sel=="+"){
                                this.res = parseInt(this.num1)+parseInt(this.num2);
                            }else if(this.sel=='-'){
                                this.res = parseInt(this.num1)-parseInt(this.num2);
                            }else if(this.sel=='*'){
                                this.res = parseInt(this.num1)*parseInt(this.num2);
                            }else if(this.sel=='/'){
                                this.res = parseInt(this.num1)/parseInt(this.num2);
                            }
                        }
                    }
                })
            </script>
        </body>
        </html>

简易学生管理系统代码

 <div id="main" v-cloak>
        <table>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>新增时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,i) in search(keywords)">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td><a @click.prevent="del(i)">删除</a></td>
            </tr>
            <tr>
                <td><input type="text" placeholder="请输入学号" v-model="id" /></td>
                <td><input type="text" placeholder="请输入姓名" v-model="name" /></td>
                <td><input type="text" placeholder="搜索学生姓名" v-model="keywords" /></td>
                <td><input type="button" value="新增" @click="add" /></td>
            </tr>
        </table>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script>
    var vm = new Vue({
        el:'#main',
        data:{
            id:'',//用户输入的学号
            name:'',//用户输入的姓名
            keywords:'',//搜索关键字
            list:[
                {id:1,name:'小明',time:new Date()},
                {id:2,name:'小红',time:new Date()},
                {id:3,name:'小涛',time:new Date()},
            ]
        },
        methods:{
            add(){
                var stu={
                    id:this.id,name:this.name,time:new Date()
                };
                this.list.push(stu);
                this.id=this.name='';
            },
            del(i){
                console.log('del:'+i);
                this.list.splice(i,1);
            },
            search(keywords){
                var newList=[];
                this.list.forEach(item => {
                    if(item.name.indexOf(keywords)!=-1){
                        newList.push(item);
                    }
                });
                return newList;
            }
        }
    })
</script>

第2章 Vue.js绑定样式及案例

tab的简单实现

<style>
        .redColor{
            color:red;
            background-color: antiquewhite;
            padding:5px 10px; 
        }
    </style>

<div id="app">
    <div>
        <span :class="{redColor:active==0}" @click="btn(0)">vue.js</span>
        <span :class="{redColor:active==1}" @click="btn(1)">node.js</span>
        
    </div>
    <div v-if="active==0">vue.js的内容</div>
        <div v-if="active==1">node.js的内容</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            active:0
        },
        methods:{
            btn(i){
                this.active = i;
            }
        }
    });
</script>

第3章 Vue.js生命周期函数

第4章 Vue.js动画

点击按钮显示隐藏区域

<!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>
    <style>
        .v-enter, .v-leave-to{
            opacity:0;
            transform: translateX(100px);
        }
        .v-enter-active, .v-leave-active{
            transition: all 0.5s ease;
        }
    </style>
</head>
  <body>
    
    <div id="app">
        <h3>没用动画</h3>
        <input type="button" value="toggle" @click="toggleFn" />
        <div v-if="flag"><strong>{{msg}}</strong></div>
        <hr />
        <h3>用了动画</h3>
        <input type="button" value="toggle" @click="toggleFn2" />
        <transition>
            <div v-if="flag2"><strong>{{msg}}</strong></div>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                flag2:true,
                msg:"Hello Niunan.",
            },
            methods:{
                toggleFn(){
                    this.flag = !this.flag;
                },
                toggleFn2(){
                    this.flag2 = !this.flag2;
                },
            }
        });
    </script>
</body>
</html>

CSS3动画演示：http://www.mm2018.com/index.php/special/view_uprecord/uprecord_id/110.html

<!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>CSS3动画库</title> 
    <link rel="stylesheet" href="css/animate.min.css" />
</head>
<body>
    
    <div id="app">
        <h3>CSS3动画库</h3>
        <input type="button" value="toggle" @click="toggleFn" />
        <transition enter-active-class="animated flipInY" leave-active-class=" animated flipOutY">
        <div v-if="flag"><strong>{{msg}}</strong></div>
        </transition>
        <hr /> 
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true, 
                msg:"Hello Niunan.",
            },
            methods:{
                toggleFn(){
                    this.flag = !this.flag;
                } 
            }
        });
    </script>
</body>
</html>

列表动画

<!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>
    <style>
        .v-enter, .v-leave-to{
            opacity:0;
            transform: translateY(100px);
        }
        .v-enter-active, .v-leave-active{
            transition: all 1s ease;
        }
    </style>
</head>
<body>
    <div id="app">
        <transition-group appear tag="ul">
            <li v-for="item in list" :key="item.id">
                {{item.id}} → {{item.name}}
            </li>
        </transition-group>
        <input type="text" v-model="id" placeholder="输入ID" />
        <input type="text" v-model="name" placeholder="输入name" />
        <input type="button" value="add" @click="add" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                list:[
                    {id:1,name:"明明"},
                    {id:2,name:"空空"},
                ]
            },
            methods:{
                add(){
                    var m = {id:this.id, name:this.name};
                    this.list.push(m);
                    this.id='';
                    this.name ='';
                }
            }

        })
    </script>
</body>
</html>

第5章 Vue.js组件

<!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="main">
        <mycom1></mycom1> 
        <mycom3></mycom3>
        {{msg}}
    </div>
    <template id="temp">
        <div><h3>我是组件</h3></div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script>
        var com1 = Vue.extend({
            template:'<h1>tttt</h1>'
        })
        Vue.component('mycom1',com1);
        Vue.component('mycom3',{
            template:'#temp'
        })
        var vm = new Vue({
            el:'#main',
            data:{
                msg:"hello niunan."
            }
        })
        </script>
</body>
</html>

第6章 Vue.js路由

<!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>
    <style>
        .router-link-active{
            color:white;
            background-color: blue;
            padding:5px 10px;
        }
    </style>
</head>
<body>
    <div id="main"> 
        <router-link to="/login?id=1">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
    <script>
        var login={
            template:"<h1>登录,id:{{id}}</h1>",
            data(){
                return{
                    id:null
                }
            },
            created(){
                console.log(this.$route);
                this.id=this.$route.query.id
            }
        };
        var register = {
            template:"<h1>注册</h1>"
        };
        var router = new VueRouter({
            routes:[{
                path:'/login',
                component:login
            },{
                path:'/register',
                component:register
            }]
        });
        var vm = new Vue({
            el:'#main',
            router:router
        })
        </script>
</body>
</html>

第7章 Vue.js高级进阶

本章主要讲vue-cli的简单使用，先装node.js,再装vue-cli

npm install vue-cli -g
//上面是书中的命令，在2023年03月04日用出错了，得用下面的命令，都得在CMD窗口下执行，如果在powershell里执行的话多少会出错的
npm install -g @vue/cli
//新建项目，除了vue-router那里输入y外，其他都默认按回车就好了,在我电脑上创建有点慢哦！！！电信20M
vue init webpack vuetestdemo
//运行, 记得是切换到vuetestdemo目录
npm run dev

vue-cli选项卡案例

components下新新tab.vue文件,注:template下只能有一个根元素，所以得用一个div包起来

<template>
    <div>
     
<a :class="{active:isactive==0}" @click="mytab(0)">娱乐新闻</a>
<a :class="{active:isactive==1}" @click="mytab(1)">体育新闻</a>
<a :class="{active:isactive==2}" @click="mytab(2)">热搜新闻</a>
 
<hr />
<ul>
    <li v-for="item in newlist[isactive]">{{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
    data(){
        return {
            isactive:0,
            newlist:[
                ["娱乐新闻1","娱乐新闻2","娱乐新闻3"],
                ["体育新闻1","体育新闻2","体育新闻3"],
                ["热搜新闻1","热搜新闻2","热搜新闻3"]
            ]
        }
    },
    methods:{
        mytab(i){
            this.isactive = i;
        }
    }
}
</script>
<style scoped>
.active{color:red;}
</style>

2. router下的index.js文件加入tab路由规则，记得要先import

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//需要先引入Tab组件
import tab from '@/components/tab'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/tab',
      name: 'tab',
      component: tab
    }
  ]
})

3.运行测试，/tab 即可出来

第8章 element-ui/mint-ui组件库

书上写得太简单，看不懂，好像是以vue cli为基础安装的，我自己按官网的弄了，改了一下前面的计算器的界面，其他样式的可看官网文档

Element - The world's most popular Vue UI framework

<!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>
    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <el-row :gutter="10">
            <el-col :span="3"><el-input v-model="num1" placeholder="请输入第1个数"></el-input></el-col>
       
            <el-col :span="2"> 
                <el-select v-model="sel" placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
            </el-col>
     
            <el-col :span="3">
                <el-input v-model="num2" placeholder="请输入第2个数"> </el-input>
            </el-col>
       
            <el-col :span="1">
                <el-button type="primary" @click="btn">=</el-button>
            </el-col>
      
            <el-col :span="2"><el-input   v-model="res" /></el-col>
        </el-row>
    
 
        
      
    </div> 
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    <!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script> 
        var vm=new Vue({
            el:'#app',
            data:{ 
                num1:null,
                num2:null,
                sel:'+',
                res:null,
                options: [{
                    value: '+',
                    label: '加'
                    }, {
                    value: '-',
                    label: '减'
                    }, {
                    value: '*',
                    label: '乘'
                    }, {
                    value: '/',
                    label: '除'
                    }]
            },
            methods:{
                btn(){
                    if(this.sel=="+"){
                        this.res = parseInt(this.num1)+parseInt(this.num2);
                    }else if(this.sel=='-'){
                        this.res = parseInt(this.num1)-parseInt(this.num2);
                    }else if(this.sel=='*'){
                        this.res = parseInt(this.num1)*parseInt(this.num2);
                    }else if(this.sel=='/'){
                        this.res = parseInt(this.num1)/parseInt(this.num2);
                    }
                }
            }
        })
    </script> 
</body>
</html>

mint-ui的官网文档：mint-ui documentation

第9章 axios发送HTTP请求

//用vue-cli命令创建项目
vue init webpack axiosdemo
//进入到项目目录安装axios
npm install axios -S
//项目中的main.js加入
import axios from 'axios'
Vue.prototype.$axios=axios
//项目中的Helloworld.vue就可以使用了
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created(){ //页面加载完成后
    var url = "http://api.mm2018.com:8090/api/goods/home";
    this.$axios.get(url)
      .then(res=>{
        console.log(res);
      })
  }
}
</script>

第10章 Vuex状态管理

看了下感觉好像没啥用，要用的时候再看官网吧

Vuex 是什么？ | Vuex

第11章企业项目实战

主要也是一个列表页和详情页，具体可看代码，和第14章的差不多的，只是把uni的ajax方式改为axios方式来取远程数据了

第12章 Vue 3.X新特性解析

官网文档：简介 | Vue.js

第13章 uni-app核心基础

装HBuilderX,HBuilderX-高效极客技巧