Vue第二天

最新推荐文章于 2024-02-19 17:26:10 发布
最新推荐文章于 2024-02-19 17:26:10 发布
阅读量188 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46091684/article/details/103767820
版权

1.绑定事件指令 v-on

<button v-on:click="num++">+1</button>
<button @click="num++">+1</button>
<button @click="countSum()">+1</button>
<button @click="countSum">+1</button>

<button @click="say('傻逼')">快点我</button>

<script>
    new Vue({
        el:"#app",
        data:{
            num:0
        },
        methods:{
            countSum(){
                this.num = this.num + 1
            },
            say(msg){
                console.log(msg);
            }
        }
    })
</script>

2 计算属性

作用:可以代替的复杂的表达式

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="av">
        {{new Date(birthday).getFullYear()+"年"+new Date(birthday).getMonth()+"月"+new Date(birthday).getDate()+"日"}}
        {{birthday1}}
        {{getBirthday()}}
    </div>
    <script>
        new Vue({
            el:"#av",
            data:{
                num:0,
                birthday:1546272000
            },
            methods:{
                getBirthday(){
                    return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月"+new Date(this.birthday).getDate()+"日";
                }
            },
            computed:{
                birthday1(){
                    return new Date(this.birthday).getFullYear()+"年"+new Date(this.birthday).getMonth()+"月"+new Date(this.birthday).getDate()+"日";
                }
            }
        })
    </script>
</body>
</html>

3 watch

<body>
<div id="app">
    <input type="text" v-model="msg"/>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
           msg:''
        },
        methods:{

        },
        watch:{
            msg(newVal,oldVal){
                //可以获取上次改变的值-- 记录日志 
                console.log(newVal,oldVal);
                
            }
        }
    })
</script>
</body>

4 Vue 组件

(1)以前组件: Component --easyui 组件 datagrid tabs menu…panel,dialog

Vue组件: 自定义的代码块或者自定义标签

(2)组件有什么用:

​ (1)可以反复使用

​ (2)完成一些功能

(3)vue里面组件分类

​ 全局组件:任意地方都可以使用,任意挂载的标签都使用

​ 局部组件:只能在当前的挂载的标签里面的使用

vue组件是vue里面比较重要知识点

(1) 全局组件

<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<script>
    //全局组件
    Vue.component("mycomponet1",{
        template:"<h1>1111111</h1>"
    });

    var mycomponet2={
        template:"<h1>22222222</h1>"
    }
    Vue.component("mycomponet2",mycomponet2);


    new Vue({
        el:"#app1"
    });

    new Vue({
        el:"#app2"
    });
</script>
</body>

(2)局部组件

<body>
<div id="app1">
    <mycomponet1></mycomponet1>
    <mycomponet2></mycomponet2>
</div>
<div id="app2">
    <mycomponet1></mycomponet1>
</div>
<script>



    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>这是一个局部的组件1</h2>"
            },
            "mycomponet2":{
                template:"<h2>这是一个局部的组件2</h2>"
            }
        }
    });

    new Vue({
        el:"#app2"
    });
</script>
</body>

(3)组件里面模板写法

<body>
<div id="app1">
    <mycomponet1></mycomponet1>

</div>
<!--<template id="mytemplate">
    <h3>这是一个template写法1</h3>
</template>-->
<script type="text/template" id="mytemplate">
    <h1>template标签中的html</h1>
</script>
<script>


    // 写法一:直接template写字符串
  /*  new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"<h2>这是一个局部的组件</h2>"
            }
        }
    });*/
    //写法二:
    new Vue({
        el:"#app1",
        components:{
            "mycomponet1":{
                template:"#mytemplate"
            }
        }
    });


</script>

(4) 模板里面的数据必须函数

<div id="app1">
    <mycomponet1></mycomponet1>
    {{name}}

</div>
<template id="mytemplate">
    <form>
        {{name}}<input type="text" />
    </form>
</template>



<script>

    new Vue({
        el:"#app1",
        data:{
          "name":"用户名1111"
        },
        components:{
            "mycomponet1":{
                template:"#mytemplate",
                data:function(){
                    return {
                        "name":"用户名"
                    }
                }
            }
        }
    });


</script>
</body>
</html>

5 路由

路由器: 很多接口,通过接口 找到一台电脑

vue路由: 定位到一个组件 类似于

在这里插入图片描述

(1)路由使用

(1)安装 路由

​ npm install vue-router

​ npm uninstall vue-router

(2)在页面引用vue-router.js文件

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

(3)使用

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="av">
        <!--相当于a标签 long 龙哥的组件-->
        <router-link to="/">首页</router-link>
        <router-link to="/leng">冷场</router-link>
        <router-link to="/xiao">笑场</router-link>
        <router-link to="/zhinan">宇宙超度指南</router-link>
        <!-- 路由出口-->
        <router-view></router-view>
    </div>
    <script>
        //定义组件
        var index = Vue.component("index",{
            template:"<h1>李0</h1>"
        });
        var xiaoC = Vue.component("leng",{
            template:"<h2>再错的事情人都能为自己找到借口,我们靠此苟活。</h2>"
        });

        var lengC = Vue.component("xiao",{
            template:"<h2>小北，他们有好多关于爱的道理。我有你。</h2>"
        });

        var zhinan = Vue.component("jinbo",{
            template:"<h2>他们的飞船，叫奈何船，他们的顾客，称他们为度魂僧。这是一本宇宙超度指南。</h2>"
        })
        //创建一个路由
        var routes1 =  new VueRouter({
            routes:[{
                path:"/",
                component:index
            },{
                path:"/leng",
                component:lengC
            },{
                path:"/xiao",
                component:xiaoC
            },{
                path:"/zhinan",
                component:zhinan
            }]
        });
        //把路由挂载到vue对象上面去
        new Vue({
            el:"#av",
            data:{
                "name":"用户名"
            },
            router:routes1
        });
    </script>
</body>
</html>

6 webpack 打包

把项目里面内容(js,css,img等)这些资料进行打包

(1) 为什么需要打包 -->项目开发完之后

(1)减少单页面内的衍生请求次数，提高网站效率

(2) 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。

​ 导入 导出

(3)可以进行代码混淆 提高安全性

(2) webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分

析，然后将这些模块按照指定的规则生成对应的静态资源。

(3) 使用webpack --打包js文件

(1)下载安装

​ npm install -g webpack

​ npm install -g webpack-cli

(2)创建两个js文件

​ a.js

var a = "a模块";
var b = require('./b.js');

console.log(a);
console.log(b);

b.js

define(function () {
    var b = "b模块";
    return b;
});

执行命令:

​ webpack src/a.js -o dist/bundle.js

(4) css打包

步骤一：

npm install style-loader --save-dev

npm install css-loader --save-dev

步骤二：

a. js引入:

*var* a = “a模块”;
*var* b = require(’./b.js’);

console.log(b);

require(’…/css/index.css’)

步骤三：在webpack.config.js文件引入下面代码

*var* path = require(“path”);
module.exports = {
entry: ‘./web/js/a.js’,
output: {
path: path.resolve(__dirname, ‘./dist’),
filename: ‘bundle.js’
},
module: {
rules: [
{
test: /.css$/, //匹配文件规则
use: [‘style-loader’, ‘css-loader’] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
},
]
}
}

步骤四：打包：webpack

(5) 部署

把前端内容放入服务里面运行

(1)安装

	npm install webpack-dev-server --save-dev

(2)package.json配置

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
  }
 版本兼容性:
 	 "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"

(3)运行 npm run dev命令 启动服务

​ ctrl+c —>y 停止服务

7 Vue的脚手架

Vue脚手架 --就是前端项目的模板(已经就有一些内容)

使用脚手架

(1) 安装脚手架

npm install -g vue-cli

(2)创建一个项目

(3)执行 vue init webpack

​ 询问创建项目 yes

​ 询问vue-router yes

​ … no

​

(4)运行命令

​ npm run dev

早春一去又如何
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue第二天的自白
东方佑
01-04 2万+
生命周期 Vue.js - Day2 品牌管理案例 添加新品牌 删除品牌 根据条件筛选品牌 1.x 版本中的filterBy指令，在2.x中已经被废除： filterBy - 指令 <tr v-for="item in list | filterBy searchName in 'name'"> <td>{{item.id}}</td> &l...
Vue第二天（语法）
若叶知秋的博客
11-12 350
准备步骤如之前第一天相同。 代码：（测试注意事项：js中的代码依次开启测试，不可全部开启，会报错） &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &am
Vue 第二天
热门推荐
越是憧憬，越要风雨兼程
10-10 1万+
Vue 第二天 第一天的时候学了简单的环境搭建和Vue项目的创建，今天先复习一下Vue项目的创建，多练习，才能理解的更透彻。 Vue项目搭建： 在硬盘上找到一个合适的文件夹放工程，比如：E:\vueDemo，和昨天搭建的第一个Vue项目放在了同一级目录下，执行命令： vue init webpack secondvue 初始化一些设置后，此处省略… 安装项目依赖： npm...
Vue-第二天 Vue基础入门
qq_41050821的博客
03-15 769
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页。在传统的 Web 前端开发中，是基于jQuery + 模板引擎 的方式来构建用户界面的。使用 vue 构建用户界面，解决了 jQuery + 模板引擎 的诸多痛点，极大的提高了前端开发的效率和体验。官方给 vue 的定位是前端框架，因为它提供了构建用户界面的一整套解决方案（俗称 vue 全家桶）：以及辅助 vue 项
vue项目第二天
m0_74331185的博客
02-10 2957
抽离文件中按需使用element ui （在components下创建一个element文件夹，在文件夹创建index.js文件,elementui按需使用都在这写↓）用户登录系统之后，在进入系统之前在守卫中获取系统菜单数据 进行动态路由的添加（在router下的index.js文件中）在axios请求拦截器中设置添加token令牌认证接口（在router下的requset.js文件中），在守卫中对应的位置执行ajax获取菜单数据（在router下的index.js文件中）admin.vue中的代码↓。
Vue高级第二天
caozhisanguo的专栏
01-11 2278
今日内容 Vue自定义组件 Vue声明周期 异步请求 ElementUI 案例 1、Vue 高级使用 1.1、自定义组件 学完了 Element 组件后，我们会发现组件其实就是自定义的标签。例如 就是对的封装。 本质上，组件是带有一个名字且可复用的 Vue 实例，我们完全可以自己定义。 定义格式 Vue.component(组件名称, { props:组件的属性, data: 组件的数据函数, template: 组件解析的标签模板 }) 代码实现 <!DOCTYPE ht
学习VUE3.0第二天
KevinLoveJava
04-10 1504
VUE3.0学习笔记 开始学习时间:2022-04-09 引入VUE的CSDN<script src="https://unpkg.com/vue@next"></script> Vue官网:https://v3.cn.vuejs.org/ 一、VUE语法初探-开始学习时间:2022-04-09 1.1 单页面基本使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
Vue第二天学习笔记（后端适用）
GoodBoyKaiii的博客
08-01 921
Vue 1. v-for v-for：用来对对象进行遍历的（数组也是对象的一种）。 遍历对象： <div id="app"> <span>{{ user.name }} {{ user.age }}</span> <br> <!--通过v-for遍历对象--> <span v-for="u in user"> {{ u }} </span> <br
学习Vue3的第二天
m0_74293254的博客
02-19 1198
2、语法： 使用 let 响应式对象 = reactive(源对象) 来创建一个响应式对象，其中 响应式对象 是你想要创建的响应式对象的变量名，源对象 是你想要转换为响应式对象的普通 JavaScript 对象。监视 ref 定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视（deep: true）。结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视（deep: true）。
vue 获取当前日期的第二天
M_SSY的博客
01-22 5772
&lt;span v-text="timeNow"&gt;&lt;/span&gt; data里面: timeNow:'' mounted里面: mounted:function(){ var myDate = new Date(); myDate.setDate(myDate.getDate() + 1); console.log(myDate.toLo...
vue第二天.xmind
05-21
vue第二天.xmind
Vue第二天学习笔记.txt
09-07
v-if,v-show和v-for指令以及TodoList所有功能开发，包含子组件与父组件之间的相互通信接管。
28课 Vue项目第二天.rar
09-13
在本课程中，我们将深入探讨Vue.js框架的项目开发，主要关注的是第二天的学习内容。Vue.js是一个轻量级、高性能的前端JavaScript框架，用于构建用户界面。它以其易学易用、灵活和可扩展性而受到开发者的广泛欢迎。在...
Vue.js第二天学习笔记（vue-router）
10-20
### Vue.js第二天学习笔记（vue-router） #### Vue-router的配置和使用 1. **安装和初始化** 在开始使用vue-router之前，首先需要通过npm安装vue-router包。这通常在项目的根目录下进行，使用命令`npm install ...
RK3576-Hardware-Design-Guide
08-21
包含datasheet
273教学质量评价系统.zip
08-21
摘 要 随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，教学质量评价系统当然也不能排除在外。教学质量评价系统是以实际运用为开发背景，运用软件工程开发方法，采用jsp技术构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统总体结构设计、系统数据结构设计、系统功能设计和系统安全设计等；详细设计主要包括模块实现的关键代码，系统数据库访问和主要功能模块的具体实现等。最后对系统进行功能测试，并对测试结果进行分析总结，及时改进系统中存在的不足，为以后的系统维护提供了方便，也为今后开发类似系统提供了借鉴和帮助。 本教学质量评价系统采用的数据库是Mysql，使用JSP技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
基于Android手机点餐系统APP设计与实现.docx
08-21
基于Android手机点餐系统APP设计与实现
全国自学考试计算机网络管理试题.pdf
最新发布
08-21
浙江省的全国自学考试计算机网络管理试题，总共38道题，包含单选，填空，多选等等。
java资源开源事务管理器JOTMjava资源开源事务管理器JOTM
08-21
java资源开源事务管理器 JOTMjava资源开源事务管理器 JOTM提取方式是百度网盘分享地址
深入理解Vue：指令进阶
Vue 指令第二天 Vue.js 是一个流行的前端框架，其核心特性之一就是它的指令系统。指令是 Vue 提供的特殊属性，用于增强 HTML 元素。本文将深入讲解 Vue 指令的第二天学习内容，包括 `v-bind`、class 和 style 绑定...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值