本文共 8070 字,大约阅读时间需要 26 分钟。
嗨朋友!感谢光临我的博客 还没上岸的我 还在努力之中,本文中理解有错的时候还请您指点 本人也很喜欢爬虫 欢迎来到本人的公众号 一起交流 公众号:Linux下撸python 能得指点是晚辈荣幸
- 絮叨一下
- 简单介绍
- 安装方法
- script
- npm下载
- 创建一个实例
- 挂载点el
- 存放数据data
- 函数methods
- 第一个hello vue
- 指令v-xx
- v-html
- v-text
- v-pre填充原始信息
- v-bind 动态数据绑定
- v-model 双向数据绑定
- v-if 是否渲染
- v-show 是否隐藏
- v-if vs v-show
- v-for循环
- 写给看到最后的你
絮叨一下
嗨你好 突然就很喜欢工匠这个词,但似乎缺少了一些工匠的心,努力做一个工匠 开始学习vue这个主流框架,希望我的这篇文章对屏幕前的你有所启发
简单介绍
官网:vue官网
什么是vue.js 其后缀 是.js 也就是可以当成是一个js库
其数据是响应的 数据的变化直接改变页面的内容
并不用去关心dom 而是关注 其 数据
如果你是一名萌新 可以会感觉我英语不好 文档翻译不过来 不过学习vue是完全不用考虑这个问题的毕竟尤大大 是中国 的 大大 来吧 废话不多说开始吧 当然啦 一下文章均以 vue2系列
做为教程
安装方法
script
可以使用script直接引入使用,当然啦 这种方法优点缺点也是很明显的 不占空间 但是需要记载时间 网络差 体验不好
- 可以使用最新版
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 当然也可以使用稳定版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
npm下载
官网这样解释到
在用 Vue 构建大型应用时推荐使用 NPM 安装。 NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。 同时 Vue 也提供配套工具来开发单文件组件。
- 下载最新
npm install vue
- 下载稳定版本
npm install vue --save
这样就会下载到本地
引入的话就是 <script src="/node_modules/vue/dist/vue.js"></script>
作为初学者还是不要使用压缩版本也就是 vue.min.js
创建一个实例
new Vue({ // 挂载点 el:"css选择器", // 数据 data:{ 属性名:属性值, }, // 函数 methods:{ fn(){ console.log("这个就是点击触发的函数") } }
挂载点el
- 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器,也可以是一个 HTMLElement 实例。
- 挂载点根据
css选择器
进行选择挂载 的位置当有多个挂载点的时候只会选择第一个
挂载点 - 不可以将vue挂载在body以及html上
- 在实例挂载之后,元素可以用
vm.$el
访问。
存放数据data
data:{ 属性名:属性值, }
函数methods
其是一个对象 用到的函数都需要放在这个对象中
第一个hello vue
Document { {messige}}
来吧 解释一下 首先需要知道{
{}}是什么- { {}}插值表达式 也就是数据绑定
- 获取data中的数据 只需要键一致即可
- 这个里面可以使用字符串拼接
- 注意不能使用
<
只能使用>
- 可以使用 表达式
- 不能识别标签
- 首屏会出现{ {}}
通过el 挂载 其作用域只能在id为app 标签的作用域范围内使用
data 用来存放数据
这样第一个vue程序就完成了
指令v-xx
- 指令就是带有 v- 前缀的特殊 attribute
- 其根本原理就是自定义属性 常用的指令 有以下一些
v-html
- 相当于innerHTML
- 可以解析标签
- 不安全容易引发xss攻击
v-text
- 不能解析标签
- 首屏不会出现{ {}}
v-pre填充原始信息
- 跳过解析过程 { {}} 是什么就是什么
v-bind 动态数据绑定
- 动态地绑定一个或多个 attribute
- 简写:一个
:
- 还可以绑定自定义属性
data:{ imgsrc:"路径"}
v-model 双向数据绑定
- 在文本区域插值 (
<textarea>{ {text}}</textarea>
) 并不会生效,应用 v-model 来代替。 - v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
MVVM
- M model 模型 就是data中的数据
- V view 视图 就是dom节点
- VM 视图模型
- 模型可以控制视图
- 视图也可以改变模型
- 通过视图模型进行改变 作为中间的桥梁
model到view使用的是数据绑定
view到model使用的是事件绑定
复选框
- 单个复选框绑定布尔值
- 多个复选框绑定到一个数组
单选按钮
v-if 是否渲染
- v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy(真) 值的时候被渲染。惰性加载
- 也可以用 v-else 添加一个“else 块”:
v-else 要紧跟 v-if
- v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
{ {name}} dadasd
v-show 是否隐藏
- 不同的是带有
v-show
的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。 - v-show 不支持
<template>
元素,也不支持 v-else。
这里举一个 图片的显示跟隐藏的案例
Document
看完之后是不是感觉 比原生js 容易很多
v-if vs v-show
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-for循环
- 我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 (item,index) in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。
- 循环的是谁就加在谁的身上
- 循环的是 一个对象的时候可以是三个参数 value,name,index
Document
- { {"我叫"+item.name+"我今年"+item.age+"岁我的爱好"+item.hobby}}
当然 他也可以是一个对象 那么他就有 三个参数
Document {
{name}},{ {value}}
这里我们可以做一个效果运用一下上面的知识点
就是这个效果啦
其实分析一下很简单就是 data中放一个数组,数组中存放 10个对象然后使用 v-for
循环就是啦
来看一下具体的代码
这里我分离开写
也就是js css html 分开
Document
css
* { margin: 0; padding: 0;}html { height: 100%; width: 100%;}body { height: 100%; width: 100%; background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);}.w { width: 1010px; margin: 0 auto;}.fixclear::after,.fixclear::before{ content: ""; display: block; clear: both;}ul { width: 100%; list-style: none;}li{ background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); overflow: hidden; position: relative; border-radius: 10px; width: 190px; height: 280px; margin-right: 10px; float: left; margin-bottom: 20px; border: 1px solid #fff;}.datu{ width: 100%; height: 190px;}.xiaotu{ position: absolute; bottom: 70px; left: 42px; width: 100px; height: 40px; border-radius: 30px 30px; background: #fff;}.logo{ position: absolute; left: 14px; top: 3px;}p{ font-size: 16px; width: 100%; text-align: center; color: #fff;}.title{ margin-top: 20px;}
js
new Vue({ el: ".w", data: { items: [ { "img": "https://img.alicdn.com/bao/upload/TB19T_1VwHqK1RjSZFEXXcGMXXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1MJZoVxnaK1RjSZFtXXbC2VXa.png_70x70Q75s0.jpg_.webp", "name": "顺钦银楼旗舰店", "desc": "满300减60元" }, { "img": "https://img.alicdn.com/bao/upload/TB10t5Mi13tHKVjSZSgXXX4QFXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1GrubV4naK1RjSZFBXXcW7VXa.png_70x70Q75s0.jpg_.webp", "name": "种善堂大药房", "desc": "爆款第2件半价" }, { "img": "https://img.alicdn.com/bao/upload/TB1bNnhVIbpK1RjSZFyXXX_qFXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1gMeGVSzqK1RjSZPcXXbTepXa.png_70x70Q75s0.jpg_.webp", "name": "美乐棵旗舰店", "desc": "全店享满赠" }, { "img": "https://img.alicdn.com/bao/upload/TB1mAL.b2c3T1VjSZPfXXcWHXXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1A7D.b2c3T1VjSZPfXXcWHXXa.png_70x70Q75s0.jpg_.webp", "name": "Sparllo海外旗舰店", "desc": "每满299减5元" }, { "img": "https://img.alicdn.com/bao/upload/TB1aBnGVrPpK1RjSZFFXXa5PpXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1qfMJiu3tHKVjSZSgXXX4QFXa.png_70x70Q75s0.jpg_.webp", "name": "古尚古旗舰店", "desc": "全场满88减10" }, { "img": "https://img.alicdn.com/bao/upload/TB17dX1WlLoK1RjSZFuXXXn0XXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1ryWsWhnaK1RjSZFtXXbC2VXa.png_70x70Q75s0.jpg_.webp", "name": "如喜旗舰店", "desc": "满300减30不封顶" }, { "img": "https://img.alicdn.com/bao/upload/TB1csu3VSrqK1RjSZK9XXXyypXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB19QLdVFzqK1RjSZFCXXbbxVXa.png_70x70Q75s0.jpg_.webp", "name": "张裕官方旗舰店", "desc": "抢店铺双重赠品" }, { "img": "https://img.alicdn.com/bao/upload/TB1z_bEXUGF3KVjSZFvXXb_nXXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1ejDFXQ5E3KVjSZFCXXbuzXXa.png_70x70Q75s0.jpg_.webp", "name": "虹越旗舰店(天猫)", "desc": "满300减30" }, { "img": "https://img.alicdn.com/bao/upload/TB1nHV1V4jaK1RjSZKzXXXVwXXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB1tARCVYrpK1RjSZTEXXcWAVXa.png_70x70Q75s0.jpg_.webp", "name": "婷妃内衣旗舰店", "desc": "满一百减十元" }, { "img": "https://img.alicdn.com/bao/upload/TB1kQGbVyLaK1RjSZFxXXamPFXa.jpg_190x190Q75s0.jpg_.webp", "logo": "https://img.alicdn.com/bao/upload/TB14bFWVwHqK1RjSZJnXXbNLpXa.png_70x70Q75s0.jpg_.webp", "name": "韩雅伊人旗舰店", "desc": "满99-10元" } ] }})
然后看一下最终的效果
这个就很nice啦
写给看到最后的你
朋友,感谢你看到了最后,新手报道,技术不成熟的地方请多多指点,感谢!
有问题可以私信我、大家一起交流 前端知识 以及 爬虫 python知识。
公众号:Linux下撸python 期待和你再次相遇 愿你学的愉快
转载地址:https://blog.csdn.net/weixin_33800724/article/details/113492749 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!