weiweicn!-优快云博客

初始代码如下：<!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"> <ti.

2022-06-04 16:45:20 94

使用v-for渲染list中的内容<!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">.

2022-05-30 16:27:27 795

原创 [Vue] 9.Vue的条件渲染（v-if；v-show；v-else-if；v-else）

v-if: 通过控制dom的存在与否控制标签的显示与隐藏v-show: 通过控制sytle样式去控制元素的显示与否如果操作频繁的话建议v-show<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="view.

2022-05-30 15:08:43 95

原创 [Vue] 8.Vue的样式绑定

给标签加class （style标签中定义样式，给标签加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, init.

2022-05-30 12:01:58 96

原创 [Vue] 7.Vue的计算属性和侦听器

一、计算属性computed写法：<!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">

2022-05-30 10:21:21 98

原创 [Vue] 6.Vue常用的模板语法

v-html指令：用来解析带有标签的变量，可以展示出对应的样式。<script> const app = Vue.createApp({ data() { return { message: '<strong>hello world</strong>' } }, templat.

2022-05-27 15:36:39 147

原创 [Vue] 5.Vue的生命周期函数

一、生命周期函数：在某一时刻会自动执行的函数beforeCreate(): 分析的代码中的事件以及生命周期函数代码后，第一个执行即在实例生成之前执行（after init events & lifecycle）created(): 分析完数据以及模板之间绑定的内容后执行即在实例生成之后执行 (after init injections & reactivity)beforeMount(): 如果有template，Vue会把template变成render函数，beforMount(

2022-05-25 17:30:15 489

原创 [Vue] 4.组件的概念+todoList代码拆分

一、组件的概念标签中属性和数据绑定：v-bind<button v-on:click="handleAdditem" v-bind:title="inputValue">增加</button>二、拆分todoList组件将列表拆出来1）定义一个变量app，将createApp的实例赋值给它const app = Vue.createApp({ data() { return {

2022-05-24 15:51:00 209

原创 [Vue] 3.数据的循环展示 + todoList功能

一、数据的循环展示定义data中的数据data() { return { list: ['hello', 'world', 'adam', 'xin'] } },循环数据：v-fortemplate: ` <ul> <li v-for="(item, index) of list">{

2022-05-24 09:58:55 1207

原创 [Vue] 2. 字符串反转和内容隐藏 v-if

一、字符串反转：实现点击按钮后，字符串反过来显示写按钮，并绑定事件方法：v-on（绑定一个事件）：click（绑定的是click事件）<button v-on::click="handleBtnClick">反转</button>定义点击事件函数：methods: { handleBtnClick() { this.content = this.content.split('').reverse

2022-05-23 20:00:00 495

原创 [Vue] 1.用VUE写hello world和counter

一、用Vue写Hello world新建一个文件夹 Hello world; 新建一个文件: index.html在html的完整代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport

2022-05-23 15:06:45 263

原创 [React] 15.React - React中的前端路由

一. url是什么：访问不同url, 展示不同的组件二. 使用步骤：安装React路由：命令行中执行npm install react-router-dom --save(注意此处的版本为npm install react-router-dom@4.3.1 --save)两个js文件，分别为list.js和newButton.js,要实现访问localhost:3000/button的时候就显示button.js；访问localhost:3000/list的时候就显示list.js。代码如下：li

2022-04-17 10:57:40 970

空空如也

空空如也