学习VUE-day2

最新推荐文章于 2024-06-27 22:20:15 发布
最新推荐文章于 2024-06-27 22:20:15 发布
阅读量131 收藏
点赞数
分类专栏： vue 框架篇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a462772398/article/details/103780097
版权

文章目录

一.组件

组件 (Component) 是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码

  • 一句话总结组件： 组件就是自定义标签，它内部存储了很多html代码

1.1 组件的注意事项

  • 先创建组件再进行挂载
  • 组件的template有且只有一个外部标签
  • 组件取名如果是驼峰命名,使用-表示 例: <myComponent> <my-component>建议使用小写命名

1.2 全局组件(所有被挂载的地方都可以使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>
</body>
<script type="text/javascript">
    /*
    * 全局组件(所有被挂载的位置都可以使用)
    * 组件注意事项:
    *   1.有且只有一个外部标签
    *   2.取名如果使用驼峰命名 -> 标签名称就要变成 my-tag {建议使用小写}
    *   3.组件必需在挂载之前先声明
    * */
    Vue.component("mycomponent",{
        template:"<div><h1>全局组件</h1><h2 style='color: red'>都是全局组件</h2></div>"
    })

    new Vue({
        el:"#app"
    })

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

1.3 局部组件(只有当前挂载的元素可以使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        //这是一个局部组件
        components:{
            //组件名
            mycomponent:{
                //相应的模板
                template: "<div><h1>局部组件</h1></div>"
            }
        }
    })
    new Vue({
        el:"#app2"
    })
</script>
</html>

在这里插入图片描述

1.4 组件模板

1.4.1 两种创建模板的方式

  • 直接使用template标签

特别注意：在模板中获取数据必需是一个函数返回

<body>
<div id="app">
    <!--如果template标签放到这里面，它默认就会使直接使用起来 -->
    <mytag></mytag>
</div>

<!--直接添加一个组件标签  template里面的内容是不会显示出来的-->
<template id="mytemp">
    <form method="post" action="">
        用户:<input type="text" name="username"> <br />
        密码:<input type="password" name="password"><br />
        <button type="button" @click="say">{{msg}}</button>
    </form>
</template>
</body>
<script type="text/javascript">
    Vue.component("mytag",{
        //这里直接引入tempate标签中的内容
        template:"#mytemp",
        //这里的数据需要写一个函数，进行返回
        data(){
            return {
                msg:"...登陆..."
            }
        },
        //这里定义模板的方法
        methods:{
            say(){
                alert("登陆成功");
            }
        }
    })

    new Vue({
        //挂载
        el:"#app",
        //数据
        data:{
            msg:"hello"
        }
    })
</script>
  • 使用script标签

注意:必需加一个 type="text/template"

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

<!--直接添加一个组件标签  template里面的内容是不会显示出来的-->
<script id="myjstemp" type="text/template">
    <form method="post" action="">
        用户:<input type="text" name="username"> <br />
        密码:<input type="password" name="password"><br />
        <input type="button" value="登录" />
    </form>
</script>
</body>
<script type="text/javascript">
    Vue.component("mytag",{
        //这里直接引入script标签中的内容
        template:"#myjstemp"
    })

    new Vue({
        //挂载
        el:"#app",
        //数据
        data:{
            msg:"hello"
        }
    })
</script>

1.4.2 获取动态元素

组件要获取动态元素，它不是找的vue中的data属性，
而是找template中的data属性
模板中data对应的值，必须是一个函数
并且在函数内部返回的值必须是json对象

<body>
<div id="app">
    <mycomponent></mycomponent>
</div>
<!--
    注意：如果组件要获取动态元素，它不是找的vue中的data属性，而是找template中的data属性
    模板中data对应的值，必须是一个函数   并且在函数内部返回的值必须是json对象
-->
<template id="mytemplate">
    <h1>欢迎{{username}}登录系统&emsp;年龄:{{age}}</h1>
</template>
</body>
<script type="text/javascript">
    //创建全局组件使用一个变量接受
    Vue.component("mycomponent", {
        template: "#mytemplate",
        data:function(){
            return {
                username:"管理员",
                age:18
            }
        }
    });
    //它不会找的vue中的data属性
    new Vue({
        el:"#app",
        data:{
            username:"admin"
        }
    })
</script>

三.Vue路由

路由是Vuejs中一个重要的插件
如果要使用路由功能需要引入路由的js代码
路由主要是为了构建单页面而存在的
现在有些网站就是使用路由方式完成的(比如:网易云音乐)

路由代码的步骤

  1. 引入js(vue的js与路由的js)
<!--vue js-->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
<!--路由 js-->
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.min.js"></script>
  1. 准备路由的导航组件 router-link
  2. 准备路由出口(最后数据展示的位置) router-view
  3. 定义路由对与对应的组件
  4. 进行路径的挂载
<body>
<div id="app">
    <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. 意思是你要跳转到什么地方 -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/index">首页</router-link>
        <router-link to="/employee">员工</router-link>
        <router-link to="/department">员工</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

</div>
</body>
<script type="text/javascript">
    // 1. 定义 (路由) 组件。
    // 可以从其他文件 import 进来
    let INDEX = Vue.component("index", {
        template: "<h1>首页</h1>"
    });
    let EMPLOYEE =Vue.component("employee", {
        template: "<h1>员工</h1>"
    });
    let DEPARTMENT = Vue.component("department", {
        template: "<h1>部门</h1>"
    });
    // 2. 定义路由
    //path:这个路由的路径,这个路径和<router-link> to属性中的路径对应上
    let router = new VueRouter({
        routes:[
            /*路径映射到组件*/
            {path:"/index",component:INDEX},
            {path:"/employee",component:EMPLOYEE},
            {path:"/department",component:DEPARTMENT}
        ]
    })

    var app = new Vue({
        el:"#app",
        //告诉vue我要使用路由
        router  //router:router
    })
</script>

四.生命周期钩子

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

<body>
<div id="app">

</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            msg:"你好"
        },
        methods:{
            sayHello(){
                alert("你好呀！")
            }
        },
        //方法和数据已经初始化完毕，在created中可以调用data和methods中的内容
        created(){
            alert("created"+this.msg)
            this.msg = "被修改了"
        },
        //挂载完毕
        mounted(){
            //整个vue初始化完毕
            // 加载列表  渲染
            // ajax请求发送到后台
            alert("mounted"+this.msg)
        }

    })
</script>

五.计算属性和watch

5.1 计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。
但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便

  • 例如下面的场景，我们有一个日期的数据，但是是毫秒值：
data:{
	birthday:1529032123201 // 毫秒值
}
  • 方案1:我们在页面渲染，希望得到yyyy-MM-dd的样式：
  • 虽然能得到结果，但是非常麻烦。
<div id="app">
    <h1>您的生日是：{{
           new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
           }}
    </h1>
</div>
  • 方案2:Vue中提供了计算属性，来替代复杂的表达式：
<body>
<div id="app">
    <!--计算属性-->
    <h1 style="color: red">您的生日是：{{birth}} </h1>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            birthday:1529032123201 // 毫秒值
        },
        computed:{
            birth(){// 计算属性本质是一个方法，但是必须返回结果
                const d = new Date(this.birthday);
                return d.getFullYear() + "-" + d.getMonth() + "-" + d.getDay();
            }
        }
    })
</script>

5.2 watch

watch可以让我们监控一个值的变化。从而做出相应的反应。

<body>
<div id="app">
    <input type="text" v-model="msg">
</div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data: {
            msg:""
        },
        watch:{
            msg(newVal, oldVal){
                console.log(newVal, oldVal);
            }
        }
    })
</script>

六.Webpack打包

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

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

6.1 使用

6.1.1 安装

  • 本地安装：
    npm install webpack --save-dev
    npm install webpack-cli --save-dev

  • 全局安装：–推荐使用
    npm install -g webpack (服务)
    npm install -g webpack-cli(客户端)

6.1.2 简单使用

  • Js打包-入门

a.js

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

b.js

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

—amd 模式可以 但是commonjs必须在nodejs环境，浏览器环境不ok
打包：webpack src/a.js -o dist/bundle.js

Index.html

<script src="dist/bundle.js"></script>
  • Js打包-配置文件

上面我们每次在打包的时候，都要输入 webpack src/a.js -o dist/bundle.js
这个命令，比较麻烦，所以我们可以按照下面的方式，新建一个js文件，到时候打包的时候，只需要运行webpack 命令就可以进行打包

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

var path = require("path");
module.exports = {
	entry: './src/main.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: 'bundle.js'
	}
}

6.2 Css加载

6.2.1 加载器

webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js来很简单地编写自己的 loader。

loader 通过在 require() 语句中使用 loadername! 前缀来激活，或者通过 webpack 配置中的正则表达式来自动应用

  • vue-loader 转换vue组件 *.vue
  • css-loader 加载css文件
  • babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

6.2.2 实现

在这里插入图片描述

  • 步骤一：
    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

6.3 热更新web服务器

刚才的案例中,我们都是本地运行。webpack给我们提供了一个插件，可以帮我们运行一个web服务；

  • 安装插件：npm install webpack-dev-server --save-dev
  • 添加启动脚本 :
    在package.json中配置script
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config ./webpack.conf.js",      },

--inline：自动刷新
--hot：热加载
--port：指定端口
--open：自动在默认浏览器打开
--host：可以指定服务器的 ip，不指定则为127.0.0.1

npm run dev/test
出现错误之后

https://www.cnblogs.com/gqx-html/p/10756388.html
https://www.cnblogs.com/laraLee/p/9174383.html

"devDependencies": {
  "css-loader": "^3.1.0",
  "style-loader": "^0.23.1",
  "webpack": "^3.10.0",
  "webpack-dev-server": "^2.9.7"
},

在执行 npm install

七.Vue-cli 脚手架

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli
使用它能快速的构建一个web工程模板。
官网：https://github.com/vuejs/vue-cli
安装命令：npm install -g vue-cli

7.1 Vue-cli 快速上手

  • 新建一个项目
    在这里插入图片描述
  • 安装vue-cli
    在这里插入图片描述
  • vue-cli快速创建webpack项目
    在这里插入图片描述
  • 运行
    npm run dev
    npm run build打包可以在服务器运行在这里插入图片描述运行后 直接访问http://localhost:8080
    在这里插入图片描述
GxueR
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2-day3.zip
08-10
在"vue2-day3.zip"这个压缩包中，我们很可能看到的是关于Vue 2.x版本的第三天学习资料，这可能包括教程、代码示例或者项目实践等内容。Vue 2.x是Vue.js的一个重要版本，它引入了许多改进和优化，使得开发更加高效和...
vue2-day4.zip
08-10
在"vue2-day4.zip"这个压缩包中，我们可能涵盖了关于Vue 2的第四天学习内容，这通常会涉及到更深入的特性和应用实践。 在Vue 2中，核心概念包括组件化、数据绑定、指令、计算属性和侦听器等。组件是Vue的一个重要...
【Vue-day2】搭建Vue-cli的Demo
m0_57450589的博客
03-05 272
步骤一： 安装Node.js，下载地址：下载 | Node.js 中文网 下载后可以查看版本号 步骤二：
vue的学习--day2
m0_62263513的博客
06-27 724
vue的学习--day2
个人学习向:vue-element-admin_Day2
localdad的博客
12-19 75
个人学习，有问题请指正
Vue学习--Day2
xian的博客
02-05 117
Day2目录一、WebStorm安装教程二、Vue中的MVVM三、Vue插值语法1.Vue在WebStorm中模板建立2.Mustache 语法3.v-once指令4.v-html指令5.v-text指令6.v-pre指令7.v-cloak指令 一、WebStorm安装教程 <a>https://mp.weixin.qq.com/s/Y5-UE3zJByhf8okPiFvv2w</a> 二、Vue中的MVVM MVVM是Model-View-ViewModel的简写。它本质上.
Vue2学习 - Day1
qq_42909264的博客
11-04 114
Vue2学习 - Day1
Vue学习--Day5
xian的博客
02-08 132
Day5目录前言一、v-on 事件监听二、使用步骤1.引入库2.读入数据总结 前言 在前端开发中，我们需要经常和用户交互，这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等 在vue中使用v-on指令进行事件监听 一、v-on 事件监听 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import pandas as pd import matplotlib.p
超详细Vue-coderwhy个人学习笔记(一)（Day1-Day2）
热门推荐
coderYYY的博客
07-11 1万+
coderwhy vue2超详细笔记(一) 包括Day1-Day2内容，主要是Vue的介绍和基本语法(vue指令)
day6 vue 学习笔记 vue-router路由
weixin_51715424的博客
10-03 1868
vue 学习笔记 路由 vue-router
Vue学习--Day10
xian的博客
02-17 501
Day10目录前言一、注册组件的基本步骤二、全局组件和局部组件三、父组件与子组件四、注册组件语法糖五、组件模板抽离方法六、组件data必须是函数七、使用prop向子组件传递数据八、prop验证九、驼峰标识十、监听子组件事件(子传父) 前言 组件是Vue.js最核心的功能，在前端应用中可以采用模块化的开发，实现可重用、可扩展。 组件是带有名字的可复用的Vue实例，因此在根Vue实例中的各个选项在组件中也一样可以使用，唯一的例外是el选项，这是只用于根实例的特有选项。 一、注册组件的基本步骤 组件的使用分成
Vue学习笔记-day01
KevinLoveJava
11-05 303
Vue笔记 vue官网：cn.vuejs.org day01 1.(掌握)vue安装和初步体验vue <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> /* // 需要编译器 new Vue({ template: '<div>{{ hi }}</div>' }) // 不需要编译器 new Vue({ r
vue2-day7.zip
08-10
Vue.js 是一款流行的前端JavaScript框架，...如果你正在学习Vue.js，确保对这些概念有扎实的理解，并通过实践来巩固你的知识。"vue2-day7.zip"中的内容将为你提供一个很好的学习平台，帮助你在Vue 2的世界中更进一步。
vue2-day5.zip
08-10
Vue.js 是一款非常流行的前端JavaScript框架，用于构建用户界面。Vue 2.x 是其第二代主要版本，相较于Vue 1.x 提供了更多的特性和优化。...学习Vue 2不仅需要理解这些概念，还需要通过实际项目练习来熟练掌握。
vue2-day8.zip
08-10
Vue.js 是一款非常流行的前端JavaScript框架，由尤雨溪...学习Vue 2的过程中，理解并熟练运用这些概念是至关重要的，它们构成了Vue 2强大功能的基础。通过逐步学习和实践，开发者能够构建出高效、响应式的Web应用。
jiaoyanguizeduibi
07-10
jiaoyanguizeduibi
戴师兄数据分析启蒙课_Tableau练习.twbx
07-10
戴师兄数据分析启蒙课_Tableau练习.twbx
2024年欧洲酒精测试仪和药物测试设备市场主要企业市场占有率及排名.docx
07-09
2024年欧洲酒精测试仪和药物测试设备市场主要企业市场占有率及排名.docx
理工科考研自动控制知识点大全
最新发布
07-10
理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全理工科考研自动控制知识点大全
张天禹老师vue2笔记
08-11
- *3* [Vue2学习笔记（尚硅谷张天禹老师）day-01](https://blog.csdn.net/qq_53916344/article/details/123890478)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值