开始学习Vue

开始学习Vue

1. 引入vue.js

   官网：vuejs.org

   链接: https://https://cn.vuejs.org

   开发版本：包含完整的警告和调试模式

   生产版本：删除了警告，体积更小

2. 引入vue.js后，给我们提供了一个构造函数 Vue

3. 在js中，new Vue()

4. new Vue() 后会返回一个vue实例对象，我们用变量接着它

5. const vm = new Vue()

6. 传递一个配置对象{} – > const vm = new Vue({})

el

类型： 字符串

全称：element（元素）

作用：配置控制的元素，表示Vue要控制的区域，值为css选择器

  <!-- 被Vue控制的区域，我们称之为模板 -->
  <div id="app"></div>

  const vm = new Vue({
    el: '#app' // 控制id为app的元素
  })

$mount

• 作用和el一致，都是配置控制的元素，使用哪个都可以，二选一

    <div id="app"></div>
  

    const vm = new Vue({})
    vm.$mount('#app');
  

• 问：和el有什么不同？

  答：本质上没什么不同，$mount为手动挂载，在项目中有时要进行延迟挂载，比如有时要在挂载之前进行一些其他的操作，比如判断等等（但是，这样做的时候很少，比邓哥回家的次数还少，emmmmm）

data

• 类型：对象
• 作用：存放要用到的数据，数据为响应式的

    const vm = new Vue({
      el: '#app',
      data: {
        'mrDeng': '风姿绰约、花枝招展'
      }
    })
  

插值表达式

• 使用方法： {{ }}

• 可以将vue中的数据填在插值表达式中，如：

    <div id="app">{{ mrDeng }}</div>
  

    const vm = new Vue({
      el: '#app',
      data: {
        mrDeng: '小明：风姿绰约、花枝招展'
      }
    })
  

• 除了填写data之外，还可以直接填写数据值（数字、字符串、布尔值、undefined、null、数组、对象），如:

    <div id="app">
      {{ 5201314 }}
      {{ '婀娜多姿、亭亭玉立' }}
      {{ true }}
      {{ ['小明', '小刘', '小宝'] }}
      {{ {name: '小明', age: 80, height: '140cm', weight: '100kg'} }}
    </div>
  

• 注意：在插值表达式中直接书写对象类型值时，不要将三个{}连在一起，这样会报错，如：

    <div id="app">
      <!-- 这样可是不行滴 -->
      {{{name: '小明', age: 80, height: '140cm', weight: '100kg'}}} 
    </div>
  

• 还可在插值表达式中写表达式，如：

    <div id="app">
      <!-- 运算表达式 -->
      {{ 'you' + 'me' }}
      {{ 10 - 5 }}
      {{ 100 * 7 }}
      {{ 1000 / 12 }}
      <!-- 逻辑表达式 -->
      {{ liu || li }}
      {{ deng && liu }}
      {{ !wang }}
      <!-- 三元表达式 -->
      {{ 1 + 1 === 3 ? '小明' : '正常人' }}
      <!-- 函数调用也是表达式，也可以使用,这个以后再学哈... -->
    </div>
  

• 还可以填写其他的吗？不可以，No，以下这些都是不行滴：

    <div id="app">
      <!-- 这是语句，不可以写在插值表达式中 -->
      {{ var Deng = 'shuaige'; console.log(deng) }}
      <!-- 流程控制也不可以 -->
      {{ if(Deng.looks === 'shuai'){ console.log('不可能')} }}
    </div>
  

• 记住：插值表达式中，可以写：data、js数据、表达式，其他的想都不要想。

• 注意，只要插值表达式中使用了数据，必须在data中声明过，否则会报错

    <!-- 此时就报错啦，因为mrCheng，未在data中声明过 -->
    <div id="app">
      {{ mrCheng }}
    </div>
  

    const vm = new Vue({
      el: '#app',
      data: {
        mrDeng: '小明：风姿绰约、花枝招展'
      }
    })
  

• 还有另外一种可能，使用了未被声明过的数据，不报错：

    <!-- 此时不报错啦，why？ -->
    <!-- 在作用域上找不到，报错 -->
    <!-- 在原型链上找不到，值为undefined -->
    <!-- undefined为js基本类型值，所以就不报错啦 -->
    <div id="app">
      {{ mrDeng.wife }}
    </div>
  

    const vm = new Vue({
      el: '#app',
      data: {
        mrDeng: {
          name: '邓旭明', 
          age: 80, 
          height: '140cm', 
          weight: '100kg'
        }
      }
    })