vue 相关2

最新推荐文章于 2022-08-03 23:24:53 发布
最新推荐文章于 2022-08-03 23:24:53 发布
阅读量186 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sai_Hikaru/article/details/116241565
版权

mixin 混入

局部 mixin
  • 组件 data 优先级高于 mixin data 优先级。
  • 生命周期函数，先执行 mixin 里面的，再执行组件里面的。
  • methods 中的函数，如果组件中与 mixin 中的函数命名相同，执行组件中的函数。
const Mixin = {
  data() {
    return {
      count: 12
    }
  },
  created() {
    console.log('mixin created');
  },
  methods: {
    handleClick() {
      console.log('mixin handleClick');
    }
  }
}
const app = Vue.createApp({
  data() {
    return {
      message: 'hello world'
    }
  },
  mixins: [Mixin],
  methods: {
    handleClick() {
      console.log('handleClick');
    }
  },
  template: '<div @click="handleClick">{{message}}{{count}}</div>'
});
app.mount('#root');
  • 全局mixin
    一旦定义，每个组件都会把 mixin 注入进来
    不建议使用，维护性不高
const app = Vue.createApp({
  data() {
    return {
      message: 'hello world'
    }
  },
  methods: {
    handleClick() {
      console.log('handleClick');
    }
  },
  template: '<div @click="handleClick">{{message}}{{count}}</div><counter />'
});
app.component('counter', {
  template: '<div>{{count}}</div>'
});
app.mixin({
  data() {
    return {
      count: 12
    }
  },
  created() {
    console.log('mixin created');
  },
  methods: {
    handleClick() {
      console.log('mixin handleClick');
    }
  }
});
app.mount('#root');
  • 自定义的属性，组件中的属性优先级高于 mixin 属性的优先级
    - 自定义属性访问可用 this.$options.属性名
const Mixin = {
  number: 123
}
const app = Vue.createApp({
  number: 456,
  mixins: [Mixin],
  template: '<div>{{this.$options.number}}</div>'
});
app.mount('#root');
  • 修改自定义属性合并策略
app.config.optionMergeStrategies.number = (mixinVal, appVal) => {
	return mixinVal || appVal;
}

自定义指令 directive

  • 全局指令
const app = Vue.createApp({
  template: `<input v-focus />`
});
app.directive('focus', {
  mounted(el) {
    el.focus();
  }
});
app.mount('#root');
  • 局部指令
const directives = {
  focus: {
    mounted(el) {
      el.focus();
    }
  }
};
const app = Vue.createApp({
  directives,
  template: `<input v-focus />`
});
app.mount('#root');
  • 所有自定义指令的生命周期函数
const directives = {
focus: {
   beforeMount(el) {

   },
   mounted(el) {
     el.focus();
   },
   beforeUpdate() {

   },
   updated() {

   },
   beforeUnmount() {

   },
   unmounted() {
     
   }
 }
};

自定义指令案例

<!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">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    .box {
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      template: '<div v-pos:left="200" class="box"><input /></div>'
    });
    // 写法 1 写法 2 和这种写法功能相同
    app.directive('pos', (el, binding) => {
      el.style[binding.arg] = binding.value + 'px';
    });
    // 写法 2 
    app.directive('pos', {
      mounted(el, binding) {
        el.style[binding.arg] = binding.value + 'px';
      },
      updated(el, binding) {
        el.style[binding.arg] = binding.value + 'px';
      }
    });
    app.mount('#root');
  </script>
</body>
</html>

teleport 传送门

将里面包裹的元素传送至对应的元素下

<!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">
  <title>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: red;
      width: 200px;
      height: 200px;
    }

    .mask {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background: #000;
      opacity: .5;
    }
  </style>
</head>

<body>
  <div id="root"></div>
  <script>
    const app = Vue.createApp({
      // 还可以用 id 传送
      template: `
        <div class="box">
          <teleport to="body">
            <div class="mask"></div>
          </teleport>
        </div>
      `
    });
    app.mount('#root');
  </script>
</body>

</html>

render 函数

vue 渲染过程
template -> render -> h -> 虚拟 DOM(JS 对象) -> 真实 DOM -> 展示到页面上

  • 内容变量为字符串
const app = Vue.createApp({
 template: `<my-title :level="1">hello</my-title>`
});
app.component('my-title', {
  props: ['level'],
  render() {
    const { h } = Vue;
    return h('h' + this.level, {}, this.$slots.default());
  }
});
app.mount('#root');
  • 内容变量为数组
const app = Vue.createApp({
template: `<my-title :level="1">hello</my-title>`
});
app.component('my-title', {
  props: ['level'],
  render() {
    const { h } = Vue;
    return h('h' + this.level, {}, [this.$slots.default(), h('h4', {}, 'hello world')]);
  }
});
app.mount('#root');

插件的定义和使用

const Plugin = {
 install(app, options) {
    app.provide('count', 100);
    app.config.globalProperties.$sayHello = 'hello world';
  }
}
const app = Vue.createApp({
  template: `<div><my-title /></div>`
});
app.component('my-title', {
  inject: ['count'],
  template: `<div>{{count}}</div>`,
  mounted() {
    console.log(this.$sayHello);
  }
});
app.use(Plugin, { name: 'jk' });
app.mount('#root');

插件实例，数据验证

const app = Vue.createApp({
  data() {
    return {
      name: 'twenj',
      age: 28
    }
  },
  rules: {
    name: {
      validate: name => name.length > 4,
      message: '姓名长度过短'
    },
    age: {
      validate: age => age > 25,
      message: '年龄过小'
    }
  },
  template: `<div>name: {{name}}, age: {{age}}</div>`
});
// 插件实现的另一种方法
const validatePlugin = (app, options) => {
  app.mixin({
    created() {
      const rules = this.$options.rules;
      for (const key in rules) {
        this.$watch(key, (newVal) => {
          if (!rules[key].validate(newVal)) {
            console.log(rules[key].message);
          }
        })
      }
    }
  });
}
app.use(validatePlugin);
const vm = app.mount('#root');

Composition API

setup

它是 Composition API 最核心的东西，它里面不能用 this，他 return 的东西会挂到外部，可以被模版所使用，他不能用实例上的方法，但是实例上的方法可以调用它。

const app = Vue.createApp({
	template: `
		<div @click="handleClick">{{name}}</div>
	`,
	methods: {
		test() {
			console.log(this.$options.setup());
		}
	},
	mounted() {
		this.test();
	},
	// created 实例被完全初始化之前
	setup(props, context) {
		return {
			name: 'zhangsan',
			handleClick: () => {
				alert(123);
			}
		};
	}
});
const vm = app.mount('#root');

ref, reactive 响应式的引用

原理，通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新
ref 处理基础类型的数据
reactive 处理非基础类型的数据

  1. ref
const app = Vue.createApp({
  template: `<div>{{name}}</div>`,
  setup() {
    const { ref } = Vue;
    // proxy, 'jack' 变成 proxy({value: 'jack'}) 这样的一个响应式引用
    const name=ref("jack");
    setTimeout(() => {
      name.value = 'tom';
    }, 2000);

    return {
      name
    }
  }
});
const vm = app.mount('#root');
  1. reactive
const app = Vue.createApp({
 template: `<div>{{nameObj.name}}</div>`,
  setup(props, context) {
    const { reactive } = Vue;
    // proxy, {name: 'jack'} 变成 proxy({name: 'jack'}) 这样的一个响应式引用
    const nameObj = reactive({name: 'jack'});

    setTimeout(() => {
      nameObj.name = 'tom';
    }, 2000);
    return {
      nameObj
    }
  }
});
const vm = app.mount('#root');
  • readonly
const app = Vue.createApp({
 template: `<div>{{nameObj.name}}</div>`,
  setup(props, context) {
    const { reactive } = Vue;
    // proxy, {name: 'jack'} 变成 proxy({name: 'jack'}) 这样的一个响应式引用
    const nameObj = reactive({name: 'jack'});
    const copyNameObj = readonly(nameObj);

    setTimeout(() => {
      nameObj.name = 'tom';
      copyNameObj.name = 'tom';
    }, 2000);
    return {
      nameObj
    }
  }
});
const vm = app.mount('#root');
  1. toRefs
const app = Vue.createApp({
  template: `<div>{{name}}</div>`,
  setup(props, context) {
    const { reactive, toRefs } = Vue;
    // proxy, {name: 'jack'} 变成 proxy({name: 'jack'}) 这样的一个响应式引用
    const nameObj = reactive({name: 'jack'});

    setTimeout(() => {
      nameObj.name = 'tom';
    }, 2000);

    // toRefs 会将 proxy({name: 'jack'}) 变成
    // {
    //   proxy({name: 'jack'})
    // }
    const { name } = toRefs(nameObj);
    return {
      name 
    }
  }
});
const vm = app.mount('#root');

toRef 以及 context 参数

  1. toRef
    不建议使用
const app = Vue.createApp({
  template: `<div>{{age}}</div>`,
  setup(props, context) {
    const { reactive, toRef } = Vue;
    // proxy, {name: 'jack'} 变成 proxy({name: 'jack'}) 这样的一个响应式引用
    const nameObj = reactive({name: 'jack'});

    // toRefs 会将 proxy({name: 'jack'}) 变成
    // {
    //   proxy({name: 'jack'})
    // }
    const age = toRef(nameObj, 'age');

    setTimeout(() => {
      age.value = 20;
    }, 2000);

    return {
      age 
    }
  }
});
const vm = app.mount('#root');
  1. context
const app = Vue.createApp({
	template: `<child />`,
});
app.component('child', {
	template: `<div>child</div>`,
	setup(props, context) {
		const { attrs, slots, emit } = context;
		console.log(attrs);
		slots.default();
		emit('change');
	}
});

Composition API 实例 todolist

const listEffect = () => {
  const { reactive } = Vue;
  const list = reactive([]);

  const addListItem = (item) => {
    list.push(item);
  }

  return { list, addListItem }
}
const app = Vue.createApp({
  setup() {
    const { ref } = Vue;
    let inputValue = ref('');
    
    const { list , addListItem } = listEffect();

    const handleSubmit = () => {
      addListItem(inputValue.value);
      inputValue.value = '';
    }

    return {
      list,
      inputValue,
      handleSubmit
    }
  },
  template: `
    <div>
      <input v-model="inputValue">
      <button type="button" @click="handleSubmit">提交</button>
    </div>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
  `
});
const vm = app.mount('#root');

Composition API 的计算属性

  • 只有一个函数
const app = Vue.createApp({
  setup() {
    const { ref, computed } = Vue;
    const count = ref(0);

    function handleClick () {
      count.value += 1;
    }
    const countAddFive = computed(() => {
      return count.value + 5;
    });

    return { count, handleClick, countAddFive };
  },
  template: `<div @click="handleClick">{{count}} -- {{countAddFive}}</div>`
});

const vm = app.mount('#root');
  • 分别有 get 和 set 方法
const app = Vue.createApp({
  setup() {
    const { ref, computed } = Vue;
    const count = ref(0);

    function handleClick () {
      count.value += 1;
    }
    const countAddFive = computed({
      get() {
        return count.value + 5;
      },
      set(param) {
        count.value = param - 5;
      }
    });

    setTimeout(() => {
      countAddFive.value = 100;
    }, 3000)

    return { count, handleClick, countAddFive };
  },
  template: `<div @click="handleClick">{{count}} -- {{countAddFive}}</div>`
});

const vm = app.mount('#root');

watch 侦听器

  • 具备一定的惰性 lazy
  • 参数可以拿到原始值和当前值
  • 可以侦听多个数据的变化，用一个侦听器承载
const app = Vue.createApp({
  setup() {
    const { ref, watch } = Vue;
    const name = ref('');

    watch(name, (currentValue, prevValue) => {
      console.log(currentValue, prevValue);
    });
    return {name}
  },
  template: `
    <div>name: <input v-model="name"></div>
    <div>name is {{name}}</div>  
  `
});
const vm = app.mount('#root');
  • 对象的一个键值对的监听，用函数监听
const app = Vue.createApp({
  setup() {
    const { reactive, watch, toRefs } = Vue;
    const nameObj = reactive({name: ''});

    watch(() => nameObj.name, (currentValue, prevValue) => {
      console.log(currentValue, prevValue);
    });
    const { name } = toRefs(nameObj);
    return {name}
  },
  template: `
    <div>name: <input v-model="name"></div>
    <div>name is {{name}}</div>  
  `
});
const vm = app.mount('#root');
  • 一个侦听器，侦听多个值
const app = Vue.createApp({
  setup() {
    const { reactive, watch, toRefs } = Vue;
    const nameObj = reactive({name: 'jack', englishName: 'tom'});

    watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, prevEng]) => {
      console.log(curName, prevName, '-----', curEng, prevEng);
    });
    const { name, englishName } = toRefs(nameObj);
    return {name, englishName}
  },
  template: `
    <div>name: <input v-model="name"></div>
    <div>name is {{name}}</div>  
    <div>englishName: <input v-model="englishName"></div>
    <div>name is {{englishName}}</div>  
  `
});
const vm = app.mount('#root');

watchEffect

  • watchEffect 侦听器，偏向于 effect
  • 立即执行，没有惰性 immediate
  • 不需要传递你要侦听的内容，会自动感知代码依赖，不需要传递很多参数，只要传递一个回调函数
  • 不能获取之前数据的值
const app = Vue.createApp({
  setup() {
    const { reactive, watch, toRefs } = Vue;
    const nameObj = reactive({name: 'jack', englishName: 'tom'});

    watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, prevEng]) => {
      console.log(curName, prevName, '-----', curEng, prevEng);
    });

    watchEffect(() => {
      console.log(nameObj.name);
      console.log(nameObj.englishName);
    });
    const { name, englishName } = toRefs(nameObj);
    return {name, englishName}
  },
  template: `
    <div>name: <input v-model="name"></div>
    <div>name is {{name}}</div>  
    <div>englishName: <input v-model="englishName"></div>
    <div>name is {{englishName}}</div>  
  `
});
const vm = app.mount('#root');

停止侦听器

const app = Vue.createApp({
  setup() {
    const { reactive, watch, toRefs } = Vue;
    const nameObj = reactive({name: 'jack', englishName: 'tom'});

    const stop1 = watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, prevEng]) => {
      console.log(curName, prevName, '-----', curEng, prevEng);
      setTimeout(() => {
        stop1();		// 停止侦听器
      }, 5000);
    });

    const stop = watchEffect(() => {
      console.log(nameObj.name);
      console.log(nameObj.englishName);
      setTimeout(() => {
        stop();			// 停止侦听器
      }, 5000);
    });
    const { name, englishName } = toRefs(nameObj);
    return {name, englishName}
  },
  template: `
    <div>name: <input v-model="name"></div>
    <div>name is {{name}}</div>  
    <div>englishName: <input v-model="englishName"></div>
    <div>name is {{englishName}}</div>  
  `
});
const vm = app.mount('#root');

使 watch 变成非惰性的

watch([() => nameObj.name, () => nameObj.englishName], ([curName, curEng], [prevName, prevEng]) => {
  console.log(curName, prevName, '-----', curEng, prevEng);
}, { immediate: true });

Composition API 生命周期函数

const app = createApp({
	setup() {
		const { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onRenderTracked, onRenderTriggered } = Vue;
		onBeforeMount(() => {
			console.log('onBeforeMount');
		});
		onMounted(() => {
			console.log('onMounted');
		});
		onBeforeUpdate(() => {
			console.log('onBeforeUpdate');
		});
		onUpdated(() => {
			console.log('onUpdated');
		});
		onBeforeUnmount(() => {
			console.log('onBeforeUnmount');
		});
		onUnmounted(() => {
			console.log('onUnmounted');
		});
		// 每次渲染后重新收集响应式依赖
		onRenderTracked(() => {
			console.log('onRenderTracked');
		});
		// 每次触发页面重新渲染时自动执行
		onRenderTriggered(() => {
			console.log('onRenderTriggered');
		});
	}
});

provide, inject 跨组件传值

const app = Vue.createApp({
 setup() {
    const { ref, provide, readonly } = Vue;
    const name = ref('jack');
    provide('name', readonly(name));
    provide('changeName', newName => {
      name.value = newName;
    });
  },
  template: `<child />`
});
app.component('child', {
  setup() {
    const { inject } = Vue;
    const name = inject('name');
    const changeName = inject('changeName');

    const handleClick = () => {
      changeName('tom');
    }
    return { name, handleClick };
  },
  template: `<div @click="handleClick">{{name}}</div>`
});
const vm = app.mount('#root');

获取 DOM 节点

const app = Vue.createApp({
 setup() {
    const { ref, onMounted } = Vue;
    const hello = ref(null);

    onMounted(() => {
      console.log(hello.value);
    });
    return {
      hello
    }
  },
  template: `<div ref="hello">hello world</div>`
});

const vm = app.mount('#root');
夏葵sai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
一文看懂vue3中setup()和 ＜script setup＞＜script＞的区别
Ajekseg的博客
03-06 2744
setup () setup () 是vue3新增加的组件。vue3采用了组合式 API ，为了使用组合式API，我们需要一个入口，在vue3组件中，称之为setup。 (简单点来说，就是vue2里面的data，method，computed···全不要啦，所有数据方法全写在setup里) 来看一个简单的例子: <template> <div class="box"> <h1 style="text-align: center;">{{testData}}&l
VUE3【学习三】：setup方法，三个插槽的使用及区别，父子组件传值
weixin_42486438的博客
04-04 5203
setup方法，三个插槽的使用及区别，父子组件传值
vue3.0中setup的细节问题
m0_52518047的博客
07-16 2094
vue3.0中setup的主要作用，执行时机以及和vue2.0模板之间的关联
Vue3.0的setup执行时机和注意点
weixin_45389051的博客
10-28 1万+
首先说一下执行时机 1.时机位于beforeCreate和created之间 2.beforeCreate:表示组件刚刚被创建出来，组件的data和methods还没初始化好 3.created:表示组件刚刚被创建出来，并且组件的data和methods已经初始化好 注意点 1.由于在执行setup函数时候，还没有执行created生命周期方法,所以在setup函数中，是无法使用data和methods 2.由于我们不能在setup函数中使用data和methods,所以VUE为了避免我们错误的使用,它直接
VUE3中setup ref return取代vue2中的data return
x413666的博客
01-04 9252
<div>{{num}}</div> import {reactive,computed} from 'vue' setup(){ //第一种写法 可以用ref()形式 const num=ref(0) //第二种方法可以用reactive的形式 const data=reactive({ name:'123456', count:1, add:()=>{data.name===''}, .
vue2 dev-tools
09-21
Vue2 Dev-Tools 是一个专为Vue2应用开发设计的强大浏览器扩展，它允许开发者在Chrome浏览器中对Vue应用程序进行调试、性能分析和状态管理。 Vue2 Dev-Tools 的主要功能包括： 1. **组件树视图**：此工具显示了当前...
vue-select2:Vue中的select2组件
05-05
Vue Select2组件 该项目是使用版本2.9.1生成的。 指示 该项目旨在显示如何使用v-select2-component。 如果要在Vue 3.0中使用它，请检查 。 v-select2组件 源代码位于： : 。 相关版本 Vue-Select2-Component基于...
Vue2离线文档.rar
03-27
"Vue2离线文档.rar" 提供的是Vue 2的离线版本，非常适合在没有网络连接的情况下学习和查阅Vue 2的相关知识。 Vue 2 的核心特性包括但不限于以下几点： 1. **声明式渲染**：Vue 使用模板语法，允许开发者声明式地...
前端vue2智慧商城项目
10-23
【Vue2智慧商城项目】是一个基于Vue.js框架的前端应用，使用了Vue2的核心特性以及相关的生态工具，如Vuex状态管理库、Vue-Router路由管理和Element-UI组件库，来构建一个完整的网上购物平台。这个项目展示了Vue2在...
vue2svgicon组件
08-12
Vue2SVGIcon组件是基于Vue.js框架的一个实用工具，它允许开发者在Vue应用程序中方便地引入和使用SVG图标。SVG（Scalable Vector Graphics）图标因其可缩放性、清晰度和良好的性能，在Web开发中越来越受欢迎。Vue2...
vue3.0中setup使用
热门推荐
前端小99的博客
10-26 6万+
一、setup函数的特性以及作用 　　可以确定的是 Vue3.0 是兼容 Vue2.x 版本的 也就是说我们再日常工作中 可以在 Vue3 中使用 Vue2.x 的相关语法 但是当你真正开始使用 Vue3 写项目时 你会发现他比 Vue2.x 方便的多 　　Vue3 的一大特性函数 ---- setup 　　1、setup函数是处于 生命周期函数 beforeCreate 和 Created 两个钩子函数之间的函数 也就说在 setup函数中是无法 使用 data 和 methods 中的数据和方法的
Vue核心：组件化编程（脚手架） - 万字总结精华整理
做一只猫的博客
08-03 933
Vue组件化编程
Vue源码剖析-模板编译和组件化（22）
5coder的大前端进阶之路-个人博客网站：blog.5coder.cn
07-18 275
Vue源码剖析-模板编译和组件化 模板编译 模板编译的主要目的是将模板(template)转换为渲染函数(render) <div> <h1 @click="handler">Title</h1> <p>some content</p> </div> 渲染函数 h()函数的作用最终回到用vm.$createElmnent()生成VNode render(h) { return h('div', [ h(
vue基础总结
weixin_46413834的博客
01-17 616
1.vue含义 渐进式javascript框架,而且自底向上,增量开发,组件集合,便于复用 2. Vue和jQuery区别是什么? jQuery应该算是一个插件, 里面封装了各种易用的方法, 方便你使用更少的代码来操作dom标签 Vue是一套框架, 有自己的规则和体系与语法, 特别是设计思想MVVM, 让数据和视图关联绑定, 省略了很多DOM操作. 然后指令还给标签注入了更多的功能 3.vue-cli的好处和能力 - 统一的项目结构(文件夹+文件+配置代码) - 开发过程中的webpac
vue利用渲染函数创建弹窗组件，完美支持传值和事件监听(Vue2.X)
IT飞牛
08-24 3338
弹窗组件和其他组件不同，在页面初始化的时候，页面dom结构中是不存在弹窗组件的div节点，只有在调用时弹窗组件的div在会被动态的添加到页面中，并且当删除时，也需要在页面中删除； 结合弹窗组件的使用场景，比较合适的实现是使用createElement渲染函数，渲染函数可以动态的创建组件，并且通过props、on属性，传入组件的标题、内容，监听组件的事件； 观察看下面这段代码： const vm = new Vue({ render: h => { .
VB+ACCESS宾馆客房管理系统(系统+论文+封面).zip
最新发布
08-16
计算机毕业设计资源包含（项目部署视频+源码+LW+开题报告等等），所有项目经过助教老师跑通，有问题可以私信博主解决，可以免费帮部署。
自密实混凝土的研究进展.doc
08-16
自密实混凝土的研究进展.doc
基于Andriod条码识别的商品价格查询软件APP设计与实现.docx
08-16
基于Andriod条码识别的商品价格查询软件APP设计与实现.docx
基于python的人脸控制俄罗斯方块小游戏
08-16
基于python的人脸控制俄罗斯方块小游戏
掌握Vue.js 2：一步步学习之旅
在“Buzzwords”部分，作者可能讨论了与Vue.js相关的技术术语，如MVVM（Model-View-ViewModel）、虚拟DOM（Virtual DOM）和指令系统（如v-if、v-for）。Vue.jshistory章节可能回顾了Vue.js的发展历程，强调了2.0版本...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值