父传子，非prop
一、条件渲染 1. v-if 通过表达式的真假来控制此标签是否显示 <div id="vm"> <!--awesome为真时显示此句--> <h1 v-if="awesome">Vue is awesome!</h1> <!--awesome为假时显示此句--> <h1 v-else>Oh no �
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
1.属性监听 <div id="vm"> <button v-on:click="counter += 1">点击</button> <p>{{ counter }} times</p> </div> <script> const v = Vue.createApp({ data() { retur
一、基础 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定 1.文本 <div id="vm"> <input v-model="message" placeholder="edit me" /> <p>Message is: {{ me
一、响应式变量 声明响应式变量在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"> <div>子组件点击时：{{count}}</div> <blog-post @myaddevent='fuaddevent'></blog-post> </div> <script type="module"> import * as obj from './main.
基本使用 <div id="vm"> <my-component>abc</my-component> </div> <script type="module"> import * as obj from './main.js' const app = Vue.createApp({ }); app
由于Class和Style绑定使用频繁，字符串拼接麻烦且易错。因此，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组 一、Class isActive，isLine是bool值，用来控制该类是否有此名称 运行 （2）绑定类和非绑定类可以同时使用 （3）也可以把所有属性
一、插值 1.Mustache 语法 html <span>Message: {{ msg }}</span> js <div id="vm">{{ msg }}</div> <script> Vue.createApp({ data(){ return { msg:'hello' } } }).m
一、计算属性 1.计算属性 计算方式不能复用，且不好维护 <div id="example"> {{ message.split('').reverse().join('') }} </div> 计算方式比较复杂或者重复使用时可以用计算属性 <div id="vm"> <div id="exampl
声明式渲染 类似C#里的 $'' 字符串插值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name
安装CLI # 安装cli npm install -g @vue/cli # 或者 yarn global add @vue/cli # 查看版本 vue --version # 升级全局cli包 npm update -g @vue/cli # 或者 yarn global upgrade --
创建一个模板 npm init @vitejs/app my-vue-app -- --template vue yarn create @vitejs/app my-vue-app --template vue 目录结构 vscode 安装插件 volar 的vue3插件 安装yarn npm i
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
