文章目录
目录
一、Vue是什么？
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
二、使用步骤
1.引入库
代码如下（示例）：
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
2.Vue.js的代码结构
- 引入vue.js
- 写视图层，我们要展示的内容
- 实例化Vue()
- data：存放数据
- el：这个控制是哪块视图
- methods：放我们的方法
let vm = new Vue({ // 控制区域 el: "#app", // 存放数据内容 data: { }, // 方法 methods: { } })插值表达式、v-cloak、v-text、v-html
- 插值表达式{{}}，可以在前后插入一些内容
- v-text：会替换掉元素里的内容
- v-html：可以渲染html界面
-
<body> <!-- 插值表达式 {{}} --> <!-- v-html会解析富文本 并且会覆盖标签中的内容 --> <div id="app"> {{h2}} {{h3}} <p v-text="h2"></p> <p v-html='h3'></p> </div> </body> </html> <script> let vm = new Vue({ // 控制区域 el: "#app", // 存放数据内容 data: { h2: "我是h2", h3: "<h3>哈哈哈</h3>" }, // 方法 methods: { } }) </script>v-bind
- 界面元素属性值的绑定
- 括号里不加引号的都是我们data里的数据读取
- 如果想使用字符串需要加上引号
- 里面可以写表达式
- 里面也可以调用定义好的方法，拿到的是方法的返回值
v-on
- 进行事件的绑定，我们用的最多的是click事件绑定
- 简写@
事件修饰符
- .stop 阻止冒泡
-
<h1>.stop 阻止冒泡 添加在点击事件后边</h1> <div @click="log1" class="log1"> <div @click.stop="log2" class="log2"> <div @click="log3" class="log3"> </div> </div> </div> - .prevent 阻止默认事件
-
<h1>b).prevent 阻止默认事件</h1> <a href="qqqqq" @click.prevent>123</a> - .capture 添加事件侦听器时使用事件捕获模式
-
<h1>.capture 添加事件侦听器时使用事件捕获模式</h1> <div @click="log1" class="log1"> <div @click.capture="log2" class="log2"> <div @click="log3" class="log3"> </div> </div> </div> - .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
-
<h1>.self 只当事件在该元素本身（比如不是子元素）触发时触发回调</h1> <div @click="log1" class="log1"> <div @click.self="log2" class="log2"> <div @click="log3" class="log3"> </div> </div> </div> - .once 事件只触发一次
-
<h1>e).once 事件只触发一次</h1> <div @click.once="log3" class="log3"></div>v-model数据双向绑定
- 作用：数据双向绑定
- 注意：绑定的是表单控件
-
<div id="app"> <!-- @keyup 给input 标签添加 键盘抬起 事件 --> <!-- v-model 双向数据绑定 --> <p>{{log1}}</p> <p>{{log2}}</p> <input type="text" v-model="log1" @keyup="a"> <input type="text" v-model="log2" @keyup="b" > </div>Vue中样式的使用
-
使用class样式:
- 数组
- 三木表达式
- 数组内置对象（对象的键是样式的名字，值是Boolean类型）
- 直接通过对象
-
<div id="app"> <!-- 普通calss --> <!-- <div :class="red">123</div> --> <!-- a)数组 --> <!-- <div :class="[red,fs50]">123</div> --> <!-- b)三木表达式 --> <!-- <div :class="age>=18?red:' '">成年</div> <div :class="age<=18?red:' ' ">未成年</div> --> <!-- 数组内置对象（对象的键是样式的名字，值是Boolean类型） --> <!-- <div :class="{red:true,fs50:true}">123</div> <div :class="{red:false,fs50:true}">123</div> --> <!-- 不输入 true 和false 也可以 只要是布尔类型就可以 --> <!-- <div :class="{red:'flage'}">123</div> <div :class="{red:''}">123</div> --> <!-- d)直接通过对象 --> <!-- <div :class="[{red:true},{fs50:false}]">123</div> <div :class="[{red:false},{fs50:true}]">123</div> --> <!-- 1.直接在元素上通过 :style 的形式，书写样式对象 --> <div :style="style1">123123</div> <!-- 2.将样式对象，定义到 data 中，并直接引用到 :style 中--> <div :style="{color:'pink'}">123123</div> <!-- 3.在 :style 中通过数组，引用多个 data 上的样式对象 --> <div :style="[style1,style2]">123123</div> </div>V-for和key属性
- 遍历数组，参数(item,index) in list
- 遍历对象，参数(value,key,index) in list
- 遍历数字，num in 10 (1~10)
- key在使用v-for的时候都需要去设置key
- 让界面元素和数组里的每个记录进行绑定
- key只能是字符串或者数字
- key必须是唯一的
v-if与v-show区别
- 区别：
- v-if删除dom元素
- v-show设置display:none
- 应用场景：
- v-if只修改一次的时候可以使用v-if
- v-show频繁切换的时候可以使用v-show
1359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
