Vue简介及如何搭建vue开发环境
构建用户界面:就是把拿到的数据通过某种办法变成用户可以看到的界面。(至于怎么拿到数据,是发送请求还是模拟数据,vue不关注,vue关注的是你把数据给我之后,我如何把它变成界面)
渐进式:如果我们的应用很简单,只需要引入一个轻量小巧的核心库就可以了,如果是个复杂应用,可以引入vue中各式各样的插件库,所以渐有逐渐的意思,进有递进的意思,从一个轻量小巧的核心库逐步递进到使用各式各样的插件库
1、Vue的特点
采用组件化模式,提高代码复用率、且让代码更好维护。
声明式编码,让编码人员无需直接操作DOM,提高开发效率。
使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
2、扩展知识:
a、命令式&声明式
举个生活中的例子说明下这两种区别
命令式:若你在餐厅口渴了需要喝水,则在命令式的风格下,你需要对服务员下达包括口渴、行走至饮水机、拿杯子接水、回头返程等多个细节动作,缺少一步你都将喝不到水
声明式:在声明式的风格下,也许你只需向服务员使个眼神,并咳嗽两声,他便会将水递到你身前
举个代码示例,把人员信息变成li渲染到页面中
使用命令式编码写法如下:
使用声明式编码:
或者 点击右上角 --->选择更多工具按钮 --->选择扩展程序
我们可以把productionTip设置为 false 以阻止 vue 在启动时生成生产提示。
Vue.config.productionTip = false
操作方法:选中要打开的页面鼠标右键,选择Open with Live Server,网页会直接打开
工作特点:选中的一瞬间,它就在电脑本机5500端口号上开了一台内置的小服务器,并且把工程中所有的文件及文件夹都作为这台服务器的根资源去使用
运行之后会有这个错误信息,为什么会报错呢,这是浏览器的一个默认行为,浏览器打开任何一个网站的时候,都会默认请求页签图标,我们这边没有,所以就404了
解决方案是我们在根目录下放一个favicon.ico图标就行
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始Vue</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script>
Vue.config.productionTip = false
// 创建Vue实例
const vm = new Vue({
el:"#app",
data:{
msg:"Hello World"
}
})
</script>
</body>
</html>
想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
app容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
app容器里的代码被成为Vue模板