【Vue】基础（一）初识Vue - 模板语法 - 数据绑定 - el与data的两种写法 - MVVM模型

1. 初识vue

1.1 vue是什么?

一套用于构建用户界面的渐进式javaScript框架。vue可以自底向上逐层的应用。

简单应用：只需要一个轻量小巧的核心库。

复杂应用：可以引用各式各样的vue插件。

1.2 vue特点

1. 采用组件化，提高代码复用率，让代码更好维护
2. 声明式编码，无需直接操作DOM，提高开发效率
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

示例代码

<!-- 准备好一个容器 -->
<div id="app">
    <h1>hello，{
  {name.toUpperCase()}}，{
  {address}}</h1>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false; // 阻止 vue 在启动时生成生产提示。

    // 创建Vue实例
    new Vue({
     
        el: '#app', // el用于当前Vue实例为那个容器服务，值通常为CSS选择器字符串
        data: {
      // data中用于存储数据，数据供el所指定的容器去使用，值暂时先写成一个对象
            name: 'China',
            address: '成都'
        }
    });
</script>

据以上示例代码总结如下：

• 想让Vue工作，必须创建一个Vue实例，且要传入一个配置对象。
• app容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法。
• app容器里的代码被称为【Vue模板】。
• Vue实例和容器是一一对应的。
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用。
• { {xxx}}是Vue的插值语法，xxx要写js表达式，且xxx可以自动读取到data中的所有属性。
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)。

2. Vue模板语法

Vue模板语法有2大类：

1. 插值语法

   功能：用于解析标签体内容。

   写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

2. 指令语法

   功能：用于解析标签(包括：标签属性，标签体内容，绑定事件…)

   举例：v-bind:href=“xxx” 或 简写为 :href=“xxx”，xxx同样要写js表达式，且可以直接读取到data中的所有属性。

   备注：Vue中有很多指令，且形式都是：v- 开头的，此处只是拿v-bind举例。

   toUpperCase() 方法用于把字符串转换为大写。

示例代码

<div id="app">
    <h1>插值语法</h1>
    <h3>您好！{
  {name}}</h3>
    <hr>
    <h1>指令语法</h1