Vuejs的初体验

邂逅Vue.js中要学习的内容大纲：

1.初识Vue.js

(1)为什么学习Vue.js

(2)简单认识一下Vue.js

2.Vuejs安装方式

(1)CDN引入

(2)下载和引入

(3)NPM安装管理

3.Vue.js初体验

(1)Hello Vuejs

(2)Vue列表展示

(3)案例：计数器

4.Vuejs的MVVM

3-1.Vue.js初体验 响应

先来体验Vuejs的响应式：

首先来了解Es6中，let是定义变量，const是定义常量

const定义的是以后都不能修改的

新建一个HelloVuejs.html文件：

运行结果如下：

如果用js或者jQuery的逻辑方法写：

1.创建div元素，设置id属性

2.定义一个变量叫message

3.将message变量放在前面的div元素中显示

以上这种范式叫做命令式编程

但是我们刚才使用的两个大括号{{}}再加Vue的代码方式来写的，这就是用vue来管理div

即你只需要告诉我这里需要写什么东西就可以了，比如两个大括号{{}}

这种方式叫做声明式编程

如果我们想要添加属性，就直接添加逗号+属性名和属性值即可

运行结果如下：

这样做的好处：数据和界面可以实现完全分离

再来体验一下修改代码：

如果使用传统的js或者jQuery借着上面的3步来写：

4.修改message的数值：今天天气不错！

5.将修改后的数据再次替换到div元素

我们如果使用Vue来修改文字，可以直接修Vue代码段中的数值，HTML标签里的数值就会自动改变：

比如还是上面写的这个代码：

从浏览器中F12打开控制台，先拿到app.message

直接通过app.message = ‘要修改的值’ 回车后即可修改

以上就是我们对Vuejs的初体验

响应式：当数据发生改变的时候，界面会自动发生响应

代码做了什么事情?

1.我们来阅读JavaScript代码，会发现创建了—个Vue对象。

2.创建Vue对象的时候，传入了一些options:{} 参数

（1）{}中包含了el属性:该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上

（2）{}中包含了data属性︰该属性中通常会存储一些数据

①这些数据可以是我们直接定义出来的，比如像上面这样。