Vue超详细知识点学习（第一节）

学习内容：	Vue全家桶（vue/vue-router/vuex/axios）

1，MVVM

学习vue之前 首先了解什么是MVVM架构模式，MVVM，是一种架构模式，也有人叫做设计模式。
M：model数据类型。

V：view视图（页面） VM：ViewModel 视图模型 MVVM通过‘数据双向绑定’让数据自动滴双向同步。
V（修改视图）=> M（数据自动同步） M（修改数据）=> （视图自动同步）。

Vue就是一个MVVM的框架，在vue中，通过数据驱动视图，不建议想着怎么操作dom元素，而是想着如何操作数据！！

2，vue初体验

安装 yarn add vue 或 npm install vue

<div id="app">
    <!-- 3.可以通过{{}}显示vue中的数据 -->
    <h1>{{msg}}</h1>
</div>

<!-- 1. 引入vue.js -->
<script src="./node_modules/vue/dist/vue.js"></script>

<script>
    // 2. 创建vue实例，需要指定el和data属性
    let vm = new Vue({
        // 指定vue监管的视图区域,只要id为app的div内部才会受vue的管理
        el: '#app',
        // 提供了vue中使用的数据
        data: {
            msg: 'hello vue'
        }
    })
</script>

使用 插值表达式：{{}} 也叫Mustache语法。
作用：使用data中的数据渲染模板。
注意点：使用的数据在data总要存在，且data中数据变化了，插值处的内容就会更新。
{{}} 中只能出现JavaScript表达式，不能写js语句

<h1>Hello, {{ msg }}.</h1>
<p>{{ isOk ? 'yes': 'no' }}</p>
<p>{{ 1 + 2 }}</p>

<!-- ！！！错误示范！！！ -->
<h1 >{{ if(){} }}</h1>
<h1 title="{{ err }}"></h1>

好了，今天先对vue有个初步的认知，下一节我们学习vue的指令！