(1)打鸡儿教你Vue.js
2023-09-11 14:16:52 时间
当今世界不会Vue.js,前端必定路难走
一个JavaScript MVVM库
以数据驱动和组件化的思想构建的
Vue.js是数据驱动
HTML/CSS/JavaScript/ES6/HTTP协议/Vue/微信小程序/Node/Express/MySQL/ 面向对象/设计模式
元素和伪元素:1
类选择器、属性选择器或伪类:10
id选择符:100
内联样式:1000
!important声明的样式优先级最高
清除浮动的几种方式
添加空div,使用clear: both;
父元素使用overflow: hidden;
父元素使用overflow: auto;
父级定义高度
父级div定义伪类:after和zoom
<style>
.clearfloat {
*zoom: 1;
}
.clearfloat:after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
</style>
margin: 0 auto;
left: 0;
right: 0;
#triangle {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid greenyellow;
}
display:none; 不显示对应的元素
visibility:hidden; 隐藏对应元素
position:absolute/fixed; 优先级最高
float不起作用,display值需要调整
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
定义View
定义Model
创建一个Vue实例或"ViewModel"
定义MVVM
定义Model
定义View
ViewModel
MVVM模式本身是实现了双向绑定的
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
M: Model 数据模型
V:View 视图
C:Controller 控制器
M:model数据模型
V:view视图
VM:ViewModel 视图模型
安装:npm i -S vue
<div id="app">{{ msg }}</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
// el:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标
el: '#app',
// Vue 实例的数据对象,用于给 View 提供数据
data: {
msg: 'Hello Vue'
}
})
</script>
<!-- 使用 vue -->
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello Vue'
}
})
</script>
请点赞!因为你的鼓励是我写作的最大动力!
吹逼交流群:711613774
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何
- 【Vue】npm install -g 和 npm install 区别
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【Vue/js】Js中执行变量中的命令语句,也就是所谓的宏替换(很实用的例子)
- Vue - 引入集成 Tinymce 富文本编辑器(详细步骤及运行Demo),在 Vue.js 项目中使用富文本插件详细教程,附带超级详细的注释说明
- Vue项目--FLoor组件的实现
- vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题
- 【问题-vue-vuetify】vue执行npm run serve后浏览器端口:5000显示Cannot GET /
- vue.js精讲01
- 【HarmonyOS】【JS】鸿蒙Js camera怎么拍照并使用image显示出来
- Vue 小组件input keyup.enter绑定
- 02-vue基础-Vue常用特性
- JS教程之Electron.js设计强大的多平台桌面应用程序的好工具
- vue初始化模板套用
- vue工程化之公有CSS、JS文件
- vue工程化之去除Eslint验证
- vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现
- Django REST framework+Vue 打造生鲜超市(八)
- 动手实现一个vue中的模态对话框组件
- webpack.config.js和vue.config.js的区别
- vue使用自定义指令监听元素宽、高变化
- vue做一个多图片上传组件
- 推荐4款高星星JS库:canvas库-Fabric.js、JavaScript客户端文件上传库-FilePond、客户端保存文件解决方案-FileSaver、JavaScript在线解压 ZIP 文件-JSZip
- Vue.js 60分钟快速入门
- Django+Vue项目学习第二篇:vue项目创建
- vue 遍历两个数组 拼接字符串
- Vue.js 样式绑定(1)
- vue 调试工具 vue-devtools