Vue学习😀
Posted Happy~Study
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue学习😀相关的知识，希望对你有一定的参考价值。
Vue
渐进式 JavaScript 框架
1、简介
前端体系、前后端分离
SOC:关注点分离
只管视图层
-
网络通信：axios
-
页面跳转：vue-router
-
状态管理：vuex
-
Vue-UI: ICE
-
结构层：html
-
表示层：CSS
- CSS预处理器：动态变化——>SASS(Ruby)、LESS(NodeJS)
-
行为层：JavaScript
2、UI框架
- Ant-Design：https://ant.design/index-cn
- ElementUI：https://element.eleme.cn/#/zh-CN
- Bootstrap：https://www.bootcss.com
- AmazeUI：http://amazeui.shopxo.net
- iView：https://www.iviewui.com/
- ICE：https://ice.work/
- VantUI：https://vant-contrib.gitee.io/vant/#/zh-CN/
- AtUI：https://aliqin.github.io/atui/
- CubeUI：https://didi.github.io/cube-ui/#/zh-CN
NodeJS 带来的全栈时代：http://nodejs.cn/
3、Vue基础语法
-
CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> -
官网的GitHub也可以直接下文件
3.1、v-bind:title = \'\'
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- MVC模型 ——> MVVM模型 -->
<!-- view层 模板 -->
<!-- 方式一 -->
<!-- <div id="app">
{{message}}
</div> -->
<!-- 方式二 -->
<!-- 会出现 message 的数据 -->
<div id="app">
<!-- v-bind:title 绑定元素的 title 与 message 属性一致 -->
<!-- 用于鼠标触碰显示信息 -->
<span v-bind:title="message">
鼠标悬停几秒查看此处动态绑定的提示信息
</span>
</div>
<!-- 也可以用lib包下的vue.js文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
//Model层 数据
data:{
message:"hello,vue"
}
});
//双向绑定，就是前端数据改变，data数据也会改变，反过来也可以，而且这个页面不用刷新
//上面这种被广泛应用了，例如节假日做活动，只需要改变前端样式即可，不需要不断刷新页面
vm.message = \'Happy~Study以上是关于Vue学习😀的主要内容，如果未能解决你的问题，请参考以下文章