跳至主要內容

Vue

约 487 字大约 2 分钟...

基础知识

mounted 是生命周期函数,自动执行。

props 主要用于组件的传值,他的工作就是为了接收外面传过来的数据,与 data、el、ref 是一个级别的配置项。

按键、事件都可以加入修饰符open in new window,简化代码。

//从 Vue 对象中将 ref, reactive, readonly, toRefs 方法解构出来
const { ref, reactive} = Vue;

// setup
setup(props, context) {
  const { h } = Vue;
  const { attrs, slots, emit } = context;
  function handleClick() {
    emit('change');
  }
  return { handleClick };
},

v-model

v-model 双向绑定,可以让子组件向父组件传递参数。

// 传递单个参数 count
// template
<counter v-model="count" />
// component:传递参数必须为 `modelValue`,传递方法必须为 `update:modelValue`
app.component('counter', {
  props: ['modelValue'],
  methods: {
    handleClick() {
      this.$emit('update:modelValue', this.modelValue + 3);
    },
  },
  template: `
  <div @click="handleClick">{{modelValue}}</div>
`,
});

// v-model 传递多个参数 count 和 count1
// template
<counterx v-model:count="count" v-model:count1="count1" />
// component
app.component('counterx', {
  props: ['count', 'count1'],
  methods: {
    handleClick2() {
      this.$emit('update:count', this.count + 1);
    },
    handleClick3() {
      this.$emit('update:count1', this.count1 + 10);
    },
  },
  template: `
  <div @click="handleClick2">{{count}}</div>
  <div @click="handleClick3">{{count1}}</div>
`,
});

组件命名

全局组件,建议「小写字母单词,单次间用横线间隔」;局部组件,建议「每个单次都用大写字母开头(驼峰命名)」。按这个规则命名,Vue 才能自动转换。

// Vue 会自动将 Counter(局部组件)转为 counter(全局组件),将 HelloWorld(局部组件)转为 hello-world(局部组件)。
const Counter = {
  data() {
    return {
      count: 1,
    };
  },
  template: `<div @click="count += 1">{{count}}</div>`,
};

const HelloWorld = {
  template: `<div>hello world</div>`,
};

const app = Vue.createApp({
  // 引入局部组件(需放在引入之前)
  components: {
    // 手动定位
    // counter: Counter,
    // 'hello-world': HelloWorld,
    Counter,
    HelloWorld,
  },
  template: `
  <div>
    <hello-world />11111111
    <counter />222222
  </div>
`,
});

CDN 使用 vue

<script
  src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"
  type="application/javascript"
></script>
<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        message: "Hello Vue!",
      };
    },
  }).mount("#app");
</script>

使用 <div v-html="html"></div> 来引入 html 元素,功能类似于 innerHTML,不能加载外部 HTML,实现 <?php echo file_get_contents("https://docs.manictime.com/win-client/faq"); ?> 类似的功能。

已到达文章底部,欢迎留言、表情互动~
  • 赞一个
    0
    赞一个
  • 支持下
    0
    支持下
  • 有点酷
    0
    有点酷
  • 啥玩意
    0
    啥玩意
  • 看不懂
    0
    看不懂
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v3.1.3