VUE知识点

vue知识点大全【59题】 nextTick也叫做异步更新队列方法,而$nextTick方法的主要作用就是等待dom元素加载完毕之后才会执行的回调函数,我们经常会在$nextTick方法里面`获取dom元素` 阅读详情

VUE

vue是很重要的,多敲多练习
MVVM开发模式,VUE采用的就是MVVM,记住数据和页面是分离的,我们的数据发生改变,页面会跟着改变。
element地址: https://element.eleme.cn/

vue快速入门




<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue入门</title>
    <!-- 1.引入vue.js -->
    <script src="./vue.js"></script>
</head>

<body>
    <!-- 2.准备一个区域,让vue进行管 -->
    <div id="app">
        {{msg}}
    </div>
    <!-- 3.创建vue对象,接管app区域 -->
    <script>
        new Vue({
            el: "#app", //让vue去接管id值位ap的标签
            //data里边写的是定义的数据
            data: {
                msg: "hello vue"
            }
        })
    </script>
</body>

</html>

vue指令

v-bind指令

操作方法:
** v-bind =》绑定属性的
需要定义好对应的变量
我们需要在设置变量的属性上 v-bind可以写为 v-bind:属性=‘变量名’
v-bind:属性=‘变量名’ 可以简写为 :属性=‘变量名’**

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind =》绑定属性的
        需要定义好对应的变量
        我们需要在设置变量的属性上 v-bind可以写为  v-bind:属性='变量名'
        v-bind:属性='变量名' 可以简写为 :属性='变量名'
    -->
        <a  v-bind:href="websit"> 点我访问网页</a>
        <font v-bind:color="ys">这是一段内容</font>
        <hr>
        <img :src="imgPath" >//v-bond简写模式
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                websit:'https://www.baidu.com',
                ys:'green',
                imgPath:'https://img1.baidu.com/it/u=3663508195,2907650417&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1689354000&t=57d2197e11e6fc099a7007e11b4cf442'

            }
        })
    </script>
</body>
</html>

v-if和v-show、v-if-else-if

v-if和v-show都可以控制标签的隐藏和现实
v-if是根据结果来决定是否渲染标签

v-show是通过display样式来决定标签是否显示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-if用来判断的
        符合条件的会显示
    不符合条件的不会出现(渲染) 
-->
        <span v-if="score > 90">
            成绩优秀
        </span>
        
        <span v-else-if="score>70">
            成绩中等
        </span>
        
        <span v-else>
            成绩垃圾
        </span>

    </div>
    <script>
        new Vue({
            el: '#app',//让vue去接管,id值是app的而标签
            data: {
                score:75
            }
        })
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
       <!--  v-if和v-show都可以控制标签的隐藏和现实
        v-if是根据结果来决定是否渲染标签
        v-show是通过display样式来决定标签是否显示 -->
        <span v-show="flag"> 
            成绩优秀

        </span>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                flag:false
            }
        })
    </script>
</body>
</html>

v-html和v-text

v-html是不带标签进去
v-text是带标签进去。把解耦合的内容直接打印处理啊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- innerHTML 加载属性上的 -->
        <div v-html="content"></div>
        <!-- innerText加在属性上的
        说白了和{{content}}展示的效果是一样的 -->
        <div v-text="content"></div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                content:'<b>aaa</b>'
            }
        })
    </script>
</body>
</html>

v-on

显示内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 任务需求
        点击按钮在div中显示了内容 
    v-on:事件='函数名'可以简写位@事件
-->
        
        <button v-on:click="showContent">点我</button>
        <button @click="showContent">点我隐藏</button>
        <div v-html="content"></div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                content: ""
            },
            //在methods中写函数名
            methods:{
                showContent(){
                    this.content ='点击div在按钮点击显示内容'
                } 

            }
        })
    </script>
</body>

</html>

v-for

** v-for遍历 item in 数组 ==》 表示数组中的每个元素**

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <dir id="app">
        <div v-for="item in arr">
            <!-- v-for遍历
            item in 数组 ==》 表示数组中的每个元素
             -->
            {{item}}
        </div>
    </dir>
    <script>
        new Vue({
            el: '#app',
            data: {
                //数据
                arr: ['aaa', 'bbb', 'ccc']
            },
            methods: {
                //函数
            }
        })
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
       <table width="600px" height="300px"  align="center" border=".5px"><tr>
        <th>id</th>
        <th>名字</th>
        <th>年龄</th>
        <th> 性别</th>
       </tr>
    <tr v-for="stu in stuList" align="center">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td v-html="stu.age"></td>
            <td>{{stu.gender == 1?"男":'女'}}</td>

    </tr>
    </table>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                stuList:[
                    {'id':1,'name':'张三','age':18,"gender":1},
                    {'id':2,'name':'李四','age':20,"gender":0},
                    {'id':3,'name':'王五','age':22,"gender":0},
                    {'id':4,'name':'赵六','age':24,"gender":1}
                ]
            },
            methods: {

            }
        })
    </script>
</body>

</html>

v-model

**作用:表单的双向绑定(只能用在表单上) **

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-model 
作用:表单的双向绑定(只能用在表单上) 

-->

        <input type="text" v-model="username"><br>
        <input type="password" v-model="password"><br>
        <button @click="login">点我登陆</button>
        </table>
    </div>
    <!-- 初始化vue -->
    <script>
        new Vue({
            el: '#app',
            data: {
                username: 'tom',//此时我们的username记录的表单框输入的内容
                password: '123456'
            },
            methods: {
                //函数
                login() {
alert(this.username +"========"+this.password)
                }
            }
        })
    </script>
</body>

</html>

vue的声明周期

创建前
创建后created(){} =>windows.οnlοad=function(){}
挂载前
挂载后mounted(){} =>windows.οnlοad=function(){}
更新前
更新后
销毁前
销毁后
created 和mounted选择一个用来就可以
这类方法我们成为钩子函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
<!-- 
创建前
创建后created(){} =>windows.οnlοad=function(){}
挂载前
挂载后mounted(){} =>windows.οnlοad=function(){}
更新前
更新后
销毁前
销毁后 


created 和mounted选择一个用来就可以
这类方法我们成为钩子函数
-->
{{msg}}
        
    </div>
    <!-- 初始化vue -->
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'hello,vue'
            },
            created(){
                //函数
                alert('1')
            },mounted(){
                alert(2)
            }

            
        })
    </script>
</body>

</html>

在div中写{{}}两个花括号,花括号里边可以填写new vue对象的data数据的属性。也可以使用三元方法

VUE-element

网站:
@表示函数
:表示数据

vue-element入门

  1. 引入vue-element
    引入element-ui
    2. 创建区域给VUE接管
    3. 初始化vue接管app
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element</title>
    <!--1. 引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 引入element-ui -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="element-ui/lib/index.js"></script>
</head>

<body>
    <!--2. 创建区域给VUE接管 -->
    <div id="app">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>

        <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
        </el-row>

        <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
        </el-row>

        <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
        </el-row>


    </div>
    <!--3. 初始化vue接管app -->
    <script>
        new Vue({
            el: '#app',
            data: {

            },
            methods: {

            }
        })
    </script>
</body>

</html>

vue-element表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element</title>
    <!--1. 引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="element-ui/lib/index.js"></script>
</head>

<body>
    <!--2. 创建区域给VUE接管 -->
    <div id="app">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="id" width="200">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="180">
                <template slot-scope="scope">
                    {{scope.row.gender == 1 ? "男":"女"}}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
    </div>
    <!--3. 初始化vue接管app -->
    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [{
                    id: 1001,
                    date: '2016-05-02',
                    name: '王小虎',
                    gender: 1,
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    id: 1002,
                    date: '2016-05-04',
                    name: '王小虎',
                    gender: 1,
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    id: 1003,
                    date: '2016-05-01',
                    name: '王小虎',
                    gender: 0,
                    address: '上海市普陀区金沙江路 1519 弄'
                }]
            },
            methods: {
                handleEdit(index,row){
                    console.log(index+'=====================')
                    console.log(row)
                },
                handleDelete(id){
                    alert('要删除的数据是==》'+id)
                }
            }
        })
    </script>
</body>

</html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element</title>
    <!--1. 引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="element-ui/lib/index.js"></script>
</head>

<body>
    <!--2. 创建区域给VUE接管 -->
    <div id="app">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="id" width="200" sortable >
            </el-table-column>
            <el-table-column prop="name" label="班级" width="180" sortable >
            </el-table-column>
            <el-table-column prop="count" label="班级人数" width="180" sortable >
            </el-table-column>
            <el-table-column prop="status" label="班级种类" width="180" sortable >
                <template slot-scope="scope">
                    {{scope.row.status == 1 ? "特长班":"普通班"}}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="教室位置" sortable >
            </el-table-column>
            <el-table-column prop="date" label="开班时间" width="180" sortable >
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,scope.row.id)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
    </div>
    <!--3. 初始化vue接管app -->
    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [{
                    id: 1001,
                    date: '2016-05-02',
                    name: '01班',
                    count: 50,
                    status:1,
                    address: '普利商务中心2楼最东头'
                }, {
                    id: 1002,
                    date: '2016-05-04',
                    name: '02班',
                    count: 50,
                    status:0,
                    address: '普利商务中心2楼最西头'
                }, {
                    id: 1003,
                    date: '2016-05-01',
                    name: '03班',
                    count: 50,
                    status:1,
                    address: '普利商务中心2楼中间'
                }]
            },
            methods: {
                //index => 表示索引
                //row =>   表示的是当前这一行显示的内容对应的对象
                handleEdit(index,row,id){
                    console.log(index+'=====================')
                    console.log(index)
                    alert('正在编辑'+'id是'+row.id +'班级名字为'+row.name+'班级人数是'+row.count+'班级类型是'+row.status+'班级位置是'+row.address+"的数据")


                },
                handleDelete(id){
                    alert('要删除的数据是==》'+id)
                }
            }
        })
    </script>
</body>

</html>

vue-element表单&弹出框

弹出框和添加数据代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element</title>
    <!--1. 引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="element-ui/lib/index.js"></script>
</head>

<body>
    <!--2. 创建区域给VUE接管 -->
    <div id="app">
        <el-button type="danger" @click="dialogVisible = true">点击打开 </el-button>
        <el-dialog :title="title" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form label-position="left" label-width="80px" :model="student">
                <el-form-item label="学生姓名">
                    <el-input v-model="student.name"></el-input>
                </el-form-item>
                <el-form-item label="学生年龄">
                    <el-input v-model="student.region"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select  v-model="student.gender" placeholder='请选择性别'>
                        <el-option key="1" label="男" value="1"></el-option>
                        <el-option key="0" label="女" value="0"></el-option>
                    </el-select >


                </el-form-item>
                <el-form-item label="学生住址">
                    <el-input v-model="student.type"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitData">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <!--3. 初始化vue接管app -->
    <script>
        new Vue({
            el: '#app',
            data: {
                title: "添加数据",
                dialogVisible: false,
                student: {
                    name: '',
                    region: '',
                    age: '',
                    type: '',
                    gender: ''
                }
            },
            methods: {
                handleClose(done) {
                    this.$confirm('确认关闭?')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                },
                submitData() {
                    console.log(this.student)
                    this.dialogVisible=false
                }

            }
        })
    </script>
</body>

</html>

vue降序

降序代码使用的是sortable属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element</title>
    <!--1. 引入vue -->
    <script src="./js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="element-ui/lib/index.js"></script>
</head>

<body>
    <!--2. 创建区域给VUE接管 -->
    <div id="app">
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="id" width="200" sortable >
            </el-table-column>
            <el-table-column prop="name" label="班级" width="180" sortable >
            </el-table-column>
            <el-table-column prop="count" label="班级人数" width="180" sortable >
            </el-table-column>
            <el-table-column prop="status" label="班级种类" width="180" sortable >
                <template slot-scope="scope">
                    {{scope.row.status == 1 ? "特长班":"普通班"}}
                </template>
            </el-table-column>
            <el-table-column prop="address" label="教室位置" sortable >
            </el-table-column>
            <el-table-column prop="date" label="开班时间" width="180" sortable >
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,scope.row.id)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
        </el-table>
    </div>
    <!--3. 初始化vue接管app -->
    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [{
                    id: 1001,
                    date: '2016-05-02',
                    name: '01班',
                    count: 50,
                    status:1,
                    address: '普利商务中心2楼最东头'
                }, {
                    id: 1002,
                    date: '2016-05-04',
                    name: '02班',
                    count: 50,
                    status:0,
                    address: '普利商务中心2楼最西头'
                }, {
                    id: 1003,
                    date: '2016-05-01',
                    name: '03班',
                    count: 50,
                    status:1,
                    address: '普利商务中心2楼中间'
                }]
            },
            methods: {
                //index => 表示索引
                //row =>   表示的是当前这一行显示的内容对应的对象
                handleEdit(index,row,id){
                    console.log(index+'=====================')
                    console.log(index)
                    alert('正在编辑'+'id是'+row.id +'班级名字为'+row.name+'班级人数是'+row.count+'班级类型是'+row.status+'班级位置是'+row.address+"的数据")


                },
                handleDelete(id){
                    alert('要删除的数据是==》'+id)
                }
            }
        })
    </script>
</body>

</html>

vue-elment分页条代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>element</title>
    <!--1. 引入vue -->
    <script src="../element_code上课代码/js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../element_code上课代码/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../element_code上课代码/element-ui/lib/index.js"></script>
</head>

<body>
    <!--2. 创建区域给VUE接管 -->
    <div id="app">
        <el-form :inline="true" :model="tableData" class="demo-form-inline">
            <el-form-item label="姓名">
                <el-input v-model="tableData.name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="tableData.gender" placeholder="状态">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="2"></el-option>
                </el-select>
                <el-form-item label="状态">
                    <el-select v-model="tableData.status" placeholder="状态">
                        <el-option label="在读" value="1"></el-option>
                        <el-option label="毕业" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(tableData.name)">查询</el-button>
                  </el-form-item>
                </el-form>

                <el-table :data="tableData" stripe style="width: 100%">
                    <el-table-column prop="id" label="学生学号" width="200" sortable>
                    </el-table-column>
                    <el-table-column prop="name" label="学生姓名" width="180" sortable>
                    </el-table-column>
                    <el-table-column prop="age" label="学生年龄" width="180" sortable>
                    </el-table-column>
                    <el-table-column prop="gender" label="学生性别" width="180" sortable>
                        <template slot-scope="scope">
                            {{scope.row.gender == 1 ? "男":"女"}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="学生住址" sortable>
                    </el-table-column>
                    <el-table-column prop="status" label="学生在校状态" width="180" sortable>
                        <template slot-scope="scope">
                            {{scope.row.status == 1 ? "在读":"毕业"}}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <!-- <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,scope.row.id)">编辑</el-button> -->
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <el-pagination 
                @size-change="handleSizeChange" 
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage" 
                :page-size="10" layout=" prev, pager, next,total" :total="100">
                </el-pagination>
    </div>
    <!--3. 初始化vue接管app -->
    <script>
        new Vue({
            el: '#app',
            data: {
                tableData: [{
                    id: 1,
                    status: 2,
                    name: '张三',
                    age: 25,
                    gender: 1,
                    address: '山东省济南市'
                }, {
                    id: 2,
                    status: 1,
                    name: '李四',
                    age: 35,
                    gender: 0,
                    address: '山东省济南市'
                }, {
                    id: 3,
                    status: 1,
                    name: '刘琳',
                    age: 29,
                    gender: 1,
                    address: '山东省济南市'
                }, {
                    id: 4,
                    status: 2,
                    name: '老李',
                    age: 20,
                    gender: 1,
                    address: '山东省济南市'
                }, {
                    id: 5,
                    status: 2,
                    name: '赵六',
                    age: 25,
                    gender: 1,
                    address: '山东省济南市'
                }],
                currentPage: 1

            },
            methods: {
                //index => 表示索引
                //row =>   表示的是当前这一行显示的内容对应的对象
                handleEdit(index, row, id) {
                    console.log(index + '=====================')
                    console.log(index)
                    alert('正在编辑' + 'id是' + row.id + '班级名字为' + row.name + '班级人数是' + row.count + '班级类型是' + row
                        .gender + '班级位置是' + row.address + "的数据")


                },
                handleDelete(id) {
                    alert('要删除的数据是==》' + id)
                },
                handleSizeChange() {

                },
                handleCurrentChange() {

                },
    

            }
        })
    </script>
</body>

</html>

常用的方法

  • 消息提示
  • 按钮
  • 等等
Vue知识点汇总(含Vue3) 可以。 阅读详情

相关推荐

Vue 核心知识点总结

本文系统梳理了Vue框架的核心面试知识点,重点对比了Vue3与Vue2的差异,包括Composition API、Proxy响应式系统等新特性。详细解析了组件通信方式、生命周期变化、v-if与v-show区别等关键概念,并给出性能优化建议。同时比较了Vuex与Pinia的状态管理方案,最后介绍了Vue-router导航守卫的应用场景。帮助开发者全面掌握Vue技术栈,为面试做好充分准备。

赵得C 1128

「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系

巩固你的vuejs知识体系序言一、vue2.x基础知识预备二、vue2.x基础知识常见面试题1. 请说出vue.cli项目中src目录每个文件夹和文件的用法?2. vue.cli中怎样使用自定义的组件?有遇到过哪些问题?3. v-show和v-if的区别4. 为何v-for中要用key5. 描述Vue组件生命周期(1)单组件生命周期(2)父子组件生命周期关系6. Vue组件如何通讯(常见)7. 描述组件渲染和更新的过程8. vue如何处理刷新数据不丢失9. 双向数据绑定 v-mo

moandaylab 4923

HCLR-Net: 混合对比学习正则化与局部随机扰动用于水下图像增强

独特贡献在于开发了一种处理负样本的新策略,既保留了负样本的统计特性,又防止网络过度剖析这些样本中的特征信息。通过根据每个通道特征的重要性对模型进行加权,我们可以增强富含上下文信息的通道,从而获得更准确、更详细的特征表示。AHA 模块利用垂直方向上的 Avgpool 和水平方向上的 Maxpool 来捕捉远程依赖关系和准确的位置信息,从而有效确定不同方向上的特征退化。对比学习策略通常旨在最小化正样本之间的欧氏距离,使预测图像更接近理想图像,同时最大化负样本与预测图像之间的距离,使它们进一步远离非理想表征。

G-Howe的博客 1457

Vuejs技术栈知识点小结

文章目录前言Vue独立构建和运行时构建生命周期计算(computed)属性数组更新检测对象更新事件处理器表单控件绑定组件异步更新队列过渡效果Render函数和JSX自定义指令混合插件Vue-router两种导航方式重命名(redirect)和别名(alias)两种路由模式导航钩子路由meta过渡动效数据获取滚动行为(scrollBehavior)路由懒加载router-linkRouter构造配置...

Oliver的博客 986

细聊Oracle通过ODBC数据源连接SQL Server数据库

    类似文章搜索引擎上有很多,内容大致相同,今天所谓细聊是因为我在借鉴这些文章时候走了些弯路,所以写此文,为自己备忘,同时如果能为初涉此处知识点的小伙伴提供些帮助就更好了,废话不多说。    我的应用场景:    项目系统使用oracle数据库,与客户的第三方系统供应商实现资源共享,对方为sql server数据库;    我的测试开发环境为64bitwin7PC机,本机上装有64位Oracl...

xueren_83的博客 1万+

EndNote20保姆级安装教程:从下载到汉化一步到位(附闪退解决方案)

本文提供EndNote20的详细安装与汉化教程,涵盖系统准备、分步安装、路径优化及闪退解决方案。针对科研人员的需求,特别优化了中文环境下的使用体验,确保文献管理工具的高效稳定运行。

weixin_30415113的博客 339

Vue的50个知识点

Vue的50个知识点 文章目录Vue的50个知识点1. Vue的优点?Vue的缺点?2.为什么说Vue是一个渐进式框架? 1. Vue的优点?Vue的缺点? 优点:渐进式,组件化,轻量级,虚拟dom,响应式,单页面路由,数据与视图分开 缺点:单页面不利于seo,不支持IE8以下,首屏加载时间长 2.为什么说Vue是一个渐进式框架? 渐进式框架:通俗点讲就是,就是用你想用或者能用的功能特性,你不想用的部分功能可以先不用。VUE不强求你一次性接受并使用它的全部功能特性。 ...

每一次跌倒都是为了华丽的站起来。 1356

Rockit VDEC解码实战:从零构建高效视频处理流水线

本文详细介绍了Rockit VDEC硬件解码模块在RK3568/RK3588平台的应用实践,涵盖开发环境配置、MPI接口使用、码流发送模式选择、内存管理优化及多路解码系统构建。通过实战案例展示如何利用VDEC实现高效视频处理流水线,显著降低CPU占用率,提升嵌入式多媒体开发效率。

ol789012的博客 305

Vue3 知识点总结

id: number生命周期钩子传递参数和修饰符// 自定义防抖指令}, delay)})})

翱翔-蓝天 1642

pytorch-cifar100学习资料汇总 - 基于PyTorch的CIFAR-100图像分类实践

pytorch-cifar100是一个基于PyTorch实现CIFAR-100数据集图像分类的开源项目。该项目实现了多种经典的深度学习网络模型,如ResNet、DenseNet、VGG等,为开发者提供了在CIFAR-100数据集上进行图像分类实验的代码范例。pytorch-cifar100项目为我们提供了在CIFAR-100数据集上进行图像分类实验的完整代码实现。无论你是想要学习PyTorch的使用,还是研究不同网络模型在CIFAR-100上的表现,这个项目都是一个很好的起点。

helloaiworld的博客 1123

uniapp+google map不显示

uniapp+renderJS+google map开发安卓版APP非小程序,google map小叉号不显示,google map自定义marker右上角的小叉号如何去掉,uniapp+google map不显示

renkai721的专栏 527

「自我检验」熬夜总结50个Vue知识点,全都会你就是神!!!

关于Vue,你能总结几个面试点,来看看下面这篇文章。前言大家好,我是林三心,这几天发生了很多事(具体是啥我就不说了),这些事,吓得我把我这些年珍藏的Vue知识点都拿出来整理了一遍,巴不得能...

前端开发博客 1万+

【GB28181】wvp-GB28181-pro部署安装教程(Ubuntu平台)

初始环境安装。

废人一枚的博客 5081

VUE知识点总结

VUE知识点总结 由于本人目前的技术栈是vue,所以不做基础知识介绍了,主要讲一下其他的知识点。 父子组件钩子函数执行顺序 我们用P代表父组件 C代表子组件 在组件创建阶段,父子组件钩子函数执行顺序为,从上向下: P beforeCreate P created P beforeMount C beforeCreate C created C beforeMount C ...

weixin_36241537的博客 394

2026华为OD机试(C++)真题【E卷+A卷+B卷+C卷+D卷】目录+在线OJ

华为OD机试真题题库【E卷+A卷+B卷+C卷+D卷】目录,C++实现。

MISAYAONE的博客 20万+

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

学习Vue2需要知道的Es6知识点

先掌握核心知识点(1-7项),完成 1-2 个 Vue 项目后,再逐步学习进阶特性。Vue2 项目中 90% 的 ES6 使用场景集中在模块系统、箭头函数、解构赋值和 Promise 这几项核心功能上。

weixin_48053866的博客 939

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

Vue知识点梳理

本文转自博客:http://www.manongjc.com/detail/13-upbolcgspawzlhy.htmlVue 开发技巧或者说Vue知识点梳理 本文章向大家介绍Vue 开发技巧或者说Vue知识点梳理(转,自个学习),主要包括Vue 开发技巧或者说Vue知识点梳理(转,自个学习)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。 1.require.context() 1.场景:如页面需要导入多个组件,原始写法: impor...

qq50347110的博客 300

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

【Vuejs】778- 超全 Vuejs 知识点(基础到进阶)

作者:阿李卑斯https://juejin.im/post/5ec358126fb9a0432a3c49e6声明:本篇文章纯属笔记性文章,非整体原创,是对vue知识的整理,对自己有很大...

pingan8787 529

vue知识点汇总

[vue知识点汇总](https://mp.weixin.qq.com/s/CwFAeAjlsyAFUZkzxCCvJA)

weixin_43550562的博客 110

Vue 知识点总结文档:助你成为Vue大师

Vue 知识点总结文档:助你成为Vue大师 去发现同类优质开源项目:https://gitcode.com/ 项目介绍 在现代前端开发中,Vue.js 已经成为了一个不可或缺的框架。无论你是刚刚踏入前端领域的新手,还是已经在Vue的世界里摸爬滚打多年的老手,系统地回顾和巩固Vue的核心概念和实用技巧都是必不可少的。为了帮助开发者更好地掌握Vue,我们推出了这份详尽的 Vue 知识点总结文档。 这份...

gitblog_06647的博客 748

Vue面试知识点整理

Vue相关面试知识点整理 一、对于MVVM的理解? MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件,它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。 在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,M

weixin_48111439的博客 391

Vue 核心知识点全面整理

本文整理 Vue 核心、高频、实战必备的知识点,以 Vue2 为主,标注 Vue2/Vue3 核心差异,所有知识点逻辑连贯、内容真实无冗余,配套完整可直接复用的常用代码,零基础能看懂、开发能直接用,覆盖日常开发 95% 以上的使用场景。本文整理的是 Vue最核心、最常用、最高频数据驱动视图组件化开发,是所有功能的基础;指令是 Vue 灵魂,v-bind(:)v-on(@)v-modelv-forv-if是开发必备,必须熟练掌握;

land_yu的博客 1182

Vue 知识点及面试总结

Vue 知识点及面试总结 1、 什么是MVVM ​ MVVM是Model-View-ViewModel 的缩写。mvvm是一种设计思想。Model 层代表数据模型,也可以在Model 中定义数据修改和操作的业务逻辑;View 代表UI组件,他负责将数据模型转化成UI展现出来,ViewModel是一个同步 View 和 Model 的对象。 ​ 在 MVVM 架构下, View 和 Model 之间...

qq_37254736的博客 480

Vue2 必备的50个知识点

1、Vue的优点?Vue的缺点? 优点: 渐进式 组件化开发 虚拟dom 响应式数据 单页面路由 数据与视图分开 缺点: 单页面不利于seo 不兼容IE 首屏加载时间长 2、为什么说Vue是一个渐进式框架? Vue的全家桶,你可以选择不用,或者只选几样去用,比如不用vuex 3、Vue跟React的异同点? 相同点: 都是单向数据流 都使用了虚拟DOM的技术 都支持SSR ..

qq_37916164的博客 6431
上一篇: JS知识点
下一篇: Maven&Springboot知识点
Jie_Chang
博客等级 码龄4年 571粉丝 14原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Jie_Chang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值