Java前端 Vue2快速入门

小黄debug

已于 2022-04-01 16:52:38 修改

阅读量967

点赞数

分类专栏：谷粒商城文章标签：前端

于 2022-03-31 16:59:04 首次发布

本文链接：https://blog.csdn.net/sun1995sun/article/details/123846071

版权

谷粒商城专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1、MVVM思想

M：即Model,模型，包括数据和一些基本操作

V：即View，视图，页面渲染结果

VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中，而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的

4、Vue概念-Vue.js是什么？

Vue是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或即有项目整合。另一方面，当与现代化的工具链以及各种类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

安装Vue

使用node安装vue

1）初始化node npm init -y

2) 安装vue npm install vue

3、入门案例-Hello world

<body>

    <div id="app">
        <h1> {{name}},非常帅</h1>
    </div>

    <!-- <script src="./node_modules/vue/dist/vue.cjs.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "张三"
            }
        });
    </script>
</body>

Vue基本语法&插件安装

<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>
        <h1> {{name}},非常帅,有{{num}}个人为他点赞</h1>
    </div>
    <!-- <script src="./node_modules/vue/dist/vue.cjs.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        //1、vue声明式渲染
        let vm = new Vue({
            el: "#app", //绑定元素
            data: {     //封装数据
                name: "张三",   
                num: 1
            },
            methods: {  //封装方法
                cancle() {
                    this.num--;
                },
                hello(){

                }
            }
        });
        //2、双向绑定，模型变化，视图变化。反之亦然

        //3、事件处理

        //v-xx:指令
        //1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。
    </script>
</body>

插件安装

VScode

Vetur

Vue2 Snippets

Chrome

Vue-Devtools

5、指令

1）插值表达式

1.1花括号

1.2插值闪烁

使用{{}}方式在网速较慢时会出现问题，在数据未加载完成时，页面会显示出原始的`{{}}`,加载完毕后才显示正确的数据，我们称为插值闪烁

1） v-text和v-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>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}{{1+1}}{{hello()}}<br />
        <span v-html="msg"></span>
        <br />
        <span v-text="msg"></span>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "<h1>Hello</h1>"
            },
            methods: {
                hello() {
                    return "World"
                }
            }
        })
    </script>
</body>

</html>

2）v-bind

<!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>Document</title>
</head>

<body>
    <!-- 给html标签的属性绑定 -->
    <div id="app">
        <a v-bind:href="link">gogogo</a>

        <!-- class,style calss名：加上？-->
        <span v-bind:class="{active:isActive,'text-danger':hasError}"
            v-bind:style="{color: color1,fontSize: size}">你好</span>
        <span :class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color1: 'green',
                size: '36px'

            }
        })
    </script>
</body>

</html>

3）v-model

<!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>Document</title>
</head>

<body>
    <!-- 表单项 自定义组件-->
    <div id="app">
        精通的语言：
        <input type="checkbox" v-model="language" value="Java">java<br />
        <input type="checkbox" v-model="language" value="PHP">java<br />
        <input type="checkbox" v-model="language" value="Python">java<br />
        选中了{{language.join(",")}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                language: []
            }
        })
    </script>
</body>

</html>

4） v-on

基本用法：

事件修饰符：

在事件处理程序中调用`event.preventDefault()`或`event.stopPropagation()`是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。

为了解决这个问题，Vue.js为`v-on`提供了事件修饰符。修饰符是由点开点的指令后缀来表示的。

`.stop`:阻止事件冒泡到父元素

`.prevent`：阻止默认事件发生

`.capture`：使用事件捕获模式

`.self`：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

`.once`：只执行一次

<!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>Document</title>
</head>

<body>
    <div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!-- 事件指定一个回调函数，必须是Vue实例中定义的函数 -->
        <button v-on:click="cancle">取消</button>
        <!--  -->
        <h1>有{{num}}个赞</h1>

        <!-- 事件修饰符 -->
        <div style="border: 1px solid red;padding:20px;" v-on:click="hello">
            大div
            <div style="border: 1px solid blue;padding: 20px" @click.stop="hello">
                小div<br />
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>

        <!-- 按键修饰符： -->
        <input type="text" v-model="num" v-on:keyup.down="num-=2" v-on:keyup.up="num+=2" @click.ctrl="num=10"><br />

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                cancle() {
                    this.num--
                },
                hello() {
                    alert("点击 了");
                }
            }
        })
    </script>


</body>

</html>

5）v-for

<!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>Document</title>
</head>

<body>

    <div id="app">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender == '女'">
                当前索引{{index}}=====>
                {{user.name}} ===> {{user.gender}} ====> {{user.age}}<br />
                对象信息：
                <span v-for="(v,k,index) in user">|||||{{v}}===key={{k}}=====index={{index}}</span>

                <!-- 1、显示user信息： v-for="item in items" -->
                <!-- 2、获取数组下标: v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                        v-for="value in object"
                        v-for="(value,key)" in object
                        v-for="(value,key,index) in object"
                -->
                <!-- 4、遍历时加上:key来区分不同数据，提高vue渲染效率 -->
            </li>

            <ul>
                <li v-for="(num,index) in nums" :key="index">{{num}}</li>
            </ul>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '张三', gender: '男', age: 21 },
                { name: '李四', gender: '女', age: 22 },
                { name: '王五', gender: '男', age: 23 },
                { name: '赵六', gender: '女', age: 24 },
                ],
                nums: [1, 2, 3, 4, 4]
            }
        })
    </script>

</body>

</html>

6）v-if和v-show

<!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>Document</title>
</head>

<body>
    <!-- 
        v-if,顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染
        v-show,当得到的结果为true，所在的元素才会被显示
     -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我。。。</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>

</html>

7）v-else和v-else-if

<!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>Document</title>
</head>

<body>

    <div id="app">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{{random}}</span>
        <h1 v-if="random >= 0.75">
            看到我了？！&gt;=0.75
        </h1>
        <h1 v-else-if="random >= 0.5">
            看到我了？！&gt;=0.5
        </h1>
        <h1 v-else-if="random >= 0.2">
            看到我了？！&gt;=0.2
        </h1>
        <h1 v-else>
            看到我了？！&gt;0.2
        </h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
        let app = new Vue({
            el: "#app",
            data: { random: 0.3 }

        })
    </script>

</body>

</html>

6、计算属性和侦听器

1)计算属性和侦听器

<!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>Document</title>
</head>

<body>
    <div id="app">
        <!-- 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性来完成 -->
        <ul>
            <li>西游记；价格：{{xyjPrice}}，数量：<input type="number" v-model="xyjNum"></li>
            <li>水浒传；价格：{{shzPrice}}，数量：<input type="number" v-model="shzNum"></li>
            <li>总价：{{totalPrice}}</li>
        </ul>
        {{msg}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script>
        // watch可以让我们监控一个值的变化 ，从而做出相应的反应
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98,
                shzPrice: 98.00,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice() {
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
                }
            },
            watch: {
                xyjNum: function (newVal, oldVal) {
                    //alert("newVal" + newVal + "====>oldVal" + oldVal)
                    if (newVal >= 3) {
                        this.msg = "库存超出限制",
                            this.xyjNum = 3
                    } else {
                        this.msg = ""
                    }
                }
            }
        })
    </script>
</body>

</html>

2)过滤器

<!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>Document</title>
</head>

<body>
    <!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和v-bind表达式 -->
    <div id="app">
        <ul>
            <li v-for="user in userList">
                {{user.id}} ==> {{user.name}}==>{{user.gender == 1 ? "男":"女"}} ===> {{user.gender | genderFilter}}
                ====> {{user.gender | genderFilter}}====> {{user.gender | gFilter}}
            </li>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>

        Vue.filter("gFilter", function (val) {
            if (val == 1) {
                return "男~~~";
            } else {
                return "女~~~";
            }
        })
        let vm = new Vue({
            el: "#app",
            data: {
                userList: [
                    { id: 1, name: 'jacky', gender: 1 },
                    { id: 2, name: 'peter', gender: 0 }
                ]
            },
            filters: {
                genderFilter(val) {
                    if (val == 1) {
                        return "男";
                    } else {
                        return "女";
                    }
                }
            }
        })
    </script>
</body>

</html>

7、组件化

在vue里，所有实例都是组件

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等

不同的是组件不会与页面的元素绑定，否则就无法利用了，因此没有el属性

但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板

全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了

data必须是一个函数，不再是一个对象

1）全局组件

2)组件的利用

3）局部组件

<!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>Document</title>
</head>

<body>
    <div id="app">
        <button @click="count++">我被点击了{{count}}次</button>

        <counter></counter>
        <counter></counter>
        <counter></counter>

        <br />
        <button-counter></button-counter>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        //1、全局声明注册一个组件
        Vue.component("counter", {
            template: `<button @click="count++">我被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        });
        //2、局部声明一个组件
        const buttonCounter = {
            template: `<button @click="count++">我被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        };
        new Vue({
            el: "#app",
            data: {
                count: 1
            },
            components: {
                'button-counter': buttonCounter
            }
        })
    </script>
</body>

</html>

8、生命周期构子函数

1、生命周期

每个Vue实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期

<!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>Document</title>
</head>

<body>
    <div id="app">
        <span id="num">{{num}}</span>
        <button @click="num++">赞！</button>
        <h2>{{name}},有{{num}}个人点赞</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                name: "张三",
                num: 100
            },
            methods: {
                show() {
                    return this.name;
                },
                add() {
                    this.num++;
                }
            },
            beforeCreate() {
                console.log("===============beforeCreate创建前===============");
                console.log("数据模型未加载：" + this.name, this.num);
                console.log("方法未加载：" + this.show());
                console.log("html模型未加载：" + document.getElementById("num"));
            },
            created: function () {
                console.log("===============created创建===============");
                console.log("数据模型已加载：" + this.name, this.num);
                console.log("方法已加载：" + this.show());
                console.log("html模型已加载：" + document.getElementById("num"));
                console.log("html模型未渲染：" + document.getElementById("num").innerText);
            },
            beforeMount() {
                console.log("===============beforeMount挂载前===============");
                console.log("html模板未渲染：" + document.getElementById("num").innerText);
            },
            mounted() {
                console.log("===============mounted挂载===============");
                console.log("html模板已渲染：" + document.getElementById("num".innerText))
            },
            beforeUpdate() {
                console.log("===============beforeUpdate更新前===============");
                console.log("数据模板已更新：" + this.num);
                console.log("html模板未更新：" + document.getElementById("num").innerText);
            },
            updated() {
                console.log("===============updated更新===============");
                console.log("数据模板已更新：" + this.num);
                console.log("html模板已更新：" + document.getElementById("num").innerText);
            }
        })
    </script>
</body>

</html>

9、vue模块化开发

1、全局安装

创建vue-demo文件夹，在文件夹下进入终端，输入

npm install sebpack -g

2、全局安装vue脚手架

npm install -g @vue/cli-init

3、初始化vue项目

vue init webpack appname:vue脚手架使用 webpack模板初始化一个appname项目

4、启动vue项目

在项目根目录下，终端输入npm run dev

components:组件存放目录

src:vue页面文件存放目录

router：路由文件存放目录

package.json 依赖

index.html：首页

router ----> App.vue 全局

router ----> main.js 导入组件的地方

了解使用组件，在components中创建一个Hello.vue组件，在router --> index.js中

导入组件 import Hello from '@/components/Hello'

添加路由在routes中添加

{

path: '/hello',

name: 'Hello',

component: Hello

}

在App.vue添加动态路由

<router-link to="/hello">去Hello</router-link>

<router-link to="/">去首页</router-link>

10、Element-ui快速上手

Vue整合element-ui

安装，在项目根目录下， npm i element-ui

完整引入，在main.js中添加

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

// 设备为全局

Vue.use(ElementUI);

测试：

在Hello.vue文件中添加

<el-radio v-model="radio" label="1">备选项</el-radio>

<el-radio v-model="radio" label="2">备选项</el-radio>

添加Container布局容器

在App.vue的代码中，在element-ui官网中找到Element-ui的Container的内容，然后复制粘贴到App.vue文件中

将选项一修改为用户列表，选项二修改为Hello

将<el-main>里的内容注释掉，添加<router-view></touter-view>

在components中创建MyTable.vue文件，然后输入vue回车

将上面注释掉的内容添加到MyTable.vue中

将vue.vue里的data数据添加到MyTable.vue中

在index.js中添加MyTable.vue导入信息并添加路径信息

这里有个坑，需要将MyTable的script的sass去掉

在Vue.vue里配置路由跳转

在el-menu里添加 router="true" ，将跳转模式切换成路由

在用户列表的Index的值修改为/table

在Hello列表的Index的值修改为/hello

小黄debug

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java前端 Vue2快速入门

1、MVVM思想M：即Model,模型，包括数据和一些基本操作V：即View，视图，页面渲染结果VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中，而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中而MVVM中的VM要做的事情就是把DOM操作完全封装起来
复制链接

扫一扫

专栏目录