vue增强_day02

标签: java  vue

1 vue重要指令

1.1 v-model

  1. 主要是用于完成双向的绑定
  2. 只能用于: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 事件绑定

  1. 事件绑定可以直接使用v-on <标签 v-on:事件名=方法名>
  2. 调用的方法可以不加()
  3. 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

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

  1. watch可以让我们监控一个值的变化。从而做出相应的反应。
  2. 比如咱们监听一个文本框中的变化,然后进行相应的高级查询(百度搜索)
<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 组件

  1. 自定义标签(重复代码的抽取)
  2. 组件分为全局组件与局部组件
  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 路由

  1. 路由是一个插件,需要单独引入
  2. 输入命令:npm install vue-router
  3. 引入js文件
<script src="node_modules/vue/dist/vue.js"></script>
<script src="node_modules/vue-router/dist/vue-router.js"></script>
  1. 准备链接
<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>
  1. 创建与路由绑定
<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 打包认识

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

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

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

6.2 vue_cli快速上手

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

7 切换npm的镜像

  1. 全局安装nrm: npm install nrm -g
  2. 查看镜像源 nrm ls
  3. 切换淘宝镜像源 nrm use taobao
版权声明:本文为Java_pipixia原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Java_pipixia/article/details/100044274

智能推荐

双路快速排序法

快速排序法的优化——双路快速排序 上一节我们自己动手写的一个快速排序的算法,在随机数测试中表现得非常好,然而,我们在用高度有序的数组进行测试的时候,发现快速排序的效率变得异常的低下,比归并排序的效率低得多了,近似退回了O(n^2)的复杂度,这是为什么呢?首先让我们来分析一下归并排序的算法思想,归并排序之所以能够达到O(logn)的复杂度,多亏了递归,递归使得把数组不断的二分...

android问题记录

Error: Cannot fit requested classes in a single dex file (# methods: 80441 > 65536) 解决办法: gradle文件的defaultConfig默认配置里面增加...

ROS机器人Diego 1# 利用人工智能 风格迁移技术拍摄不同画风的视频

风格迁移,就是将一种图片的风格迁移到其他图片上,改变其他图片的风格,很好玩的一个人工自能模型,github上已经有很多实现的方法,本文参考https://github.com/hzy46/fast-neural-style-tensorflow 的算法,利用Diego1#的平台实现实时视频的风格转换,先上两张图看效果: 是不是很酷呢,其实实现方法和上篇博文中的原理是一样的,只是把人工智能的算法包装...

猜你喜欢

数据分析学习总结笔记17:文本分析入门案例实战

文章目录 1 数据准备 2 分词 3 统计词频 4 词云 5 提取特征 6 用sklearn进行训练 1 数据准备 数据样例如下, 数据总量为7.7万+: 本节通过一个实战的例子来展示文本分析的最简单流程。首先设定因变量为原始数据中的"评分"。自变量是"评价内容",这里根据评价内容提取TF-IDF特征。之后,通过评价内容的特征建模预测下整体评分。 以上只是最...

LeetCode 150. 逆波兰表达式求值

题目描述 根据逆波兰表示法,求表达式的值。 有效的运算符包括 +, -, *, / 。每个运算对象可以是整数,也可以是另一个逆波兰表达式。 整数除法只保留整数部分。 给定逆波兰表达式总是有效的。 换句话说,表达式总会得出有效数值且不存在除数为 0 的情况。 示例 1: 输入:[“2”, “1”, “+”, “3&r...

并查集原理及应用

并查集 树形的数据结构,每个集合有其代表节点,代表节点相同的元素属于同一集合。 find:通过查找节点的代表节点,判断节点所属集合。 union:合并两集合,小集合合并到大集合,使用大集合的代表节点。 在find的递归过程中,让路过节点的父节点直接赋值为代表节点,节省下次查找时间,如图所示。 计算岛的个数 遍历二维数组,遇到1时就将所相连的1都改为2,看看遇到多少次1,就是岛的数量。改数时使用回溯...

linux nutch1.0安装配置

1,下载nutch1.0 下载地址:http://archive.apache.org/dist/nutch/,下载这个文件nutch-1.0.tar.gz   2,上传到服务器 上传位置:/home/www/,解压nutch-1.0.tar.gz #tar -xvf nutch-1.0.tar.gz 重命名 #mv nutch-1.0 nutch   3,修改配置文...

如何搭建自己的博客?附加美化

如何搭建自己的blog?附加美化 前言: 之前在腾讯云以学生优惠租了一年的服务器,还买了一年的域名,忽然觉得不能闲置着域名,所以搭建了个博客,过程也遇到了很多的问题,望在此阐述,予以他人帮助,祝好~ 准备工作:使用Xshell连接上Linux服务器,我的是centos系统,方便进行操作。使用Xftp连接上Linux服务器,方便传输文件。 安装apache服务器:yum install httpd ...