vue学习day01-vue的概念、创建Vue实例、插值表达式、响应式、安装Vue开发者工具

1、vue的概念

Vue是一个用于构建用户界面的渐进式 框架

（1）构建用户界面：基于数据动态渲染页面

（2）渐进式：循序渐进的学习

（3）框架：一条完整的项目解决方案，提升开发效率

2、创建Vue实例，初始化渲染

（1）大致步骤

1）准备容器（Vue所管理的范围）

2）引包（开发版本的包/生产版本包）

3）创建实例

4）添加配置项=>完成渲染

（2）详细步骤

1）准备容器

2）如何引包

①找官网（v2.cn.vuejs.org）

②点“起步”，跳转到以下页面

③点“安装”，找到“直接用<script>引入”，下载“开发版本”，或者直接引入开发版本的在线包

（开发版本会有更多提示）

④引入

3）创建实例

4）添加配置项

5）渲染

利用插值表达式

结果：

3、插值表达式

        插值表达式是Vue的一种模版语法

（1）表达式

        是可以被求值的代码，JS引擎会将其计算出一个结果

（2）作用

        利用表达式进行插值，渲染到页面中

（3）语法：{{表达式}}

（4）注意点

        1）使用数据必须存在（data已经提供）

        2）支持表达式，而非语句，比如：if，for

        3）不能在标签属性中使用{{}}插值

4、响应式

（1）响应式概念

        数据改变，视图更新

（2）如何访问或修改数据

data中的数据最终会被添加到实例上（可以理解为data中提供的数据会被添加到el选择的选择器上）

        1）访问数据：“实例名.属性名”

        2）修改数据：“实例名.属性名=值”

（3）示例：

在原先代码data里提供一个count数据，值为100，在容器里渲染

在控制台访问

执行加一操作后（加一操作如果是app.count++,在控制台显示加加之前的值，在页面显示加后的结果）

5、安装Vue开发者工具

（1）安装方式

        1）通过谷歌应用商店安装（国外网站）

        2）极简插件：下载->开发者模式->拖拽安装->插件详情允许访问文件

（2）安装详细步骤（极简插件方式）

        1）通过（https://chrome.zzzmh.cn/index）访问，有可能会出现访问失败的情况，通过浏览器搜索即可

        2）通过搜索找到Vue Devtools，点击推荐下载

3）下载完成后，打开当前文件，进行解压

（crx后缀的文件是要安装的文件）

4）解压后找到浏览器的扩展部分，一部分是点击“.…”，点击“更多工具”或者点击“三”，直接点击扩展程序，将刚刚解压的文件拖拽，加入到“扩展程序”即可

5）让插件允许访问文件地址，在“插件详情”中将“允许访问文件网址”打开即可

6）重启浏览器，右键，点击“检查”，找到工具