vue 笔记

<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>