VUE知识点

已于 2023-07-19 09:12:04 修改
阅读量62 收藏
点赞数
分类专栏： # JavaWeb 文章标签： vue.js javascript 前端
于 2023-07-19 09:00:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jie_Chang/article/details/131800484
版权

VUE

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>

常用的方法

  • 消息提示
  • 按钮
  • 等等
Jie_Chang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue知识点汇总【持更】
qq_45605043的博客
09-14 5754
一个前端小白的自学之路，完结之日即成为大白之日。
vue知识点汇集 总结 回顾
10-27
下面将根据标题和描述，结合压缩包内的文件名称，对Vue的知识点进行详细梳理。 1. **基础概念** - **虚拟DOM**：Vue使用虚拟DOM作为数据和实际DOM之间的中间层，以提高性能和效率。 - **组件化**：Vue中的组件是...
Vue知识点汇总
编程界明世隐的博客
04-09 1900
一、MVVM的理解 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。 View代表UI 组件，它负责将数据模型转化成UI 展现出来。 ViewModel监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View...
Vue知识点总结
xfhgxhhhg的博客
08-02 6783
vue的知识框架。
VUE知识点总结
Zhang_hao_r的博客
02-03 7554
Vue：一种用于构建用户界面的渐进式JavaScript框架 Vue可以自底向上逐层的应用简单应用:只需一个轻量小巧的核心库复杂应用:可以引入各式各样的Vue插件 特定：1、采用组件化模式，提高代码复用率，且让代码更好维护 2、声明式编码，让编码人员无需直接操作DOM，提高开发效率 ...
最全Vue知识点总结，助你快速上手
weixin_51812604的博客
04-23 4418
最全Vue知识点总结
Vue知识点
weixin_45407811的博客
11-25 2294
1.Vue中的watch与computed computed： computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个
Vue知识点梳理-思维导图
Seven的博客
08-24 1366
Vue知识点梳理-思维导图0.MVC 与MVVM的区别1.Vue基本代码结构2. Vue指令3. Vue组件4.class和style动态绑定5.computed 计算属性6.EventBus7.filter过滤器方法 Vue是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发） 0.MVC 与MVVM的区别 MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离。MVVM把前端的视图
vue知识点归纳与总结(笔记)
热门推荐
u010716530的博客
12-29 1万+
前言     当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门,总结是基于vue2.x,vue-cli3.x,主要记录些，vue常用的指令、事件，监听、数据绑定、过滤器、组件、动画、vuex，vue-router等日常工作中时常用到的东西,也有些常用的插件和开发工具的介绍与使用...
vue基础知识点大全
heiligkeil的博客
05-25 2035
目录一、基础指令插值语法 {{xxx}}指令语法 v-bind单向数据绑定 v-bind双向数据绑定 v-model绑定事件 v-on事件修饰符键盘事件 @keyup、@keydown计算属性 computed监视属性 watchwatch 与 computed 区别绑定样式class样式style样式条件渲染 v-if、v-show遍历 v-for添加对象 set()修改数组的7个方法(Vue可监测到):v-model的三个修饰符 trim、number、lazy过滤器 filters内置指令 v-tex
Vue知识点：qs
Lzero's伊甸园
05-20 7863
最近在做一个Vue项目，对Vue也不太了解，硬着头皮努力做。在和后端接口交互时，交互成功，状态码200，但后端反馈参数数据有问题。于是就网上查找原因，原来需要qs将参数数据的格式进行一下序列化。这里就总结一下对qs的理解。
Vue知识点串讲.md
07-10
Vue知识点串讲.md
vue知识点总结.md
03-01
vue知识点总结.md
vue 知识点.docx
01-05
Vue.js 知识点概述 在本文中，我们将对 Vue.js 进行详细的介绍，包括其定义、特性、优点、安装环境、项目搭建、Webpack 配置等方面的知识点。 什么是 Vue.js Vue.js 是一套构建用户界面的渐进式框架。与其他重量...
Vue知识点以及面试题
11-24
Vue知识点以及面试题
谷粒商城实战笔记-38-前端基础-Vue-指令-单向绑定&双向绑定
最新发布
epitomizelu的专栏
07-20 496
安全性v-text更安全，因为它总是将数据作为纯文本插入，不解析 HTML。v-html则可能引发安全问题，因为它会解析并渲染 HTML 标签。用途v-text适用于插入文本数据，而v-html适用于插入需要被解析为实际 HTML 的数据。处理 HTML 标签v-text忽略 HTML 标签，将其视为普通文本；v-html则会解析并显示 HTML 标签。二者都是单向绑定，元素绑定model，model不绑定元素，元素值改变时model值不会更新。
使用Vue实现点击页面触发特效
qq_45569925的博客
07-19 639
在页面上的指定区域内进行点击，则会在页面上显示设置好的随机文本，此文本出现后会执行动画，动画效果为节点在1s之内向右上方移动并在移动的过程中完成180°翻转，最后消失。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1033
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 465
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
vue知识点pdf分享
10-25
综上所述，一个完整的Vue知识点的PDF分享应当包括Vue的基本概念、响应式数据绑定、组件化开发模式、路由管理、状态管理和动画效果等方面的内容。通过学习这些知识点，开发者可以更好地掌握Vue的使用方法，提高前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Jie_Chang

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

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

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

打赏作者

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

抵扣说明：

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

余额充值