Vue

看视频学的，学的稀烂啊，这里只是单纯的记录一下，过两个月做毕设的时候用到再写一个实用的博客，学懵逼了。
前端三大框架
angular.js：前端mvc
react：虚拟dom
vue：集合angular和react

axios：前端通信框架
webpack:模块打包器

引入：

<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

判断 v-if/v-else/v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else="ok">No</h1>
</div>

<div class="app">
    <h1 v-if="ok===true">Yes</h1>
    <h1 v-else-if="type==='A'">No</h1>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:".app",
        data:{
            ok: true,
            type:'A'
        }
    });
</script>
</body>
</html>

循环 v-for

<body>


<div id="app">
    <li v-for="(item,index) in items" :key="item.message">
        {{ item.message }}--{{index}}
    </li>

</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            items: [
                { message: 'Foo' },
                { message: 'Bar' }
            ]
        }
    });
</script>
</body>

绑定事件v-on

<body>


<div id="app">
    <button v-on:click="sayhi">click me</button>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"狂神说java"
        },
        methods:{
            sayhi:function () {
                alert(this.message);
            }
        }
    });
</script>
</body>

双向绑定 v-model

<body>


<div id="app">
   输入的文本 <input type="text" v-model="message">{{message}}
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:""
        },
        methods:{
            sayhi:function () {
                alert(this.message);
            }
        }
    });
</script>
</body>

单选和下拉框

<body>


<div id="app">
    <input type="radio" name="sex" value="男" v-model="message">男
    <input type="radio" name="sex" value="女" v-model="message">女

    <p>
        选中了:{{message}}
    </p>

    <select v-model="message">
        <option disabled value="">请选择</option>//为了照顾苹果用户第一项无法选中导致为空的结果
        <option>A</option>
        <option>B</option>
        <option>C</option>

    </select>
    <p>
        选中了:{{message}}
    </p>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:''
        }
    });
</script>
</body>

Vue组件

<body>


<div id="app">
    <lining v-for="item in items" v-bind:qin="item"></lining>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("lining",{
        props:['qin'],
        template: '<li>{{qin}}</li>'
    });
    var vm=new Vue({
        el:"#app",
        data:{
            items:["java","vue","linux"]
        }
    });
</script>
</body>

axios通信

<body>


<div id="app">
    <div>{{info.name}}</div>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data(){
            return{
                info:{
                    name:null,
                    sex:null,
                    age:null
                }
            }
        },
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });
</script>
</body>

计算属性computed

computed中间是存放不常变化的属性，可以理解为缓存。

<body>
<div id="app">
    <p>{{currentTime1()}}</p>
    <p>{{currentTime2}}</p>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"helloVue"
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function () {
                this.message;
                return Date.now();//返回一个时间戳
            }
        }
    });
</script>
</body>

slot插槽

<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>

        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    var vm=new Vue({
        el:"#app",
        data:{
            title:"标题",
            todoItems:['lining','anta','peak']
        }
    });
</script>
</body>

自定义函数

组件调用vue实例中的方法

<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>

        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index"
        v-on:remove="removeItems(index)"
        ></todo-items>
    </todo>
</div>


<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<script>
    Vue.component("todo",{
        template:
            '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                    <slot name="todo-items"></slot>\
                </ul>\
            </div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}--{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove:function (index) {
                this.$emit('remove',index);
            }
        }
    });
    var vm=new Vue({
        el:"#app",
        data:{
            title:"标题",
            todoItems:['lining','anta','peak']
        },
        methods:{
            removeItems:function (index) {
                console.log("删除了许中元素");
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>
</body>

nodejs配置

p13,p14

前端页面跳转 VueRouter 路由使用

前端的界面跳转，类似后端的@requestMapping

  1. 用npm安装vue 路由到本地项目中

  2. 配合路由，新建路由文件夹，新建index.js文件，在js文件中配置路由

    在路由中导入其他页面并配置。

  3. 在main.js中导入并使用
    在这里插入图片描述

  4. 在app.vue中使用
    在这里插入图片描述

  5. 运行项目npm run dev，实现
    在这里插入图片描述
    在这里插入图片描述

elementUI 快速使用

创建项目

在项目路径下打开cmd命令窗口

vue init webpack 项目名

回车一路选no，最后选择No,I will handle that myself

项目就自动创建好了，进入项目路径
安装路由

npm install vue-router --save-dev

安装elementUI

npm i element-ui -S

安装所有依赖

npm install

安装SASS加载器

cnpm install sass-loader node-sass --save-dev

启动测试

npm run dev

npm命令解释

  • npm install moduleName:安装模块到项目目录下
  • npm install -g moduleName:安装模块到全局，具体位置看npm config prefix的位置
  • npm install --save moduleName : --save的意思是将模块安装到项目目录下，并在package文件的denpencies节点写入依赖，-S为该命令的缩写
  • npm install --save-dev moduleName : --save-dev的意思是将模块安装到项目目录下，并在package文件的devDenpencies节点写入依赖，-D为该命令的缩写

开始

新建vue模块和配置路由
在这里插入图片描述
在main.js中使用路由和elementUI
在这里插入图片描述
在这里记录个错误，看着视频写得结果写错了两个地方
在这里插入图片描述这里少写了new
然后npm run dev 跳转到自己的页面就好了

参数传递

传值模块
在这里插入图片描述
路由中
在这里插入图片描述
展示模块
在这里插入图片描述

props传值

在这里插入图片描述
在这里插入图片描述

重定向

在这里插入图片描述
在这里插入图片描述

钩子函数

在这里插入图片描述

Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

【公共云三十问 之二十九】国计民生之制造：制造云如何重塑数智时代的新质生产力？

avatar 华为开发者空间
cover

【公共云三十问 之三十】拥抱AI，企业如何建设面向智能体的专属云？

avatar 华为开发者空间

告别重复手工迁仓，码道MCP+Skill实现仓库批量迁移

案例介绍。

avatar 华为开发者空间