vue学习开始

开始使用Vue

  1. 引入vue.js

    官网: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'
          }
        }
      })
    
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页