Vue
文章平均质量分 52
笔记
Raccom
这个作者很懒,什么都没留下…
展开
-
Vue2的特性与简介
VueVue实例<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})实例作用范围vue会管理el选项命中元素及其内部的后代元素el挂载可以使用css选择器,但是不能挂载html和body上v-text<h2 v-text="message+'!'"></h2>&l原创 2022-01-17 20:19:07 · 728 阅读 · 0 评论 -
Vue2的指令
VueVue指令v-text<h2 v-text="message+'!'"></h2>message为data对象中的键值对,不能解析标签,会替换标签内的内容{{ }}<h2>深圳{{ message+"!" }}</h2>插值表达式可以进行字符串拼接,只是内容的占位符,不会覆盖原内容差值表达式内支持js表达式的运算甚至数组字符串方法操作只能用在元素的内容节点,不能用在元素的属性节点v-html<h2 v-html="m原创 2022-01-23 16:45:11 · 762 阅读 · 0 评论 -
Vue2过滤器
Filters于Vue3.0中已弃用,只能应用于Vue2.x过滤器用于文本的格式化,可以用在插值表达式和v-bind属性绑定过滤器应该添加在js表达式尾部,由’管道符’进行调用 <!-- 插值表达式中通过管道符调用capitalize过滤器,对message值处理 --> <p>{{ message | capitalize }}</p> <!-- v-bind中通过管道符调用formatId过滤器,对rawId值处理 --> <原创 2022-01-24 10:57:46 · 200 阅读 · 0 评论 -
Vue2侦听器及计算属性
Watchwatch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作监听器函数需要定义到Vue实例的watch节点下监听器本质上是一个函数,要监听哪个数据的变化,就把数据名作为方法名方法格式监听 const app=new Vue({ el: '#app', data:{ username: '' }, watch:{ //监听username值得变化 //newVal是变化后的新值,oldVal是变化之前的旧值原创 2022-01-24 12:21:46 · 299 阅读 · 0 评论 -
Vue2生命周期
生命周期原创 2022-01-25 19:57:18 · 380 阅读 · 0 评论 -
Axios与fetch
axios功能强大的网络请求库<script src="https://unpkg.com/axios/dist/axios.min.js"></script>axios.get(地址?key=value&key2=value2).then(function(response){},function(err){})axios.post(地址,{key:value,key2:value2}).then(function(response){},function(er原创 2022-01-18 17:47:19 · 196 阅读 · 0 评论 -
Vue脚手架
Vue-cli用于生成工程化的Vue项目npm install -g @vue/cli基于vue-cli快速生成Vue项目vue create 项目的名称 #在需要创建项目的文件夹目录下Vue中的组件化开发vue是一个支持组件化开发的前端框架组件的后缀名是.vue App.vue为根组件Vue项目的运行流程Vue通过main.js把App.vue渲染到index.html的指定区域内App.vue用来编写待渲染的模板结构index.html中需要预留一个el区域mai原创 2022-01-24 20:19:22 · 97 阅读 · 0 评论 -
Vue2的组件
组件当一个组件需要调用另一个组件时需要通过注册调用私有子组件在组件中将需要使用的组件导入import Left from '@/components/Left.vue'使用components节点注册export default { components: { Left }}在组件中以标签形式使用<div class="box"> <Left></Left></div>注册全局组件在Vue项目的main.js原创 2022-01-25 19:55:54 · 156 阅读 · 0 评论 -
Vue2的动态组件
动态组件实现动态组件渲染vue提供给一个内置的component组件,专门用来实现动态组件的渲染 //通过 is 属性,动态指定要渲染的组件 <component :is="comName"></component> //点击按钮,动态切换组件的名称 <button @click="comName = 'Left'">展示 Left 组件</button> <button @click="comName = 'Right'"&原创 2022-01-27 23:26:40 · 891 阅读 · 0 评论 -
Vue2的数据传递
组件的数据传递项目开发中组件常见的关系为父子关系或兄弟关系,非父子关系均可以当做兄弟关系父组件向子组件共享数据父组件向子组件共享数据需要使用自定义属性//父组件<Son :msg="message" :user="userinfo"></Son>data(){ return { message: 'hello vue.js', userinfo: { name: 'zs', age: 20 } }}//子组件<template> &原创 2022-01-27 12:12:34 · 591 阅读 · 0 评论 -
Vue2的ref引用对象
refref引用用来在vue中获取DOM元素或组件的引用每一个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的引用默认情况下,组件的$ref指向一个空对象 //使用ref属性为对应的'组件'添加引用名称 <Mycounter ref="counterRef"></Mycounter> <button @click="getRef">获取 $refs引用</button> methods: {原创 2022-01-27 22:52:53 · 787 阅读 · 0 评论 -
Vue2的插槽
插槽插槽(slot)是vue为组件的封装提供的功能。允许开发者在封装组件时,把不确定的、希望由用户指定的部分定义为插槽。即在组件调用的标签中把自定义内容插入对应的组件的slot区域<!-- 父组件中的引用 --><Left> <p>在Left组件的内容区域,声明的p标签</p></Left><!-- 子组件中的插槽区域 --><!-- slot声明一个插槽区域 --><!-- vue官方规定:原创 2022-01-28 00:14:21 · 550 阅读 · 0 评论 -
Vue2的插件
自定义命令私有自定义指令在每个vue组件中,可以在directives节点下声明私有自定义指令<h1 v-color>hello vue</h1> //v-为命令前缀 本质上命令为colordirectives: { color: { //为绑定到的HTML元素设置红色文字 //当指令第一次被绑定到元素上的时候,会立即触发bind函数 bind(el) { //形参中的el是绑定了此指令的、原生的DOM元素原创 2022-01-29 16:11:26 · 737 阅读 · 0 评论 -
Vue-router
Vue-router原创 2022-01-31 11:33:38 · 1402 阅读 · 0 评论 -
Vue.config.js
Vue.config.jsvue.config.js 是 vue-cli 创建出来的项目的配置文件在 vue.config.js 这个配置文件中,可以对整个项目的打包、构建进行全局性的配置由于 webpack 在进行打包时,底层用到了node.js因此在 vue.config.js 配置文件中,可以导入并使用 node.js中的核心模块修改vant主题// vue.config.jsconst path = require('path')const themePath = path.原创 2022-02-01 18:23:04 · 1684 阅读 · 0 评论 -
Vue3新特性
Vue3新特性option api// Vue 2.xconst app = new Vue({ ... }).$mount('#app')// Vue 3.xconst app = Vue.createApp({ ... }).mount('#app')data在Vue 2.x中 根实例的data可以直接写成一个对象在Vue 3.x中 无论根实例还是组件实例都可以写成函数返回一个对象...原创 2022-03-28 15:15:38 · 561 阅读 · 0 评论 -
v-bind in css
笔记原创 2022-12-15 16:43:10 · 1357 阅读 · 0 评论 -
Mixin
Mixin原创 2022-02-21 14:45:09 · 534 阅读 · 0 评论 -
Teleport、Suspense
TeleportVue中组件模板属于该组件通过teleport可以将模板的内容转移到组件之外的其他DOM结构中<teleport to="body"> 内容</teleport><teleport to="#app"> 内容</teleport>原创 2022-02-21 16:09:49 · 150 阅读 · 0 评论 -
Composition API
Composition APIComposition API也称为组合式API,实现代码的共享以及重用Composition-api提供的函数setuprefreactivewatchEffectwatchcomputedtoRefs生命周期hooks原创 2022-02-21 20:55:39 · 1812 阅读 · 0 评论 -
Vue3集成TS
Vue3原创 2022-02-24 12:42:54 · 812 阅读 · 0 评论 -
Vuex
Vuex原创 2022-02-24 12:41:49 · 591 阅读 · 0 评论 -
Vuex集成TS
Vuex集成Vuex结合Composition API组合式api中没有this.$store,可以使用useStore来替代import { useStore } from 'vuex'export default { setup () { const store = useStore() }}获取state和getters// 定义store中的state和gettersconst store = new createStore({ state: {原创 2022-02-24 20:49:25 · 889 阅读 · 0 评论 -
Pinia
Pinia状态管理工具,它和vuex有很多相似的地方本质上他是vuex团队核心成员开发的,在vuex上面提出了一些改进Pinia的引入定义storeimport { defineStore } from 'pinia'export const useMy = defineStore('myStore', { // state为全局的共享状态 跟vuex不同 写法为函数返回对象 state: () => ({ counter: 4 }), // gette原创 2022-04-12 22:42:03 · 754 阅读 · 0 评论 -
vite.config.js
笔记原创 2022-10-24 08:48:38 · 412 阅读 · 0 评论 -
vite引入require报错
笔记原创 2022-10-20 16:27:05 · 926 阅读 · 0 评论 -
ElementPlus样式问题
笔记原创 2023-01-17 08:36:09 · 772 阅读 · 1 评论 -
vueUse拖拽
适用于一些点击后拖拽的场景。原创 2023-07-07 15:02:08 · 365 阅读 · 0 评论