Vue基础
关注
分享
扫一扫
文章平均质量分 59
凉风有信、
这个作者很懒，什么都没留下…
展开
-
Vue中Non-props属性是什么
先看一个通过props接收父组件参数的栗子： const app = Vue.createApp({ template: ` <div> <counter msg="hello" /> </div> ` }); app.component('counter', { props:['msg'], template: ` <div>Counter</div>原创 2021-06-04 19:51:04 · 426 阅读 · 1 评论 -
Vue中单项数据流的理解
补充一下之前的知识：params：先看一个栗子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 16</title> <script src="http原创 2021-06-03 20:55:15 · 501 阅读 · 0 评论 -
Vue中组件间传值及传值校验
见案例： const app = Vue.createApp({ template: ` <div><test content="hello world" /></div> ` }); app.component('test', { props:['content'], // 接收父组件传来的值 template: `<div>{{content}}</div>` }); cons原创 2021-06-03 16:22:10 · 726 阅读 · 1 评论 -
Vue中组件的定义及复用性，局部组件和全局组件
组件的理念：将许多复杂的东西拆分为小的东西，然后再组装在一起，从而降低项目维护的成本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-06-03 15:26:22 · 487 阅读 · 0 评论 -
Vue中表单双向绑定指令的使用
v-model：input框中的双向绑定： const app = Vue.createApp({ data(){ return { message:'hello' } }, template: ` <div> {{message}} <input v-model="message" /> </div>原创 2021-06-02 18:14:07 · 586 阅读 · 0 评论 -
Vue中事件绑定 - 修饰符
点击按钮数字加一的案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-06-02 17:13:19 · 282 阅读 · 0 评论 -
Vue中列表循环渲染
栗子：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-06-02 15:54:08 · 1629 阅读 · 2 评论 -
Vue中条件渲染
一个案例说清除条件渲染：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lesson 10</title> <script src="https://unpkg.com/原创 2021-06-01 17:54:40 · 129 阅读 · 0 评论 -
Vue中样式绑定语法
class方式书写样式：数据中通过对象的方式存储样式：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-06-01 17:35:10 · 268 阅读 · 0 评论 -
Vue中 数据，方法，计算属性和侦听器
数据：Vue中数据就是data(){}里面的东西方法：Vue中方法就是methods注意：methods里面的this指向的就是vue的实例（仅限于methods里面普通函数的this） const app = Vue.createApp({ data(){ return { message:1 } }, me原创 2021-06-01 16:44:50 · 253 阅读 · 2 评论 -
Vue中常用模板语法讲解
插值表达式：插值表达式就是 {{}}举例：见代码： const app = Vue.createApp({ data() { return { message:'hello wrold' } }, template: '<div>{{message}}</div>' });原创 2021-06-01 15:36:47 · 307 阅读 · 0 评论 -
Vue中生命周期函数
见图片： // 生命周期函数：在某一时刻会自动执行的函数 const app = Vue.createApp({ data() { return { message: 'hello world' } }, // 在实例生成之前会自动执行的函数 beforeCreate() { console.log('beforeCreate') }, // 在实例生成之后会自动执行的函数 created(原创 2021-06-01 14:30:51 · 168 阅读 · 0 评论 -
Vue中的应用和组件的基本概念
// createApp 表示创建一个 Vue 应用, 存储到 app 变量中 // 传入的参数表示，这个应用最外层的组件，应该如何展示 // MVVM 设计模式，M -> Model 数据， V -> View 视图， VM -> ViewModel 视图数据连接层 const app = Vue.createApp({ data() { return { message: 'hello world' } }, ..原创 2021-06-01 13:57:42 · 265 阅读 · 0 评论