vue 笔记

• Z时代
• 2024-01-10
• 分类：综合

<div id="root">
    <div>
        <input v-model="inputValue" />
        <button @click="onAdd">submit</button>
    </div>
    <ul>
        <todo-item
            v-for="(item, index) of list"
            :key="index"
            :content="item"
            :index="index"
            @delete="onDelete"
        ></todo-item>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
Vue.component('todo-item', {
    props: ['content', 'index'],
    template: '<li>{{content}} <a href="javascript:;" @click="onClick">删除</a></li>',
    methods: {
      onClick: function(){
        this.$emit('delete', this.index)
      }  
    },
});
new Vue({
    el:"#root",
    data:{
        inputValue: '',
        list: [],
    },
    methods: {
        onAdd: function(){
            if(this.inputValue == '') return;
            this.list.push(this.inputValue);
            this.inputValue = '';
        },
        onDelete: function(index){
            this.list.splice(index, 1);
        },
    }
})
/*
white-space: pre-line;
var app = new Vue({
  el: '#id',
  //属性注入
  props: {
  },
  data: {
    message: 'Hello Vue!'
  },
  //方法
  methods: {
  },
  //计算属性
  //计算属性与方法的区别在于,它是基于它们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求值,性能更优。
  computed: {
    fullName: {
        get: function () {
          return this.firstName + ' ' + this.lastName
        },
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
  }
  },
  //侦听属性
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
});
Vue.component('demo-simple', {});
绑定
v-bind:title=""
表单输入绑定
v-model=""
遍历
v-for="(item, key, index) of items"
v-for="(item, index) of items"
v-for="item of items"
绑定事件
v-on:click=""
v-if=""
v-else-if=""
v-else
<template v-if=""></template>
v-show=""
vm.$data
vm.$el
$event
vm.$watch('a', function(newVal, oldVal){});
一次性
<span v-once>{{ msg }}</span>
以标准的 html 解析 
v-html="html"
.prevent 是修饰符,用于阻止浏览器默认行为
v-on:submit.prevent="onSubmit"
<div class="static" v-bind:class="{ active: isActive, danger: hasError }"></div>
*/
</script>

以上是 vue 笔记 的全部内容， 来源链接： utcz.com/z/376807.html