数据挂载点的选择

v-if 会清除dom  v-show隐藏但保留DOM

v-for 用:key提高性能？

computed 计算属性

watch 侦听器

v-html 会被转义   v-text  不会；{{}} 插值表达式，vue不面向DOM编程，面向数据。

<div id="root">
    <div>
        <input v-model ="inputVulue"/>
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <todo-item
                v-for="(item,index) of list"
                :key="index"
                :content ='item'
        >
        </todo-item>
    </ul>
</div>
<script>
    //全局组件  小组件接收从外部传进来的数据，用props:[]接收
    Vue.component('todo-item',{
        props:['content'],
        template:'<li>{{content}}</li>'
    });
    /*//局部组件
    var TodoItem ={
        template:'<li>item</li>'
    };*/
    new Vue({
        el: "#root",
        /*components:{
            'todo-item':TodoItem
        },*/
        data: {
            inputVulue: '',
            list: []
        },
        methods: {
            handleSubmit: function () {
                if(this.inputVulue){
                    this.list.push(this.inputVulue);
                    this.inputVulue = '';
                }
            }
        }
    })
</script>

<div id="root">
    <div>
        <input v-model ="inputVulue"/>
        <button @click="handleSubmit">提交</button>
    </div>
    <ul>
        <li v-for="(item,index) of list" :key="index">{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            inputVulue: 'hello',
            list: []
        },
        methods: {
            handleSubmit: function () {
                if(this.inputVulue){
                    this.list.push(this.inputVulue);
                    this.inputVulue = '';
                }
            }
        }
    })
</script>

v-on @

v-bind  ：

v-modal

computed   计算属性  如果计算的属性都没改变，值会使用上次计算属性的缓存结果，不会重新计算，性能较高。

watch   侦听属性   侦听器  某一个属性发生变化，或者计算属性发生变化

v-html:被转译

v-text：不被转译

v-on:click=" 方法名"  新的模板指令，只绑定事件；绑定的事件是click

方法定义在：实例中的methods:{}中

new   Vue({

methods: {

组件(component)也是vue一个实例反过来每个Vue实例也是一个组件(component)

556666

v-on @

v-bind  ：

v-modal

computed   计算属性

watch   侦听属性

computed 计算属性

computed:{

    fullname: function(){

        return this.firstname  +  this.lastname

    }

}