Vue学习—接触Vue

一、插件vue-devtools

在学习Vue过程中，谷歌vue-devtools插件将会对我们有帮助。
至于怎么安装谷歌插件，大家都懂，这里不做讲解。
安装成功后如图：

当我们访问一些Vue架构的网站时，这个插件会进行提示：

二、使用Vue

1.开始使用

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({})

1.el

类型： 字符串
全称：element（元素）
作用：配置控制的元素，表示Vue要控制的区域，值为css选择器

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

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

被Vue控制的区域，我们称之为模板

2.$mount

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

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

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

• 问：和el有什么不同？

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

3.data

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

    const vm = new Vue({
      el: '#app',
      data: {
        msg: '使用Vue添加文本'
      }
    })
  

2.插值表达式

以往我们往某个元素添加数据时，使用原生js的话

<div id="app"></div>
<script>
    const oDiv = document.getElementById('app');
    const data = '这是一个div容器';
    oDiv.innerText = data;
</script>

现在通过Vue模板，利用差值表达式

<div id="app">{{ msg }}</div>
<script>
const vm = new Vue({
    el: '#app',//等同vm.$mount('#app'),控制id为app的区域
    data: {
        msg: '使用Vue添加文本'
    }
})
</script>

1.数字、字符串、boolean、array、object，unefined\null

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

  <div id="app">
    {{ 1314520 }}
    {{ 'jimo、xun_xing' }}
    {{ true }}
    {{ [1,'jimo',{a: null}] }}
    {{ {name: '邓旭明', age: 80, height: '140cm', weight: '100kg'} }}
  </div>

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

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

2.表达式

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

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

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

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

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

3.经过声明的数据

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

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

  const vm = new Vue({
    el: '#app',
    data: {
      mrDeng: '老哥'
    }
  })

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

<!-- 此时不报错啦 -->
<!-- 在作用域上找不到，报错 -->
<!-- 在原型链上找不到，值为undefined -->
<!-- undefined为js基本类型值，所以就不报错啦 -->

<div id="app">
    {{ person.sex }}//没有sex属性
</div>
<script>
    const eg = new Vue({
        el: '#app',
        data: {
            msg: '使用Vue添加文本',
            person: {
                name: 'jimo',
                age: 18
            }
        }
    })
</script>