courage丶丶-CSDN博客

原创 v-model v-bind

v-model 在表单控件或组件上创建双向绑定  <input type="text" v-model="msg"> <p>{{msg}}</p>  <select v-model="name"> <option>张三</option> &l

2022-03-09 08:50:45 255

原创 vite搭建vue3,vue3使用路由,vite配置文件路径

搭建vue3 通过脚手架搭建vue3.0 1.vue-cil 2.vite(推荐使用vite:快速冷启动（秒开）,即时的模块热更新,按需编译) 全局安装vite npm i -g create-vite-app 使用vite1.0搭建项目 create-vite-app 项目名使用vite最新版本 npm init vite@latest 项目名指定使用模板 npm init vite@latest 项目名 --template vue 安装依赖 npm i 运行项目 np

2022-03-09 08:49:15 5873

原创 v-for,响应式,v-for和v-if的权重

v-for的值语法必须是alias in expression,或用of代替in,它会根据遍历数组项的次数,来渲染元素遍历对象用 for…in 遍历数组用 for…of  <p v-for="(value,index) of msg">{{val}} {{i}}</p>  <p v-for="(value,index

2022-03-09 08:45:48 435

原创 vant,ele框架

vant是用于移动端的组件库安装vant 在项目文件中输入 cnpm i 安装依赖包使用npm安装vant vue2语法安装 npm i vant -S vue3语法安装 npm i vant@next -S 也可以在vue项目输入 vue ui打开图形化界面来创建引入组件自动引入组件(推荐) 1.# 安装插件 npm i babel-plugin-import -D 2.在 babel.config.js 中配置 module.exports = { pre

2022-03-09 08:44:16 813

原创 setup语法糖

setup语法糖 <script setup> //这里的代码会被编译成组件setup()函数中的内容,这里的script跟普通的script只有组件首次引入的时候执行一次不同,<script setup>中的代码会在每次组件实例被创建的时候执行 </script> 基本使用 <script setup> //这里跟setup函数一样的写法,只是不需要return,组件不需要挂在compones上,可以直接在模板上使用 import { reac

2022-03-09 08:35:06 2175

原创 propsData,ref的使用,$emit子级向父级传值

propsData的使用 <div id="box"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script type="text/JavaScript"> let myExtend = Vue.extend({ template:`<div&g

2022-03-09 08:28:38 548

原创 data函数,组件分离,父组件向子组件传值

组件分离将组件内容写在外面,用变量名引用将template模板写在body中,用id名引用 <div id="box"> <aaa></aaa> <g-nav></g-nav> </div> <template id="a"> <div> <p>1</p>

2022-03-09 08:19:38 586

原创 Composition API 监听属性

Composition API 监听属性 watchEffect <script> import {ref,watchEffect} from 'vue' export default { name: 'HelloWorld', props: { msg: String }, setup(){ const count = ref(0) const stop = watchEffect(()=>{//立即执行，没有immediate /

2022-03-09 08:15:16 279

原创 Composition API ref reactive

Composition API composition API也叫组合式API,它是vue3的新特性,当代码量太多的时候,使用vue2的方式编辑不利于维护,所有出现了它 setup()函数时vue3中,专门为组件提供的新属性,它为composition API新特性提供了统一的入口通过setup引入使用组件(直接添加在标签上) <template> <div> <img alt="Vue logo" src="./assets/logo.png" /&gt

2022-03-09 08:13:05 551

原创 .sync脚手架父子通讯,生命周期

.sync <div id="box"> //使用v-bind绑定自定义的名称,.sync发送事件名 <my-com :msg.sync="describe"></my-com> {{describe}}//直接使用 </div> <template id="mycom"> <div> {{fn}} </

2022-03-09 08:07:58 166