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)响应式概念
数据改变,视图更新
(使用Vue开发->专注于业务核心逻辑即可)
(2)如何访问或修改数据
data中的数据最终会被添加到实例上(可以理解为data中提供的数据会被添加到el选择的选择器上)
- 访问数据:“实例.属性名”
- 修改数据:“实例.属性名=值”
(3)示例:
在原先代码data里提供一个count数据,值为100,在容器里渲染
在控制台访问
执行加一操作后(加一操作如果是app.count++,在控制台显示加加之前的值,在页面显示加后的结果)
5、安装Vue开发者工具
(1)安装方式
1)通过谷歌应用商店安装(国外网站)
2)极简插件:下载->开发者模式->拖拽安装->插件详情允许访问文件
(2)安装详细步骤(极简插件方式)
1)通过(https://chrome.zzzmh.cn/index)访问,有可能会出现访问失败的情况,通过浏览器搜索即可
2)通过搜索找到Vue Devtools,点击推荐下载
3)下载完成后,打开当前文件,进行解压
(crx后缀的文件是要安装的文件)