• 手机版

    扫码体验手机版

  • 微信公众号

    扫码关注公众号

游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服QQ

    2938366614

    电子邮件

    pcs2938366614@163.com
  • 友智园

    随时随地学习编程

  • 扫描二维码

    关注微信公众号

Lv.16 站长
1号会员,10762活跃度,2019/12/31 加入学习
  • 617发帖
  • 484主题
  • 6关注
  • 69839粉丝
官方账号
  • 虎虎生威

    2022虎年限定勋章
  • 满级大神

    用户达到16级即可
  • 老兵专属

    老用户专属勋章
  • 达人守护

    友智园守护达人
  • 牛气冲天

    2021新春活动专属
推荐课程更多
优秀讲师更多
课堂交流更多

Vue详细笔记

[复制链接]
友智君官方认证 实名认证 发表于 2022-7-24 13:49:12 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

开始使用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为手动挂载,在项目中有时要进行延迟挂载,比如有时要在挂载之前进行一些其他的操作,比如判断等等。

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>

    js代码:

      const vm = new Vue({
        el: '#app',
        data: {
          mrDeng: '友智园'
        }
      })
  • 还有另外一种可能,使用了未被声明过的数据,不报错:

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

    js代码:

      const vm = new Vue({
        el: '#app',
        data: {
          mrDeng: {
            name: '友智君', 
            age: 80, 
            height: '180cm', 
            weight: '100kg'
          }
        }
      })
客服QQ:2938366614
懒得打字嘛,点击右侧快捷回复 【友智园专属】
您需要登录后才可以回帖 登录 | 立即注册 手机动态码快速登录

本版积分规则

关于我们
  • 关注官方微信

  • QQ在线客服

    在线联系
  • 友智园
  • 山东省菏泽市


Copyright © 2019- PCS Rights Reserved