1. 认识Vuejs
1.1. 为什么要学习Vuejs
前后端分离是当前开发趋势。
Vue(读音/vju:/,类似于 view),不要读错。
Vue渐进式的框架:
- 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,带来更丰富的交互体验;
- 或者你希望将更多的业务逻辑使用Vue实现,使用Vue的核心库及其生态系统。
- Core + vue-router + Vuex 可以满足你各种各样的需求
Vue高级功能:
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
1.2 Vuejs的安装方式
1.2.1 CDN引入
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 生产环境 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
1.2.2 下载引入
<!-- 开发环境 -->
https://vuejs.org/js/vue.js
<!-- 生产环境 -->
https://vuejs.org/js/vue.min.js
1.2.3 NPM安装
使用webpack及CLI来安装,后面会详细介绍。
npm install vue -g
1.3 Vuejs初体验
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue基本语法学习</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
<p>{{message}}</p>
<p>{{job}}</p>
</div>
</body>
<script type="text/javascript" src="./js/app.js"></script>
</html>
app.js
new Vue({
el:'#app', //元素绑定
data:{
message:'helloworld!', //变量声明
job:'Software Enginer'
}
});
style.css
*{padding:0}
上面三段代码是一个最简单的入门示例,采用CDN模式的资源引入;以方便我们学习VUE。
1.4 Vuejs的MVVM
MVC是后端的分层开发概念;
MVVM是前端视图层的概念;数据驱动
1.4.1 VUE和MVVM的对应关系
实例:
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue First Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
<!--
Vue实例会控制这个元素中的所有内容;el:"#app"
Vue所控制的这个元素区域,就是我们的 V
-->
<div id="app">
{{msg}}
</div>
<script>
/**
创建一个VUE实例,当我们导入VUE的资源后,浏览器的内存中就多了一个VUE的构造函数;
我们创建的这个 vm 对象就是MVVM中的vm调度者。
**/
var vm = new Vue({
el:'#app',
// data中的属性,存放的就是el当中需要用到的属性,
// 这个data 也就是MVVM中的M,Model层用来保存数据
data:{
msg:'hello vue'
}
});
</script>
</body>
</html>
在vue中 如果是组件 data 只接收函数!后面在学习Vue脚手架是会发现!
1.5 Vue生命周期
本文由 huzd 创作,采用 知识共享署名4.0 国际许可协议进行许可本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名最后编辑时间
为:
2021/12/20 19:38