[Vue]的快速上手
文章目录
- [Vue]的快速上手
- Vue是什么
- 创建vue实例，初始化渲染
- 插值表达式
- Vue的响应式特性
- 开发者工具
- 结语
博客主页: He guolin-CSDN博客
关注我一起学习，一起进步，一起探索编程的无限可能吧！让我们一起努力，一起成长！
嗨！收到一张超美的图， 愿你每天都能顺心！
Vue是什么
概念:Vue是一个用于构建用户界面的渐进式 框架。
构建用户界面：基于数据渲染出用户的页面
下面是代码的数据，而我们构建用户界面需要做的就是将它转化成用户可视化的视图。
title:'清仓大促'
products:[{id:1,name:'手机',price:'1999元'},{id:2,name:'平板',price:'2999元'},{id:3,name:'电脑',price:'3999元'}
]
渐进式：循序渐进
Vue的两种使用方法：
1.Vue核心包开发
场景：局部模块改造
2.Vue核心包&Vue插件工程化开发
场景:整站开发
框架：一套完整的项目解决方案
优点：大大提升开发效率（70%）
缺点：需要理解记忆规则->官网
创建vue实例，初始化渲染
步骤如下：
引包的官网：
Vue2官网https://v2.cn.vuejs.org/
点击起步，计入安装界面
那么接下来按上述四部来简单写一个vue代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--创建Vue实例，初始化渲染1.准备容器（Vue所管理的范围）2.引包（开发版本包 / 生产版本的包）官网3.创建实例4.添加配置项 => 完成渲染--><div id="app"><!-- 这里编写一些用于渲染的代码逻辑 -->{{msg}}</div><!-- 引入的是开发版本包 - 包含完整的注释和警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>//一旦引入VueJS核心包，在全局环境，就有了Vue构造函数const app = new Vue({//通过el配置选择器，指定Vue管理的是那个盒子el:'#app',data:{msg:'Hello He guolin'}});</script>
</body>
</html>
可以看见我们成功渲染出来了
插值表达式
插值表达式是一种Vue的模板语法，
上面的代码对data里的msg就用来插值表达式。
1.作用：利用表达式进行插值，渲染到页面中
表达式：是可以被求值的代码，Js引擎会将其计算出一个结果
2.语法：{{表达式}}
3.注意点：
（1）使用的数据必须存在（data）
（2）支持的是表达式，而非语句，比如if for等都是不可以的。
（3）不能在标签属性中使用{{}}插值。
在div盒子里面我们可以这么写插值表达式
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<p>{{msg + '你好'}}</p>
Vue的响应式特性
其实除了基本的模板渲染，Vue背后还做了大量工作。
比如：数据的响应式处理。 -> 响应式：数据变化，视图自动更新
如何访问or修改？data中的数据，最终会被添加到实例上
1、访问数据：“实例.属性名”
2、修改数据：“实例.属性名” = “值”
我们在上述代码中举两个例子
这样视图界面会自动更新。
开发者工具
安装Vue开发者工具：装插件调试Vue应用
(1)通过谷歌应用商店安装(国外网站)
(2)极简插件：下载->开发者模式->拖拽安装->插件详情允许访问文件
极简插件https://chrome.zzzmh.cn/index
下载6.5.0的这个版本
下载安装解压缩，找到.crx文件,里面有安装说明，可以仔细观看。
打开chrome的扩展程序，将文件拖进去
安装好后，允许文件访问地址要打开。
此时重新打开的我们的chrome，可以看到最后一栏有个vue
在这里调试会比我们的控制台调试更加方便。
结语
本次分享就到这里了，感谢小伙伴的浏览，如果有什么建议，欢迎在评论区留言，如果给小伙伴们带来了一些收获，请留下你的小赞，你的点赞和关注将会成为博主分享每日学习的动力。
