Vue学习心得

Vue:一款渐进式JavaScript框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了Angular (模块化)和React (虚拟DOM)的优点;

mvvm
●Model:模型层，在这里表示JavaScript对象
●View:视图层,在这里表示DOM (HTML操作的元素)
●ViewModel:连接视图和数据的中间件，Vue.js就是MVVM中的ViewModel层的实现者
在MVVM架构中，是不允许数据和视图直接通信的，只能通过ViewModel来通信，而ViewModel就是定义了一个Observer观察者
●ViewModel能够观察到数据的变化，并对视图对应的内容进行更新
●ViewModel能够监听到视图的变化，并能够通知数据发生改变

MVVM模式和MVC模式一样，主要目的是分离视图(View)和模型(Model),有几大好处
●低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的
View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。
●可复用:你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。
●独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
●可测试:界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

Vue.js是一个MVVM框架，即数据双向绑定,即当数据发生变化的时候,视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。核心是实现DOM监听与数据绑定

指令带有前缀v-

悬停显示信息
悬停

if判断

<div id="app">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>No</h1>
</div>

for

<div id="app">
    <li v-for="text in allTexts">
        {
  {text.message}}牛
    </li>
    <span v-bind:title="allTexts[0].message">悬停</span>
</div>
<script>
    let vm = new Vue({
    
        el: "#app",
        data: {
    
            allTexts: [
                {
    message: "1"},
                {
    message: "2"},
                {
    message: "3"},
            ]
        }
    });
</script>

v-on指令监听dom事件，绑定一个事件，简写为@

<div id="app">
    {
  {message}}

    <button v-on:click="greet()">点击</button>
</div>

<!--1.导入vue.js-->
<script src=