Vue知识点小总结 （适合初学者用），最近自己也在自学Vue，这是一个我自己总结的一部分内容，感觉对初学者应该会有一点帮助。不足的地方希望大家多多指教

1、MVC 和 MVVM 的区别。

2、Vue中代码的基本结构。

    1> 先导入Vue.js  
    2> 
    <div id="#app"></div>
    <script>
        let vm= new Vue({
            el:'#app',
            data:{
                msg:'这里面是操控区域中要用的数据'
            },
            template:`
                <div>
                    <h3> 爱你啊</h3>
                </div>
            `,
            methods{
                function(){
                    console.log('这里面是操控区域要使用的自定义方法')
                }
            }
        })
    </script>

3、插值表达式  

 1> v-cloak 覆盖元素中原本的内容会把输出的内容当作是文本输出.
 2> v-text 覆盖元素中原本的内容会把输出的内容当作是文本输出.
 3> v-html 覆盖元素中原本的内容会把输出的内容当作是html输出 
 4> v-bind( : ) 是Vue中一个绑定属性的指令 ，单向
 5> v-on( @ ) 事件绑定机制
 6> v-model 双向数据绑定  只能用在表单元素中
 7> v-for   循环对象中的数据
 8> v-if    v-if="ture /  false"  推荐用于删除
 9> v-show  v-show="ture / false" 推荐用于切换      

4、事件修饰符 ：
 
 1> .stop 阻止事件冒泡
 2> .prevent 阻止默认行为
 3> .capture 使用捕获事件触发机制
 4> .self 实现只点击当前元素触发机制
 5> .once 只触发一次事件处理函数

 5、 el  指定控制区域
    data 是个对象，指控制区域要使用的数据
    methods 自定义方法

6、在 vm实例中，如果要访问 data 上的数据 或者要访问  methods 中的方法，必须带上 this

7、在 v-for 中  要会使用 key 的属性 （直接收string / number）

    1>  v-for(item in list)
    2>  v-for((item,i) in list)  i是索引值

            list是data 中的数据,可以是数组，对象，数值

             // 数组类型数据
                list:[1,2,3,5,7,7],

                //对象
                list2:[
                    {id:1,name:'zs1'},
                    {id:2,name:'zs2'},
                    {id:3,name:'zs3'},
                    {id:4,name:'zs4'},
                ],
                //对象
                list3:[
                    {
                    id:1,
                    age:30,
                    sex:'男'
                }],
                //迭代数字
                list4:[{

                }]
            },

8、v-model 只能应用于表单元素
    v-model="msg"

9、在Vue中绑定样式的两种方法，

   1>  v-bind:class 有三种写法；
        1、class="['red','bg']"    写在一个数组中
        2、class="['red',flag?'bg':'']"   用三目运算符写
        3、class="['red',{'bg':flag}]"   用对象的方式写

   2>  v-bind:style 

       <div id="app">
        <h2 :style="styleobj1">爱你啊!</h2>
        <p :style="[styleobj1,styleobj2]">爱你啊!</p>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                styleobj1: { color: 'pink' },
                styleobj2: { background: 'blue' }
            },
            methods: {

            }
        })
    </script>