随笔分类 - 4-Vue3
摘要：一、响应式变量 声明响应式变量在setup里使用ref 包裹， setup中调用需要使用x.value,html中不需要.value 声明响应式对象使用reactive 引入 import { ref, reactive} from "vue"; <template> <div> <div> {{
阅读全文
摘要：一、 安装 npm install vuex@next --save 二、 基本使用 store.js import { createStore } from 'vuex' const store = createStore({ //用来保存数据 state() { return { count:
阅读全文
摘要：六、编程式路由 可以通过编程的方式进行url跳转 App.vue <template> <button @click="go">跳转到about</button> <router-view></router-view> </template> <script> export default { me
阅读全文
摘要：一、 安装 npm install vue-router@4 二、基础使用 定义路由 router.js import { createRouter,createWebHashHistory} from 'vue-router' import About from '../components/Ab
阅读全文
摘要：基本使用 <div id="vm"> <my-component>abc</my-component> </div> <script type="module"> import * as obj from './main.js' const app = Vue.createApp({ }); app
阅读全文
摘要：<div id="vm"> <div>子组件点击时：{{count}}</div> <blog-post @myaddevent='fuaddevent'></blog-post> </div> <script type="module"> import * as obj from './main.
阅读全文
摘要：Prop是由父组件传递数据到子组件 1.通过props数组传递数据 <div id="vm"> <blog-t title="标题" subtitle='副标题'></blog-t> </div> <script> const app = Vue.createApp({}); app.compone
阅读全文
摘要：组件和组件复用 <div id="vm"> <button-counter></button-counter> <button-counter></button-counter> </div> <script> const app = Vue.createApp({}); app.component
阅读全文
摘要：一、基础 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定 1.文本 <div id="vm"> <input v-model="message" placeholder="edit me" /> <p>Message is: {{ me
阅读全文
摘要：1.属性监听 <div id="vm"> <button v-on:click="counter += 1">点击</button> <p>{{ counter }} times</p> </div> <script> const v = Vue.createApp({ data() { retur
阅读全文
