相关文章推荐
气宇轩昂的紫菜汤  ·  解析json报错的特殊字符都有哪些 - ...·  4 月前    · 
魁梧的饭盒  ·  UNRAID菜鸟作业：docker部署Tex ...·  8 月前    · 
胆小的排球  ·  辐辏反射_百度百科·  9 月前    · 
宽容的自行车  ·  TypeError:无法实例化抽象类-腾讯云 ...·  1 年前    · 
酷酷的仙人球  ·  PB中调用pdf.ocx控件能否将文件转成P ...·  1 年前    · 
Code  ›  VUE修饰符（附源码教学）、$set_爱敲代码的狼仔的博客
meta vue html代码 background
https://blog.csdn.net/qq_48469083/article/details/120852683
稳重的八宝粥
1 年前
           Document            
     

                        { { j }} * { { i }} = { { i*j }} &nbsp;&nbsp;&nbsp;&nbsp;           </span>       <p v-for="i in 9">        <span v-for="j in 9" :class="j <= i?'red':''">             { { j }} * { { i }} = { { i*j }} &nbsp;&nbsp;&nbsp;&nbsp;        </span>    <script>        var vue = new Vue({            el: "#app",            data: {    </script> </body> </html>

学员信息等级表

基本的vue结构 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
            margin: 0;
            padding: 0;
        table{
            width: 1000px;
            margin: 0 auto;
            background-color: black;
        th,td{
            text-align: center;
            background-color: white;
            line-height: 50px;
            text-align: center;
            line-height: 60px;
        input{
            margin: 0 auto;
            display: inline-block;
            width: 200px;
    </style>
</head>
    <div id="app">
       <h1>学员信息</h1>
       <table>
               <th>学号</th>
               <th>姓名</th>
               <th>性别</th>
               <th>年龄</th>
               <th>成绩</th>
               <th>操作</th>
           <tr v-for="s in students">
               <td>{{ s.id }}</td>
               <td>{{ s.name }}</td>
               <td>{{ s.gender }}</td>
               <td>{{ s.age }}</td>
               <td>{{ s.socre }}</td>
                   <button>修改</button>
                   <button>删除</button>
       </table>
       <input placeholder="学员姓名" v-model="obj.name">
       <input placeholder="学员性别" v-model="obj.gender">
       <input placeholder="学员年龄" v-model="obj.age">
       <input placeholder="学员成绩" v-model="obj.socre">
       <input type="button" value="提交" @click="get_score">
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                obj: {
                    name: "",
                    gender: "",
                    age: "",
                    socre: ""
                students: [
                        id: 1,
                        name: "张三",
                        gender: "男",
                        age: 18,
                        socre: 80
                        id: 2,
                        name: "李四",
                        gender: "女",
                        age: 21,
                        socre: 90
                        id: 3,
                        name: "王五",
                        gender: "男",
                        age: 18,
                        socre: 60
                        id: 4,
                        name: "赵六",
                        gender: "男",
                        age: 19,
                        socre: 85
                        id: 5,
                        name: "候七",
                        gender: "男",
                        age: 18,
                        socre: 80
            methods: {
                get_score(){
                    console.log(this.obj)
    </script>
</body>
</html>

学员添加功能 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
            margin: 0;
            padding: 0;
        table{
            width: 1000px;
            margin: 0 auto;
            background-color: black;
        th,td{
            text-align: center;
            background-color: white;
            line-height: 50px;
            text-align: center;
            line-height: 60px;
        input{
            margin: 0 auto;
            display: inline-block;
            width: 200px;
    </style>
</head>
    <div id="app">
       <h1>学员信息</h1>
       <table>
               <th>学号</th>
               <th>姓名</th>
               <th>性别</th>
               <th>年龄</th>
               <th>成绩</th>
               <th>操作</th>
           <tr v-for="s in students">
               <td>{{ s.id }}</td>
               <td>{{ s.name }}</td>
               <td>{{ s.gender }}</td>
               <td>{{ s.age }}</td>
               <td>{{ s.socre }}</td>
                   <button>修改</button>
                   <button>删除</button>
       </table>
       <input placeholder="学员姓名" v-model="obj.name">
       <input placeholder="学员性别" v-model="obj.gender">
       <input placeholder="学员年龄" v-model="obj.age">
       <input placeholder="学员成绩" v-model="obj.socre">
       <input type="button" value="提交" @click="get_score">
    <script>
        var vue = new Vue({
            el: "#app",
            data: {
                obj: {
                    id: 0,
                    name: "",
                    gender: "",
                    age: "",
                    socre: ""
                students: [
                        id: 5,
                        name: "张三",
                        gender: "男",
                        age: 18,
                        socre: 80
                        id: 4,
                        name: "李四",
                        gender: "女",
                        age: 21,
                        socre: 90
                        id: 3,
                        name: "王五",
                        gender: "男",
                        age: 18,
                        socre: 60
                        id: 2,
                        name: "赵六",
                        gender: "男",
                        age: 19,
                        socre: 85
                        id: 1,
                        name: "候七",
                        gender: "男",
                        age: 18,
                        socre: 80
            methods: {
                get_score(){
                    if(this.obj.name.trim() === ""){
                        return alert("用户姓名不可以为空")
                    if(this.obj.name.trim() === ""){
                        return alert("用户姓名不可以为空")
                    if(this.obj.name.trim() === ""){
                        return alert("用户姓名不可以为空")
                    if(this.obj.name.trim() === ""){
                        return alert("用户姓名不可以为空")
                    var id = this.students?this.students[0].id+1:1
                    this.obj.id = id
                    var add_obj = {
                        ...this.obj
                    this.obj = {
                        id: 0,
                        name: "",
                        gender: "",
                        age: "",
                        socre: ""
                    this.students.unshift(add_obj)
    </script>
</body>
</html>

百度搜索补全功能 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
        .container{
            width: 600px;
            margin: 20px auto;
        .form-control {
            padding: 10px;
            width: 100%;
            border: 1px solid #DDD;
            border-radius: 4px;
            vertical-align: middle;
            outline: none;
        .options{
            background: #EEE;
        .options li{
            line-height: 30px;
            padding: 0 10px;
            cursor: pointer;
        .options li:hover{
            background: cornflowerblue;
            color:#FFF;
    </style>
</head>
    <div id="app">
        <div class="container">
            <input class="form-control" type="text" placeholder="请输入搜索关键词" v-model="keywords"/>
            <ul class="options">
                <li v-for="v in result()">{{ v }}</li>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
            keywords: "",
            search_list: [],
            list:[
                'vue的优缺点',
                'vue的作者',
                'vue官网',
                'mvvm设计模式',
                'vue和react的区别'
        methods: {
            result(){
                //通过keywords来筛选list当中的数据
                var res = this.list.filter(
                    item=>{
                        return item.indexOf(this.keywords) !== -1
                if(this.keywords.trim() === "" ){
                    return []
                return res
</script>
</html>

在vue开发当中，如果事件函数没有形参，那么在调用函数的时候，函数可以不加调用括号，这个时候调用函数，默认传递的第一个参数就是事件参数,但是如果有传参的必要（比如：分页，必须传递页码），vue提供了内置的变量$event来传递事件。

<div id="app">        <button @click="fun($event,1,2)">按钮</button> </body> <script>    new Vue({        el: '#app',        data:{        methods: {            fun(event,a,b){                //event                console.log(a+b)                event.target.style.color="red" </script>

事件修饰符

事件冒泡：

在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。

事件冒泡顺序（从内到外） 

event.stopPropagation()

阻止冒泡事件，需要写道子的事件绑定上

<div id="app"> <div class="parent" @click="parent_fun"> <div class="child" @click.stop="child_fun"> </body> <script> new Vue({ el: '#app', data:{ methods: { parent_fun(){ alert("我是父容器") child_fun(){ alert("我是子容器") </script>

阻止冒泡事件，需要写道父的事件绑定上

<div id="app"> <div class="parent" @click.self="parent_fun"> <div class="child" @click="child_fun"> </body> <script> new Vue({ el: '#app', data:{ methods: { parent_fun(){ alert("我是父容器") child_fun(){ alert("我是子容器") </script>

prevent

取消默认事件

<div id="app"> <input name="username"> <button type="submit" @click.prevent="child_fun">提交</button> </form> </body> <script> new Vue({ el: '#app', data:{ methods: { parent_fun(){ alert("我是父容器") child_fun(){ alert("我是子容器") </script>

capture

在事件冒泡的过程当中，优先执行含有capture修饰符的事件，打乱了冒泡顺序。

<div id="app"> <div class="parents" @click.capture="parents_fun"> <div class="parent" @click.capture="parent_fun"> <div class="child" @click.capture="child_fun"> </body> <script> new Vue({ el: '#app', data:{ methods: { parents_fun(){ alert("我是仙贝容器") parent_fun(){ alert("我是父容器") child_fun(){ alert("我是子容器") </script>

阻止事件连续执行，只能执行一次。

<div id="app"> <button @click.once="fun">点击</button> </body> <script> new Vue({ el: '#app', data:{ methods: { fun(){ console.log("嘿嘿嘿") </script>

passive

可以让滚动事件立即执行 

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符

在触发指定的按键后，触发事件

  • .enter 只有回车可以触发

  • .tab 只有tab可以触发

  • .delete (捕获“删除”和“退格”键)只有删除或者退格可以触发

  • .esc 只有esc可以触发

  • .space 只有空格可以触发

  • .up 只有光标上可以触发

  • .down 只有光标下可以触发

  • .left 只有光标左可以触发

  • .right 只有光标右可以触发

由于按键类型太多，可以使用键盘码（keycode）来代替按键名称，实现所有按键都可以执行

自定义按键修饰符

<div id="app"> <input @keydown.enter="fun"> <input @keydown.13="fun"> <input @keydown.hhh="fun"> </body> <script> Vue.config.keyCodes.hhh=13 new Vue({ el: '#app', data:{ methods: { fun(events){ console.log(events) </script>

表单修饰符

number 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .parents{
            width: 700px;
            height: 700px;
            background-color: yellowgreen;
        .parent{
            width: 500px;
            height: 500px;
            background-color: skyblue;
        .child{
            width: 200px;
            height: 200px;
            background-color: pink;
    </style>
</head>
    <div id="app">
        <!-- lazy：<input v-model.lazy="message"> <br /> 就数据被修改的频率改为失焦后修改-->
        <!-- number：<input v-model.number="message"> <br /> 将输入的内容转化为数字类型 -->
        <!-- trim：<input v-model.number="message"> <br />   取消输入的空格 -->
        {{ message }} <br>
        {{ message+1 }}
</body>
<script>
    Vue.config.keyCodes.hhh=13
    new Vue({
        el: '#app',
        data:{
            message: 1
</script>
</html>

直接使用索引为数组添加元素或者使用键为对象添加值，vue不会自动刷新,$set(目标对象，对应的索引或者键，需要修改的值) 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .parents{
            width: 700px;
            height: 700px;
            background-color: yellowgreen;
        .parent{
            width: 500px;
            height: 500px;
            background-color: skyblue;
        .child{
            width: 200px;
            height: 200px;
            background-color: pink;
    </style>
</head>
    <div id="app">
        <h2 v-for="user in user_list">{{ user }}</h2>
        <button @click="add">添加</button>
</body>
<script>
    Vue.config.keyCodes.hhh=13
    new Vue({
        el: '#app',
        data:{
            user_list: [
                "张三",
                "张麻子",
        methods:{
            add(){
                // this.user_list[3] = "葫芦娃" //直接使用索引为数组添加元素或者使用键为对象添加值，vue不会自动刷新
                // this.$set(this.user_list,3,"葫芦娃")
                this.user_list.unshift("葫芦娃")
                console.log(this.user_list)
</script>
</html>

表单元素的绑定 

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .parents{
            width: 700px;
            height: 700px;
            background-color: yellowgreen;
        .parent{
            width: 500px;
            height: 500px;
            background-color: skyblue;
        .child{
            width: 200px;
            height: 200px;
            background-color: pink;
    </style>
</head>
    <div id="app">
            <label>姓名</label>
            <input v-model="form_date.name"/>
            <label>性别</label>
            <input type="radio" value="男" name="gender" v-model="form_date.gender"/> 男
            <input type="radio" value="女" name="gender" v-model="form_date.gender"/> 女
            <label>爱好</label>
            <input type="checkbox" name="hobby" value="唱" v-model="form_date.hobby"/> 唱
            <input type="checkbox" name="hobby" value="跳" v-model="form_date.hobby"/> 跳
            <input type="checkbox" name="hobby" value="rap" v-model="form_date.hobby"/> rap
            <label>工作</label>
            <select v-model="form_date.job">
                <option value="程序员">程序员</option>
                <option value="外卖员">外卖员</option>
                <option value="快递员">快递员</option>
            </select>
        <button @click="submit">提交</button>
</body>
<script>
    new Vue({
        el: '#app',
        data:{
           form_date: {
               name: "老王",
               gender: "男",
               hobby: ["唱", "rap"],
               job: "程序员" 
        methods:{
            submit(){
                console.log(this.form_date)
</script>
</html>

localStorage

localstorage是h5新特性

localstorage存在本地内存

localstorage存储数量：比较大

localstorage存储格式：字符串（json格式字符串）

json数据格式化 

JSON.stringfy({对象}) 对象 转换为 json字符串
JSON.parse json字符串转换为对象

localStorage的方法 

localStorage.setItem(key,value)    json字符串
localStorage.getItem(key)  json字符串
JSON.parse(localStorage.getItem(key))
loaclStorage.removeItem(key) 
                    VUE修饰符v-if和v-for混用-乘法口诀表&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;  &lt;meta charset="UTF-8"&gt;  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;  &lt;meta name="viewport" content="width=device-width, initial-scale=...
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>D
				
vue无法双向绑定（无法更新dom）
一、什么情况下vue无法更新dom？
（1）因为数据层次太多（如 dataList[index].data，data为json数组的情况）
二、如何解决？
解决方案为强制更新需要更新的dom
（1）给需要更新的div加key，数据更改时，改变key值，该元素就会更新（释放原始组件，重新加载新的组件）。
<template>
    <span :key="key"></span>
  </div&gt

				
当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去； 当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。只有预先初始化，定义在data()函数中的属性，对象，vue实例在初始化的时候会触发object.defineProperty()的方法，为每个属性和对象增加getter(),setter()方法，这样，这些属性和对象是受vue实例统一管理的，当修改某一个属.

				
vue中的事件修饰符
1.prevent：阻止默认事件（常用）
<a href="http://www.baidu.com" @click.prevent="showinfo"></a>
2.stop：阻止事件冒泡（常用）
	margin-top: 20px;
.demo1{
	height: 50px;
	background-color: skyblue;
<div class="demo1" @click="showInfo">
	<butto

$set 是 Vue.js 中的一个辅助函数，它可以帮助你触发视图更新。你可以在组件的 methods 中使用 $set。
注意：使用 $set 时，需要在组件内引入 set 函数。
另外，在 Vue 3.0 中，$set 函数已经被弃用，你可以使用 ref 函数代替它。
import { ref } from 'vue'
export default {
  methods: {
    exampleMethod() {
      this.exampleObject.newKey = ref('newValue')
 
推荐文章
气宇轩昂的紫菜汤  ·  解析json报错的特殊字符都有哪些 - CSDN文库
4 月前
魁梧的饭盒  ·  UNRAID菜鸟作业：docker部署Text generation WebUI，玩转开源大语言模型！_网络存储_什么值得买
8 月前
胆小的排球  ·  辐辏反射_百度百科
9 月前
宽容的自行车  ·  TypeError:无法实例化抽象类-腾讯云开发者社区-腾讯云
1 年前
酷酷的仙人球  ·  PB中调用pdf.ocx控件能否将文件转成PDF文件?急!!!_pb用http获取pdf打印_yishanhai的博客-CSDN博客
1 年前
今天看啥   ·   Py中国   ·   codingpro   ·   藏经阁   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号