Vue基础第五篇

这篇具有很好参考价值的文章主要介绍了Vue基础第五篇。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、动态组件

1.基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li>
            <button @click="who='child1'">首页</button>
        </li>
        <li>
            <button @click="who='child2'">订单</button>
        </li>
        <li>
            <button @click="who='child3'">商品</button>
        </li>
    </ul>
    <component :is="who"></component>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            who: 'child1'
        },
        components: {
            child1: {
                template: `
                    <div>
                        <span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是首页</span>
                    </div>
                `,
            },
            child2: {
                template: `
                    <div>
                        <span style="border-bottom: 5px solid rgba(255,104,255,0.7)">我是订单</span>
                    </div>
                `,
            },
            child3: {
                template: `
                    <div>
                        <span style="border-bottom: 5px solid rgba(104,255,104,0.7)">我是商品</span>
                    </div>
                `,
            }
        }
    })
</script>
</html>

2.keep-alive的使用

keep-alive可以让输入框内有的内容一致保持,不会因为切换而重置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="box">
    <ul>
        <li>
            <button @click="who='child1'">首页</button>
        </li>
        <li>
            <button @click="who='child2'">订单</button>
        </li>
        <li>
            <button @click="who='child3'">商品</button>
        </li>
    </ul>
    <keep-alive>
        <component :is="who"></component>
    </keep-alive>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            who: 'child1'
        },
        components: {
            child1: {
                template: `
                    <div>
                        <span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是首页</span>
                        <input type="text">
                    </div>
                `,
            },
            child2: {
                template: `
                    <div>
                        <span style="border-bottom: 5px solid rgba(255,104,255,0.7)">我是订单</span>
                        <input type="text">
                    </div>
                `,
            },
            child3: {
                template: `
                    <div>
                        <span style="border-bottom: 5px solid rgba(104,255,104,0.7)">我是商品</span>
                        <input type="text">
                    </div>
                `,
            }
        }
    })
</script>
</html>

二、slot插槽

  • 一般情况下,编写完1个组件之后,组件的内容都是写死的,需要加数据 只能去组件中修改,扩展性很差
  • 然后就出现了插槽这个概念,只需在组件中添加<slot></slot>,就可以在body的组件标签中添加内容

1.基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot 插槽</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <child>
        <h6>Hello World</h6>
    </child>
</div>

</body>
<script>
    let vm = new Vue({
        el: '#box',
        data: {
            who: 'child1'
        },
        components: {
            child: {
                template: `
                    <div>
                        <slot></slot>
                        <span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是组件的原内容</span>
                        <slot></slot>
                    </div>
                `,
            },
        }
    })
</script>
</html>

2.小案例(通过插槽实现在1个组件中控制另1个组件的显示隐藏)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot 插槽</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <!--通过插槽实现在一个组件中控制另一个组件的显示隐藏-->
    <child1>
        <button @click="isShow=!isShow">显示/隐藏组件2</button>
    </child1>

    <child2 v-if="isShow"></child2>
</div>
</body>
<script>
    Vue.component('child1', {
        template: `<div>
          组件1
          <slot></slot>
        </div>`,

    })
    Vue.component('child2', {
        template: `<div>
          <h3>组件2</h3>
        </div>`,

    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        }

    })
</script>
</html>

3.具名插槽

可以指定标签放在某个插槽的位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>具名插槽</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>

<div id="box">
    <!-- 具名插槽,把p标签给a插槽,div标签给b插槽-->
    <child>
        <p slot="a">我是具名插槽a插入的内容</p>
        <div slot="b">我是具名插槽b插入的内容</div>
    </child>
</div>
</body>
<script>
    Vue.component('child', {
        template: `<div>
            <slot name="a"></slot>
            <hr>
            <span style="border-bottom: 5px solid rgba(255,104,104,0.7)">我是组件的原内容</span>
            <hr>
            <slot name="b"></slot>
        </div>`,

    })
    var vm = new Vue({
        el: '#box',
        data: {}

    })
</script>
</html>

三、Vue-CLI 项目搭建

1.环境搭建

- 安装node

官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/

- 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

- 安装脚手架

cnpm install -g @vue/cli


- 清空缓存处理

npm cache clean --force

2. 项目的创建

创建项目

# 1 vue create 项目名
     vue create  myfirstvue
# 2 选择入下图
# 3 选择Babel,Router,vuex
	# Babel:语法转换
    # Router:页面跳转 路由效果
    # vuex:状态管理器,存储数据的
    
# 3 选vue版本

# 4 选package.json
# 5 之前的设置,保存与不保存都可以
等待即可

Vue基础第五篇

Vue基础第五篇Vue基础第五篇

使用vue-cli-ui创建

# vue ui  启动出一个服务,直接在浏览器中点点击就可以创建

启动/停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

打包项目

npm run build
// 要在项目根目录下进行打包操作

package.json中

"scripts": {
    "serve": "vue-cli-service serve",  # 运行项目
    "build": "vue-cli-service build",  # 编译项目成html,css,js
    "lint": "vue-cli-service lint"     # 代码格式化
},

3 .认识项目

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉,不上传git,使用npm install重新安装)
public: 共用资源
	--favicon.ico
	--index.html:项目入口页面,单页面
src: 项目目标,书写代码的地方
	-- assets:资源
	-- components:组件
	-- views:视图组件
	-- App.vue:根组件
	-- main.js: 入口js
	-- router.js: 路由文件
	-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json:项目配置依赖(等同于python项目的reqirement.txt)

配置文件:vue.config.js

//https://cli.vuejs.org/zh/config/ 配置参考
module.exports={
	devServer: {
		port: 8888
	}
}
// 修改端口,选做

main.js 整个项目入口文件

//es6 模块导入规范,等同于python导包
//commonJs的导入规范:var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue'  //根组件
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


/*
new Vue({
	el:'#app' //原来是用el:'#app',现在是new出Vue对象,挂载到#app上---》.$mount('#app')
  render: h => h(App) //原来是在页面上div中写样式,现在组件化开发 把根组件(import App from './App.vue'),通过render渲染上,渲染组件的方式
}).$mount('#app')
*/

vue文件

<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
  	//export default-->es6的默认导出(导出一个对象),模拟commonJS的导出方式制定的
    export default {
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

定义组件

#1 新建xx.vue
components-->HelloWorld.vue
#2 引入使用
<script>
	# es6的引入import from 
  import HelloWorld from '@/components/HelloWorld.vue'
  import Vue from 'vue'
  Vue.component('HelloWorld',HelloWorld) # 全局组件
  export default {
     components: { # 局部组件
   		 HelloWorld:HelloWorld
  		},
        
}
</script>

ESLint

ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言,在开发中比较容易出错。因为没有编译程序,为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别,规则本身和测试可以依赖于同样的模式。为了便于人们使用,ESLint 内置了一些规则,当然,你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写,这样既可以有一个快速的运行环境的同时也便于安装
js语法规范性检查,类似于PEP8规范
官网
https://eslint.bootcss.com/docs/about/

修改项目

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

HomeView.vue

<template>
  <div class="home">
  </div>
</template>

<script>
export default {
  name: 'HomeView',
}
</script>

AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

四、导入导出语法

导出语法   
    1 项目中:创建包,创建要给文件夹  lqz
    2 在包下创建 package.js
    3 在文件中写js代码

var name = 'lqz'
        function add(a, b) {
            return a + b
        }
   4 默认导出 对象 
        export default {
            add:add,
            name:name
        }
    
   5 命名导出 导出了两个变量
        export const name = '彭于晏'
        export const add = (a, b) => {
            return a * b
        }

导入语法
    # 默认导出的导入
    1 在任意的js中
    import 起个名字  from './lqz/package'
    2 使用导入的包
        起个名字.导出的字段
        
命名导出的导入
    1 在任意的js中
    import {name,add}  from './lqz/package'
    2 直接用即可文章来源地址https://www.toymoban.com/news/detail-475495.html

默认导入语法
import ch from './ch/package.js'

let res = ch.add(3, 4)
console.log(res)
console.log(ch.name)

命名导入语法
import {name, add} from './ch/package'

console.log(name)
let res = add(6, 5)
console.log(res)

到了这里,关于Vue基础第五篇的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Mysql---第五篇

    A原子性由undo log日志保证,它记录了需要回滚的日志信息,事务回滚时撤销已经执行成功的sql C一致性由其他三大特性保证、程序代码要保证业务上的一致性 I隔离性由MVCC来保证 D持久性由内存+redo log来保证,mysql修改数据同时在内存和redo log记录这次操作,宕机的时候可 以从

    2024年02月07日
    浏览(41)
  • 初识Linux:第五篇

    😁本篇主要介绍Linux权限的相关知识👇 🤔在了解权限之前,先来了解一下Linux有哪些用户呢? Linux下的用户有两种, 超级用户 (root用户), 普通用户 (也就是你adduser的用户); windows: 在windows下的用户是 管理员用户( 超级用户)和 普通用户 ,与Linux下的差不多,但是Linux的权

    2024年02月05日
    浏览(32)
  • 第五篇——云计算存储技术原理

    作者:禅与计算机程序设计艺术 随着互联网业务的爆炸式增长、流量的日益增长、IT基础设施的飞速发展、机器学习、区块链等新兴技术的激荡,云计算技术正蓬勃发展。作为云计算的一部分,存储技术占据了举足轻重的地位。本文将阐述云计算存储技术的一些基本概念、技

    2024年02月07日
    浏览(79)
  • 【FPGA入门】第五篇、按键消抖

    目录 第一部分、按键抖动现象 第二部分、消抖思路及代码 1、简单的按键消抖思路 2、实际按键消抖思路 3、实际按键消抖模块代码 第三部分、总结         只要学习过单片机的都会知道,按键在按下去和松开的那个瞬间都存在抖动,在单片机消除抖动最简单的方式就是 延

    2024年02月11日
    浏览(40)
  • Cobalt Strike第五篇导入插件

    CobaltStrike有两种加载插件的方法,一种是在客户端加载,一种是在服务端加载。在客户端加载,当客户端没连接上服务端后,该插件即不会被加载。所以有时候需要在服务端加载某些插件。 一、插件下载 二、客户端加载 点击 CobaltStrike– Script Manager 点击 Load 加载插件,加载

    2024年02月16日
    浏览(47)
  • 第五篇-ChatGLM2-6B模型下载

    可以使用如下代码下载 创建下载环境 编写代码 down_glm2.py snapshot_download其他参数 只允许下载部分类型的文件(以JSON为例) allow_patterns=‘*.json’, 不允许下载部分类型的文件(以JSON为例) ignore_patterns=[‘*.json’] 执行下 第一篇-ChatGLM-webui-Windows安装部署-CPU版 第二篇-二手工作站

    2024年02月14日
    浏览(71)
  • 测试概念第五篇—测试用例编写

    编写测试用例是验证软件系统功能是否按预期工作的重要步骤。测试用例应涵盖各种情况,包括正常情况、异常情况和边缘情况。以下是一些步骤来编写测试用例: 步骤一:了解需求和功能 了解需求 :理解正在测试的软件、功能或特性的需求。这将帮助你确定测试用例的目

    2024年02月06日
    浏览(58)
  • pytorch学习第五篇:NN与CNN代码实例

    这篇文章详细介绍了全链接神经网络实现方法,以及卷积的实现方法。最后我们发现,卷积的实现方法与全链接大同小异,因为 torch 为我们做了很多工作,我们来看看这两个有什么区别。 我们使用 torch 框架来实现两种神经网络,来对图形进行分类。 首先我们引入依赖包 下

    2024年02月06日
    浏览(45)
  • 极智AI | 谈谈AI发展第五篇:AI编译框架

    欢迎关注我的公众号 [极智视界],获取我的更多经验分享 大家好,我是极智视界,本文来谈谈 AI编译,是谈谈AI发展系列的第五篇。 邀您加入我的知识星球「极智视界」,星球内有超多好玩的项目实战源码下载,链接:https://t.zsxq.com/0aiNxERDq 本文是 \\\"谈谈 AI 发展\\\" 的第五篇,

    2024年01月17日
    浏览(39)
  • 后端面试话术集锦第五篇:rabbitmq面试话术

    这是后端面试集锦第五篇博文—— rabbitmq 面试话术❗❗❗ RabbitMQ 是 Erlang 语言开发的基于 AMQP 的一款消息中间件,核心思想是生产者不会将消息直接发送给队列,消息在发送给客户端时先发送给交换机,然后由交换机转发给对应的队列。 它对路由( Routing ),负载均衡( Load b

    2024年02月10日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包