vue增强_day02

最新推荐文章于 2024-06-03 13:13:30 发布

虞铭轩、

最新推荐文章于 2024-06-03 13:13:30 发布

阅读量225

点赞数

分类专栏：学习文章标签： java vue

本文链接：https://blog.csdn.net/Java_pipixia/article/details/100044274

版权

学习专栏收录该内容

39 篇文章 0 订阅

订阅专栏

1 vue重要指令

1.1 v-model

主要是用于完成双向的绑定
只能用于:input,select,textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    用户名：<input type="text" v-model="usernameVal" />{{usernameVal}}<br/>
    爱好:
    <input type="checkbox" value="1" v-model="hobbyVal"> 吃饭
    <input type="checkbox" value="2" v-model="hobbyVal"> 睡觉
    <input type="checkbox" value="3" v-model="hobbyVal"> 打保罗
    {{hobbyVal}} <br />
    性别:
    <input type="radio" value="1" v-model="sexVal"> 男
    <input type="radio" value="2" v-model="sexVal"> 女
    {{sexVal}}
    <br />
    城市:<select v-model="cityVal">
    <option value="1">成都</option>
    <option value="2">绵阳</option>
    <option value="3">重庆</option>
</select>
    {{cityVal}} <br />
    简历:<textarea v-model="introVal"></textarea>
    {{introVal}} <br />
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            usernameVal:"皮皮虾",
            hobbyVal:[],
            sexVal:1,
            cityVal:2,
            introVal:"武功高强,徒弟厉害..."
        }
    })
</script>
</body>
</html>

在这里插入图片描述

1.2 v-show

v-show用于展示和隐藏 <标签 v-show=“true/false”>
①v-show=“true/false”
②true代表显示，false代表隐藏
show只是隐藏标签,if直接就不会出现不满足条件的标签

<body>
<div id="app">
    <input type="button" value="11111" onclick="shouyishou()" />
    <!--
        v-show="true/false"
        true代表显示，false代表隐藏
    -->
    <img src="img/5.jpg" v-show="isShow"/>
</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            isShow:true
        }
    });
    function shouyishou() {
        v.isShow = !v.isShow
    }
</script>
</body>

1.3 v-if

show只是隐藏标签,if直接就不会出现不满足条件的标签

<div id="app">
    <!--
        if：判断(如果不满足条件，这个元素不会出现在页面上)
    -->
    <div v-if="age>=80">
        皮皮虾你这是要成精了
    </div>
    <div v-else-if="age>=18 && age<80">
        皮皮虾你要被煮了
    </div>
    <div v-else>
        皮皮虾你还可以多活一会
    </div>
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            age:80
        }
    })
</script>

1.4 v-on 事件绑定

事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
调用的方法可以不加()
v-on有一种简写形式 <标签 @事件名=方法名>

<body>
<div id="app">
    <!--
        v-on：事件类型="方法名称"
    -->
    <input v-on:click="clickMe" type="button" value="点我啊" />
    <input v-on:click="clickMe()" type="button" value="点我啊" />
    <hr />
    <!--
        事件注册的简写形式
        @click:
    -->
    <input @click="clickMe()" type="button" value="点我啊" />
    <hr />
    <input @click="hello('哈不哈')" type="button" value="再来点啊" />
    <hr/>
    <button @click="age++">{{age}}</button>
</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            age:20
        },
        methods:{
            clickMe(){
                alert(1)
            },
            hello(msg){
                alert("哈麻皮" + msg)
            }
        }
    })
</script>
</body>

2 vue小功能

2.1 计算：computed

如果一个值需要大量计算展示，建议使用计算属性先计算完毕再直接使用
在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
计算属性本质就是方法，但是一定要返回数据。然后页面渲染时，可以把这个方法当成一个变量来使用。

<body>
<div id="app">
    {{formaDate }}
</div>
<script>
    var v = new Vue({
        el: "#app",
        //属性值  一般写死的  或者后台读取
        data: {
            bronDate:1566526686736
        },
        //计算属性
        computed:{
            //这里看起来是一个方法  用的时候当属性来使用
            formaDate(){
                let date = new Date(this.bronDate);
                return date.getFullYear()+ "-"+(date.getMonth()+1)+ "-"+date.getDate()
            }
        }
    })
</script>
</body>

2.2 watch监控属性

watch可以让我们监控一个值的变化。从而做出相应的反应。
比如咱们监听一个文本框中的变化，然后进行相应的高级查询(百度搜索)

<body>
<div id="app">
    <input type="text" v-model="msg" />
</div>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            msg:"皮皮虾"
        },
        watch:{
            //每次msg属性修改  都会执行这个方法
            /**
             *
             * @param newVal  修改后 新的属性
             * @param oldVal  修改前的属性  旧属性
             */
            msg(newVal,oldVal){
                console.log(newVal,oldVal)
            }
        }
    })
</script>
</body>

3 组件

自定义标签(重复代码的抽取)
组件分为全局组件与局部组件
组件的的template有且只能有一个标签

3.1 全局组件

<body>
<div id="app">
    <my-tag></my-tag>
</div>

<div id="app1">
    <my-tag></my-tag>
</div>

<script>
    //让vue注册一个组件
    /**
     * 全局组件  只要vue挂载的容器  都可以使用
     *
     * 第一个参数  组件的名称
     * 第二个参数  这个组件的具体的配置
     *      tpmplate:模板  （就是对应的html代码）
     *          模板中有一个要求  有且只有一个外部标签
     *          myTag:驼峰命名使用的时候  用 （my-tag）
     */
    Vue.component("myTag",{
        template:"<div><h1>皮皮虾好吃不</h1><h2>好吃啊</h2></div>"
    });
    new Vue({
        el: "#app",
    })
    new Vue({
        el: "#app1",
    })
</script>
</body>

3.2 抽一抽

以后我们看到很多别人的代码都是抽过后的效果

<body>
<div id="app">
    <mytag></mytag>
</div>

<script>
    //模板对应的值
    const tempStr = "<div><h1>皮皮虾好吃不</h1><h2>好吃啊</h2></div>";

    //定义一个常量  就是一个基本配置
    const componentConfig = {
        template:tempStr
    };

    //定义一个组件
    Vue.component("mytag",componentConfig);
    new Vue({
        el: "#app"
    })
</script>
</body>

3.3 局部组件

<body>
<div id="app">
    <mytag></mytag>
</div>

<div id="app1">
    <mytag></mytag>
</div>

<script>
    new Vue({
        el: "#app",
        components:{
            //mytag  就是组件的名称
            mytag:{
                template:"<h1>娃哈哈哈哈</h1>"
            }
        }
    })
    new Vue({
        el: "#app1",
    })
</script>
</body>

3.4 组件模块

3.4.1 template标签模板

<body>
<div id="app">
    <mytag></mytag>
</div>

<!--
    使用模板标签  里面的内容是不糊显示到页面的
    template 入股哦卸载挂载容器中 会显示出来一次
-->
<template id="myTemp">
    <form method="post">
        用户名：<input type="text" /><br>
        密码：<input type="password" /><br>
        <input type="button" value="登录" />
    </form>
</template>

<script>
    //定义一个常量  就是一个基本配置
    const componentConfig = {
        //直接引用模板数据
        template:"#myTemp"
    };

    //定义一个组件
    Vue.component("mytag",componentConfig);
    new Vue({
        el: "#app",
    })
</script>
</body>

3.4.2 script标签模板

<body>
<div id="app">
    <mytag></mytag>
</div>

<!--
    使用script标签  里面的内容是不糊显示到页面的
    type="text/template"  就知道里面的代码师模板
-->
<script type="text/template" id="myTemp">
    <form method="post">
        用户名：<input type="text" /><br>
        密码：<input type="password" /><br>
        <input type="button" value="登录" />
    </form>
</script>

<script>
    //定义一个常量  就是一个基本配置
    const componentConfig = {
        //直接引用模板数据
        template:"#myTemp"
    };

    //定义一个组件
    Vue.component("mytag",componentConfig);
    new Vue({
        el: "#app",
    })
</script>
</body>

3.4.3 其他

<body>
<div id="app">
    <mytag></mytag>
</div>

<!--
    使用script标签  里面的内容是不糊显示到页面的
    type="text/template"  就知道里面的代码师模板
-->
<template id="myTemp">
    <form method="post">
        {{usernameLable}}：<input type="text" /><br>
        {{passwordLable}}：<input type="password" /><br>
        <input type="button" @click="login" value="登录" />
    </form>
</template>

<script>
    //定义一个常量  就是一个基本配置
    const componentConfig = {
        //直接引用模板数据
        template:"#myTemp",
        //这个data应该是一个方法  返回相应的数据
        data(){
            return{
                usernameLable:"用户名",
                passwordLable:"密码"
            }
        },
        methods:{
            login(){
                alert(123)
            }
        }
    };

    //定义一个组件
    Vue.component("mytag",componentConfig);
    new Vue({
        el: "#app",
        data:{
            usernameLable:"用户名"
        }
    })
</script>
</body>

4 路由

路由是一个插件，需要单独引入
输入命令：npm install vue-router
引入js文件

<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>

准备链接

<div id="app">
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/chong">皮皮虫</router-link>

        <router-link to="/employee">皮皮虾</router-link>
        <router-link to="/department">皮皮怪</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

创建与路由绑定

<script>
    //创建一个路由对象
    let router = new VueRouter({
        routes:[
            //路由的地址对应相应的组件
            {
                path: '/chong',
                component: {
                    template: '<div>不好吃</div>'
                }
            },
            {
                path: '/employee',
                component: {
                    template: '<div>炸着吃</div>'
                }
            },
            {
                path: '/department',
                component: {
                    template: '<div>煮着吃</div>'
                }
            }
        ]
    });

    new Vue({
        el:"#app",
        //绑定相应的路由
        router:router
    })
</script>

5 webpack打包

5.1 打包认识

将许多碎小文件打包成一个整体，减少单页面内的衍生请求次数，提高网站效率。
将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
将代码打包的同时进行混淆，提高代码的安全性。

5.2 webpack认识

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。接下来我们简单为大家介绍 Webpack 的安装与使用

在这里插入图片描述

5.3 安装webpack

本地安装：

npm install webpack --save-dev
npm install webpack-cli --save-dev

全局安装：

由于网络问题，安装的时间可能会比较长，甚至会失败，可以多试几次

npm install -g webpack
npm install -g webpack-cli

初始化项目

进入webpacktest中
输入命令 npm init -y

打包命令

输入打包命令 webpack js/a.js -o dist/bundle.js

webpack.config.js，该文件与项目根处于同级目录

//提供好的一个模块，不用管它，这里要求必需使用这个模块
var path = require("path");
//
module.exports = {
    entry: './src/main.js',
    output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
    }
}

CSS加载

加载器安装
npm install style-loader --save-dev
npm install css-loader --save-dev
webpack.config.js

var path = require("path");
//对于模块的一个输出
module.exports = {
   ...
    //配置对应的打包器
    module: {
        rules: [
            //配置的是css的支持，style:样式解析器  css:样式加载器
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }
        ]
    }
}

6 vue_cli(脚手架)

6.1 为什么要使用vue_cli

在开发中，需要打包的文件很多(html,css,js,图片,…)
vue提供脚手架快速搭建web工程模板
全局安排命令(以后很多项目都会使用)：npm install -g vue-cli

6.2 vue_cli快速上手

新建模块
进入目录
创建webpack项目
①命令: vue init webpack : 初始化
②命令: npm run dev: 直接运行
npm run build打包可以在服务器运行
错误解决
①把项目中的node_modules删除掉
②everythink中找到vue-cli找到，然后删除
③如果还不行，直接拷备其它人的node_modules过来使用