Vue后端学习笔记（自用）

Zzzchc

已于 2022-11-27 18:06:53 修改

阅读量278

点赞数 1

分类专栏：学习笔记（自用）文章标签： vue.js 学习

于 2022-11-27 12:02:57 首次发布

本文链接：https://blog.csdn.net/m0_62053268/article/details/128062633

版权

学习笔记（自用）专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue后端学习笔记（自用）

文章目录

Vue后端学习笔记（自用）

全篇建议结合实例食用~

1.入门

环境准备（二选一）：

 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>

<!--生产环境-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>

第一个入门案例：el、data、{{}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>helloworld</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <br>
        <span>
            {{msg}}
        </span>

        <h3>{{user.name}}</h3>
        <h3>{{lists[1]}}</h3>
        <h3>{{users[1].name}}</h3>

        {{msg.toUpperCase()}}
        <br>
        {{user.msg == 6}}
    </div>

    <script>
        const app = new Vue({
            el:"#app",
            data:{
                msg:"cui",
                user:{name:"cuihua",msg:"6"},
                lists:["sx","bj","tj"],
                users:[{name:"c",msg:"1"},{name:"h",msg:"2"}]
            }
        });
    </script>

<!--vue对象中，el属性代表Vue作用范围，日后在Vue的作用范围内都可以使用Vue语法
             data属性给Vue实例一定数据
             Vue推荐使用 id选择器(集合中)
             {{}}中可以书写表达式、运算符和调用各种方法-->
</body>
</html>

1.el属性：代表Vue的作用范围（在Vue的作用范围内都可以使用Vue的语法）

2.data属性:给Vue实例绑定一些相关数据，绑定的数据可以通过{{变量名}}在Vue作用范围内取出
3.可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算等

2.v-text与v-html

<body>
    <div id="app">
        <span>{{message}},666</span>
        <br>
        <span v-text="message">,666</span>,这样不会被覆盖了~
        <br>
        <span v-html="web">没有显示</span>
        <br>
        <br>
        <h2>年龄：{{age}}</h2>
        <br>
        <input type="button" value="点我加年龄" v-on:click="changeage">
        <input type="button" value="点我减年龄" @click="changeagej">
        <br>
        <h1>{{count}}</h1>
        <input type="button" value="点我改变count" @click="change" >
    </div>

    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:"cui",
                web:"<a href=''>web</a>",
                age:23,
                count:10
            },
            methods:{
                changeage:function (){
                    // alert('点击触发');
                    // console.log(this);
                    this.age++;
                },
                // changeagej:function (){
                //     this.age--;
                // }
                changeagej(){
                    this.age--;
                },
                change(c){
                  this.count = 1;
                }
            }
        });
    </script>

<!--v-text与{{}}的区别：
    1.v-text会把内部原有数据覆盖，插值表达式不会
    2.用v-text可以避免插值闪烁（网络较差的情况下）

    v-html将含有的html标签先解析再渲染，类似于js中的innerHTML

    事件（事件源：发生事件的DOM元素；事件：发生特定动作 click...；监听器：发生特定动作后的事件处理程序 js的函数）
    绑定事件(v-on:事件名)
	@为v-on的简化[更常用]

    vue的函数通常放入methods中
    this即是当前Vue实例
    -->
</body>

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部类似于javascript 中 innerText

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部类似于javascript中 innerHTML

事件源：发生事件dom元素

事件：发生特定的动作 click… 监听器发生特定动作之后的事件处理程序通常是js中函数

3.v-show

<body>
    <div id="app">
        <h1 v-show="isShow">看见我了吗？</h1>
        <input type="button" value="点我隐藏/显示" @click="showHide">
        <br>
        <h1 v-if="false">不推荐</h1>
        <br>
        <img width="300px" v-bind:title="title" src="(某图片地址)">
        <br>
        <span v-for="u,index in users">
            {{index}} {{u.name}},{{u.age}}
            <br>
        </span>

        <br>
        <span>
<!--           一定要加  :key 便于Vue内部做重用、排序-->
            <li v-for="u,index in users" :key="u.id">
                {{index}} || {{u.name}},{{u.age}}
            </li>
        </span>

        <br>
        <input type="text" v-model="message">
        <span>{{message}}</span>
        <br>
        <input type="button" value="点我改变message的值" @click="changeMessage">
    </div>

    <script>
        const app = new Vue({
            el:"#app",
            data:{
                isShow:true,
                title:"cui",
                users:[
                    {id:1,name:"cui",age:24},
                    {id:2,name:"liu",age:18}
                ],
                message:""
            },
            methods:{
                showHide(){
                    this.isShow = !this.isShow;
                },
                changeMessage(){
                    this.message = "双向绑定";
                }
            }
        });
    </script>

<!--v-show:通过控制display属性来控制是否显示
    v-if:通过对dom节点进行添加或删除来控制（不推荐，不用就会直接加注释来删减）

    v-bind:给页面中的标签元素绑定相应属性

    v-for:遍历（也可对单个对象使用，对单个对象可用key/value,对多个别用）

    v-model:双向绑定
    MVVM架构：
    Model 数据 Vue实例中绑定的数据
    VM ViewModel 监听器
    View 页面 展示的数据
    -->
</body>

4.事件修饰符

<body>
<!--.stop阻止事件冒泡
    .prevent阻止事件默认行为
    .self只触发自己标签上特定动作的事件，不监听事件冒泡
    .once事件只会被触发一次-->
<div id="app">
    <div class="aa" @click.self="divClick">
        <input type="button" value="按钮" @click.stop="btnClick"> <!--有self这块就不用stop了-->
        <input type="button" value="按钮1" @click="btnClick1">
    </div>
    <br>
    <a href="https://www.csdn.net/" @click.prevent.once="prevent">阻止</a>
    <br>
<!--    按键修饰符@keyup-->
    <input type="text" v-model="msg" @keyup.enter="keyups">
    <input type="text" @keyup.tab="keytabs">
    <input type="text" @keyup.delete="keytabs">
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:""
        },
        methods: {
            divClick(){
                alert("div");
            },
            btnClick(){
                alert("button被点击");
            },
            prevent(){
                alert("被阻止了一次");
            },
            btnClick1(){
                alert("self用了~");
            },
            keyups(){
                console.log(this.msg);
            },
            keytabs(){
                console.log(this.msg);
            }
        }
    });
</script>

</body>

5.Vue生命周期

结合图片食用：

在这里插入图片描述

#######################################################

<body>
<div id="app">
    <span id="sp">{{msg}}</span>

    <input type="button" value="修改" @click="changeData">
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Axios引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"cui"
        },
        methods: {
            changeData(){
                this.msg = "666";
            }
        },
        //初始化阶段
        beforeCreate(){//1.执行时Vue实例仅完成了自身事件的绑定和生命周期函数的初始化工作，Vue实例中还没有el、data等属性
            console.log("beforeCreate" + this.msg);
        },
        created(){//2.Vue实例中已经初始化了el、data等属性
            console.log("created" + this.msg);
        },
        beforeMount(){//3.Vue将el中指定作用范围作为模板编译
            console.log("beforeMount " + document.getElementById("sp").innerText);
        },
        mounted(){//4.将数据渲染到界面并已经更新页面
            console.log("Mounted " + document.getElementById("sp").innerText);
        },
        //运行阶段
        beforeUpdate(){//5.data数据发生变化时执行：此时仅仅是data数据发生变化，显示的数据仍为原始数据
            console.log("beforeUpdate data数据："+ this.msg);
            console.log("beforeUpdate 显示数据：" + document.getElementById("sp").innerText);
        },
        updated(){//6.data数据发生变化时执行：页面与data一致了
            console.log("updated" + this.msg);
            console.log("updated " + document.getElementById("sp").innerText);
        },
        //销毁阶段
        beforeDestory(){//7.Vue数据销毁，methods、component还未销毁

        },
        destory(){//8.Vue彻底销毁

        }
    });
</script>

</body>

6.component

<body>
<div id="app">
    <registry></registry>
    <login user-name="cui" v-bind:age="age" :data="data" :name="name"></login>   <!--静态、动态prop-->
    <delet></delet>

</div>

<template id="deletTemplate">
    <h3>delet</h3>
</template>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Axios引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //全局组件：任意vue实例均可用
    Vue.component("registry", {
            template: "<div><h1>c</h1></div>"
        }
    )

    //局部组件一
    let login = {
        template: "<div><h2>欢迎：{{userName}}、{{age}}、{{data}}、{{name}}</h2>" +
            "<br>" +
            "<input type='button' value='点我触发' @click='change'></div>",
        props: ["userName", "age", "data"], //若父组件中也有name，则子组件中不能再有name，否则会改变父（单向数据流）
        data(){
            return{
              name:"自己的data"    //定义自己的内部数据
            };
        },
        methods:{
            change(){
                alert("自己的函数");
            }
        }
    }

    //局部组件二     
    let delet = {
        template: "#deletTemplate",
    }

    const app = new Vue({
        el: "#app",
        data: {
            age: 24,
            data: "2000"
        },
        methods: {},
        components: {
            "login": login,
            "delet": delet
        }
    });
</script>

</body>

7. 子组件的一些注意点

<body>
<div id="app">
    <login :cdname="fname" @cdfind="find"></login>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Axios引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const login = {
        template:"<div><h1>{{sname}}</h1> <input type='button' value='点我' @click='sfind'></div>",
        data(){
            return{
                sname:this.cdname + " is good"  //这样子组件可在不干扰父组件的情况下进行修改
            }
        },
        props:["cdname"],    //类似于传参
        methods:{
            sfind(){
                this.$emit("cdfind");   //调用传递的方法
            }
        }
    }

    const app = new Vue({
        el: "#app",
        data: {
            fname:"father"
        },
        methods: {
            find(){
                alert("find");
            }
        },
        components:{
            login
        }
    });
</script>

</body>

8. vue-router

<body>
<div id="app">
<!--    <a href="#/login">点我登录</a>-->
<!--    <a href="#/registry">点我注册</a>-->
    <router-link to="/login?id=21" tag="button">点我登录</router-link>
    <router-link to="/registry/24" tag="button">点我注册</router-link>
    <router-view></router-view>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Axios引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- router-->
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script>
    const login = {
        template: "<h1>login</h1>",
        data(){return{}},
        methods:{},
        created(){
            console.log(this.$route.query.id);  //传递参数一： ?query
        }
    };

    const registry = {
        template: "<h1>registry</h1>",
        created() {
            console.log(this.$route.params.id); //传递参数二： :param
        }
    };

    const router = new VueRouter({
        routes:[
            {path: "/",redirect:"/login"},  //默认路由,推荐用redirect
            {path:"/login",component:login},
            {path:"/registry/:id",component: registry}
        ]
    });
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router
    });
</script>

</body>

9.嵌套路由

<body>
<div id="app">
    <router-link to="/product">商品管理</router-link>

    <router-view></router-view>
</div>

<template id="product">
    <div>
        <h1>商品管理</h1>

        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品编辑</router-link>

        <router-view></router-view>
    </div>
</template>


<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Axios引入-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- router-->
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script>
    const product={
        template:"#product"
    }
    const add={
        template:"<h4>商品添加</h4>"
    }
    const edit={
        template:"<h4>商品编辑</h4>"
    }

    const router=new VueRouter({
        routes:[
            {
                path:"/product",
                component:product,
                children:[
                    {path:"add",component: add},
                    {path:"edit",component: edit}
                ]
            }
        ]
    })

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router
    });
</script>

</body>

10.Vue脚手架

1.安装nodejs：https://nodejs.org/en/

配置：

windows系统
- 设置–>高级系统设置–>环境变量–>系统变量–>新建:NODE_HOME
- Path–>新建:%NODE_HOME%
mac os系统
- 推荐使用.pkg安装直接配置node环境

检验：node -v

node package mangager

nodejs包管理工具前端主流技术 npm 进行统一管理

maven 管理java后端依赖远程仓库（中心仓库）阿里云镜像
npm 管理前端系统依赖远程仓库（中心仓库）配置淘宝镜像

2.安装npm

配置：

配置淘宝镜像
	npm config set registry https://registry.npm.taobao.org
	npm config get registry
配置npm下载依赖位置	
	npm config set cache	"D:/nodereps/npm-cache"	
	npm config set prefix 	"D:/nodereps/npm_global"

检验：npm config ls

用管理员模式的powershell进行

若安装后测试出现：vue不是内部或外部命令（打开node.js所在目录,搜索vue.cmd,复制路径,在环境变量的Path中配置）

3.安装脚手架：npm install -g @vue/cli

验证：cmd中输入vue

4.创建项目：

vue init webpack 项目名

在项目目录中运行：

npm start

在vue cli中一切皆组件

目录显示：
src 用来书写vue的源代码[重点]
assets 用来存放静态资源[重点]
components 用来书写Vue组件[重点]
router 用来配置项目中路由[重点]
App.vue 项目中根组件[重点]
main.js 项目中主入口[重点]

5.在脚手架中安装axios：

npm install axios --save-dev

在main.js中引入：
import axios from 'axios';
Vue.prototype.$http=axios;

6.项目打包部署

vue run build

在打包之后项目中出现dist目录,
dist目录就是vue脚手架项目生产目录或者说是直接部署目录

Zzzchc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue后端学习笔记（自用）

Vue2后端学习笔记（自用）
复制链接

扫一扫

专栏目录