接触Vue

一、插件vue-devtools二、使用Vue1.开始使用1.`el`2.`$mount`3.data 2.插值表达式1.数字、字符串、boolean、array、object，unefined\null2.表达式3.经过声明的数据

一、插件vue-devtools

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

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

二、使用Vue

1.开始使用

引入vue.js

官网：vuejs.org 开发版本：包含完整的警告和调试模式 生产版本：删除了警告，体积更小

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

在js中，new Vue()

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

const vm = new Vue()

传递一个配置对象{} – > 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>