vue
文章平均质量分 84
vue-基础学习过程
Machoul
人生当苦无妨,两人当归即好
展开
-
Vue基本使用方法
Vue基本使用方法基本使用想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法root容器里的代码被称为【Vue模板】Vue实例和容器是一一对应的真实开发中只有一个Vue实例,并且会配合着组件一起使用{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新<!DOCTYPE html><ht原创 2022-03-28 13:17:49 · 435 阅读 · 0 评论 -
Vue中绑定样式
Vue中绑定样式绑定class样式–单个样式<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .cl1{ background-color: red;原创 2022-03-28 16:33:26 · 864 阅读 · 0 评论 -
Vue中事件的处理
Vue中事件的处理事件的基本使用使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;事件的回调需要配置在methods对象中,最终会在vm上;methods中配置的函数,不要用箭头函数!否则this就不是vm了;methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;@click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;<!DOCTYPE html><html>原创 2022-03-28 16:07:24 · 130 阅读 · 0 评论 -
Vue中的计算属性和监视属性
Vue中的计算属性和监视属性案例:在两个输入框中分别输入一个人的姓和名,在文本中显示出这个人的姓名插值语法实现<html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="context"> 姓:<原创 2022-03-28 15:16:14 · 231 阅读 · 0 评论 -
Vue中列表渲染和条件渲染
Vue中列表渲染和条件渲染条件渲染v-show写法:v-show=“表达式”适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../js/vue.js"></script> </head>原创 2022-03-29 13:04:38 · 128 阅读 · 0 评论 -
Vue中的指令
Vue中的指令内置指令v-text作用:向其所在的节点中渲染文本内容与插值语法的区别:v-text会替换掉节点中的内容,{{xx}}则不会。<body> <div id="context"> <div>你好,{{name}}</div> <div v-text="name">hello</div> <div v-text="str"></div>原创 2022-03-29 13:03:02 · 68 阅读 · 0 评论 -
Vue中表单数据和过滤器
Vue中表单数据和过滤器表单数据案例演示<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="context"> <form @submit.p原创 2022-03-29 13:02:25 · 456 阅读 · 0 评论 -
Vue的生命周期
Vue的生命周期概述生命周期又名生命周期回调函数、生命周期函数、生命周期钩子。Vue在组件的某些时刻和状态调用的一些特殊名称的函数。生命周期函数的名字不能更改,但是具体的函数内容可以根据需求进行编写。所有的生命周期函数中的this指向的是vm或者组件实例对象举例mounted<body> <div id="context"> <h2>{{name}}</h2> </div></body><scri原创 2022-03-29 13:00:26 · 52 阅读 · 0 评论 -
Vue中表单数据和过滤器
Vue中表单数据和过滤器表单数据案例演示<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="context"> <form @submit.p原创 2022-03-30 20:26:47 · 83 阅读 · 0 评论 -
Vue脚手架的使用
Vue脚手架的使用vue-cli脚手架Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。文档地址:https://cli.vuejs.org/zh/配置npm淘宝镜像:npm config set registry https://registry.npm.taobao.org使用步骤:安装:npm install -g @vue/cli创建项目: vue create xxx启动项目: npm run serveVue脚手架隐藏了所有webpack配置,如果想要看w原创 2022-03-30 20:27:30 · 86 阅读 · 0 评论 -
Vue组件化编程以及组件关系
Vue组件化编程和原型对象组件的基本使用使用组件的三个步骤:定义组件注册组件使用组件定义组件通过使用Vue.extend(options)来创建组件,组件中options不应该拥有el属性,因为最终所有的组件都要经过一个VM来管理,由VM中的el决定服务哪个容器。data必须写成函数,避免组件被复用时,数据存在引用关系。const person = Vue.extend({ template: ` <div> <h2>姓名:{{name}}原创 2022-03-29 14:36:29 · 235 阅读 · 0 评论 -
Vue中组件通信
Vue中组件通信props的使用功能:让组件接收外部传过来的数据传递数据的方式:<Demo name="xxx"/>接收数据的方式:只接收:props:['name']接收并限制类型:props:{name:String}限制类型,必要性,指定默认值props:{ name:{ type:String, //类型 required:true, //必要性 default:'老王' //默认值 }}props是只读的,Vu原创 2022-03-30 20:22:19 · 492 阅读 · 0 评论 -
Vue中插件的使用和混入的使用
Vue中混入和插件的使用vue中的ref属性被用来给元素或子组件注册引用信息(id的替代者)应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)使用方式:打标识:直接加在标签体上获取:this.$refs.xxx<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">输原创 2022-03-30 20:29:31 · 413 阅读 · 0 评论 -
Vue中插槽的使用
Vue中插槽的使用作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于 父组件 ===> 子组件 。分类:默认插槽、具名插槽、作用域插槽默认插槽父组件在子组件标签中定义html结构,子组件通过slot来定义一个插槽,如果父组件传递了html结构,那么slot中的内容就被替换为父组件传递过来的内容,如果父组件没有传递html结构,那么slot就按照原来的样子来展示父组件:<template> <div id="app">原创 2022-03-30 21:04:06 · 163 阅读 · 0 评论 -
Vue中配置代理服务器
Vue中配置代理服务器创建vue.config.js文件,添加如下配置devServer:{ proxy:"http://localhost:8888"}更多配置module.exports = { devServer: { proxy: { '/api1': {// 匹配所有以 '/api1'开头的请求路径 target: 'http://localhost:5000',// 代理目标的基础路径 changeOrigin: true原创 2022-03-31 16:56:13 · 2591 阅读 · 0 评论 -
Vue中vuex的使用
Vue中vuex的使用概述在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。在多个组件需要共享数据时使用使用方式在src/store文件夹下创建index.js文件//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions对象——响应原创 2022-03-31 16:15:06 · 838 阅读 · 0 评论 -
Vue中vue-router(路由)的使用
Vue中vue-router(路由)的使用基本使用一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理前端路由:key是路径,value是组件安装vue-router:npm i vue-router应用插件:Vue.use(VueRouter)修改main.js文件//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'//引入VueRouterimport原创 2022-03-31 16:15:38 · 1283 阅读 · 0 评论