专栏首页用户3288143的专栏Vue.js 快速上手精华梳理-快速上手核心重点【热门收藏】

Vue.js 快速上手精华梳理-快速上手核心重点【热门收藏】

文章目录

Vue.js 快速上手精华梳理

安装

vuecli文档 https://cli.vuejs.org/zh/ https://cli.vuejs.org/zh/guide/installation.html

npm install -g @vue/cli@4.5.9 进入路径 vue create 名字web 手动

如果其他人选了css可能需要

代码风格

保存时检测

单独放

保存成模板

cd xx npm run serve

法二:窗口执行

常用了解

Vue中的:和@还有.的意义

https://blog.csdn.net/qq_35746739/article/details/102885137

route路由跳转

https://zhuanlan.zhihu.com/p/122963923?from_voters_page=true

核心代码

初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app" v-bind:title="title">
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello vue!',
                title:'bennyrhys00'
            }
        })
    </script>
</body>
</html>

条件指令

if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app">
        <div v-if="flag">v-if 是移除元素</div>
        <div v-show="flag">v-show 是display隐藏元素</div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                flag:'true'
            }
        })
    </script>
</body>
</html>

循环指令

99乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app">
        <table>
            <tr v-for="i in num">
                <td v-for="j in i">{{i}}*{{j}}={{i * j}}</td>
            </tr>
        </table>

    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                num:9
            }
        })
    </script>
</body>
</html>

处理用户输入

消息翻转v-on:click=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app">
        <div>{{message}}</div>
        <button v-on:click="reseverMessage"></button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message: "bennyrhys"
            },
            methods:{
                reseverMessage() {
                   // alert("hello")
                    this.message=this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>
</html>

同步数据Input v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app">
        <div>{{message}}</div>
        <input type="text" v-model="message">
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:"bennyrhys"
            }
        })
    </script>
</body>
</html>

组件初体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app">
        直接付给变量<bennyrhys name="vue"></bennyrhys>
<!--        如果是引用的hello变量,v-bind下边data要定义-->
        间接绑定变量<bennyrhys v-bind:name="hello"></bennyrhys>
    </div>
    <script>
        Vue.component('bennyrhys',{
            <!--        声明一个变量-->
            props:['name'],
            template:'<h1>hello {{name}}</h1>'
        })
        var app = new Vue({
            el:'#app',
            data:{
                message:"bennyrhys",
                hello:'vue1'
            }
        })
    </script>
</body>
</html>

实例

其实就是对象

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app">
        <div>{{a}}</div>
    </div>
    <script>
        var data = {a : 1, b : null}

        // 情况2:冻结data数据,导致后期更改无法影响视图【只读】
        // Object.freeze(data)

        var app = new Vue({
            el:'#app',
            data:data,
            // 生命周期方法-创建vue时 Vue1.x用created多,现在Mounted初始化数据用的多
            created() {
                console.log("create init")
            }
        })
        console.log(data.a == app.a) //true
        data.a = 99
        console.log(app.a) // 99
        app.a = 100
        console.log(data.a) //100 【双向绑定】

        // 情况1:后引入的属性【但是后来加进的数据不会影响视图的更新。可以先在外面初始化b:null】
        data.b = 18
        console.log(app.b)

        // 使用$获取
        console.log(app.$el == document.getElementById("app")) //true
        console.log(app.$data == data) //true
    </script>
</body>
</html>

模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app">
<!--         变量直接插值可以使用{{}}-->
        <div>{{a}}</div>

<!--         如果给特性赋值,不用{{}},要用v-bind:【简写:】 v-on:click【简写@】-->
<!--        页面测试app.enableBtn=false-->
        <button v-bind:disabled="!enableBtn" @click="num++">按钮</button>


<!--        直接显示html格式-->
        <div v-html="a"></div>

<!--        注意:表达式只能一个-->
        <div>{{num>101 ? 'good' : num}}</div>

     </div>
    <script>

        var app = new Vue({
            el:'#app',
            data:{
                // 直接显示的字符串
                a : '<h1>hello 字符串</h1>',
                b : null,
                enableBtn: true,
                num: 99
            }
        })
    </script>
</body>
</html>

计算属性

computed比methed方法多出缓存功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--        computed和方法的区别,computed可以缓存,methed不行-->
        <div>{{reseverMessage}}</div>

<!--        methed调用显示和computed一样-->
<!--        <div>{{reseverMessage()}}</div>-->

<!--    通过computed的set进行赋值-->
        <div>{{copyMessage}}</div>
     </div>
    <script>

        var app = new Vue({
            el:'#app',
            data:{
                // 页面测试app.message='lalassss ss'
                message : 'hello bennyrhys',
                copyMessage: null
            },
            methods:{
                /*reseverMessage() {
                    return this.message.split('').reverse().join('')
                }*/
            },
            computed:{
                //执行的是简化的get
               /* reseverMessage() {
                    return this.message.split('').reverse().join('')
                }*/

               // 完整的属性
                reseverMessage:{
                    get() {
                        // 注意会因methed方法同名报错
                        return this.message.split('').reverse().join('');
                    },
                    // 网页测试app.reseverMessage="343"
                    set(newVal) {
                        this.copyMessage=newVal
                        console.log("set:"+ newVal);
                    }
                }
            }
        })
    </script>
</body>
</html>

监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app" v-bind:title="title">
<!--        网页测试app.firstName='li'  app.lastName="si"-->
        {{fullName}}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                firstName:'zhang',
                lastName:'san',
                fullName:'zhang san'
            },
            /*computed: {
                fullName() {
                    return this.firstName+" "+this.lastName;
                }
            }*/

            // 用于网络请求耗时长的异步、开销很大操作,一般用computed本地变化就行
            watch:{
                firstName(val) {
                    this.fullName = val + ' ' + this.lastName;
                },
                lastName(val) {
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        })
    </script>

</body>
</html>

Class绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app" v-bind:title="title">
        <!--        普通版-->
        <div class="m1">{{msg}}</div>

        <!--        想控制样式显示或是隐藏,就用到class绑定【注意{},是单括号}】-->
        <!--        页面测试app.flag=false,样式消失
                    可以同时绑定多个class样式 测试app.hasBorder=false
        -->
        <div v-bind:class="{m1:flag, m3:hasBorder }" class="m2">{{msg}}</div>

        <!--样式比较多,直接填写定义好的对象-->
        <div v-bind:class="classObj" class="m2">{{msg}}</div>

        <!--定义样式数组        -->
        <div v-bind:class="[flag ? dm1 : '',dm3]">{{msg}}</div>
        <!--化简三目运算        -->
        <div v-bind:class="[{m1:flag},dm3]">{{msg}}</div>

    </div>

    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:'hello bennyrhys!',
                flag:true,
                hasBorder:true,
                // 样式定义比较多,给他封装成对象
                classObj: {
                    m1:true,
                    m3:true
                },
                // 定义数组
                dm1:'m1',
                dm3:'m3'
            }
        })
    </script>

    <style>
        .m1{
            font-weight: bold;
            color: red;
        }
        .m2{
            font-size: 20px;
        }
        .m3{
            border: 1px solid #cccccc;
        }
    </style>

</body>
</html>

compted this.flag控制true false

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主要测试computed常用</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--     app.message='hi bennyrhys' 可以到页面的console检验-->
    <div id="app" v-bind:title="title">
        <!--        普通版-->
        <div class="m1">{{msg}}</div>

        <!--        想控制样式显示或是隐藏,就用到class绑定【注意{},是单括号}】-->
        <!--        页面测试app.flag=false,样式消失
                    可以同时绑定多个class样式 测试app.hasBorder=false
        -->
        <div v-bind:class="{m1:flag, m3:hasBorder }" class="m2">{{msg}}</div>

        <!--样式比较多,直接填写定义好的对象-->
        <div v-bind:class="classObj" class="m2">{{msg}}</div>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:'hello bennyrhys!',
                flag:true,
                hasBorder:true,
            },
            computed: {
                classObj() {
                    //测试撤销样式app.flag=false app.hasBorder=false
                    return{
                        m1:this.flag,
                        m3:this.hasBorder
                    }
                }
            }
        })
    </script>

    <style>
        .m1{
            font-weight: bold;
            color: red;
        }
        .m2{
            font-size: 20px;
        }
        .m3{
            border: 1px solid #cccccc;
        }
    </style>
</body>
</html>

Style绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主要测试computed常用</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-bind:title="title">
    <!--    单{},    -->
    <div v-bind:style="{color:fontColor, fontSize:fontSize+'px'}">{{msg}}</div>

    <!--绑定对象    -->
    <div v-bind:style="styleObj">{{msg}}</div>

    <!--绑定数组    -->
    <div v-bind:style="[styleObj,styleObj2]">{{msg}}</div>

</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            msg:'hello bennyrhys!',
            fontColor: 'red',
            fontSize: 30,
            // 定义成对象
            styleObj: {
                color: 'red',
                fontSize: '30px'
            },
            // 数组
            styleObj2: {
                border: '1px solid #ccc'
            }
        }
    })
</script>

<style>
    .m1{
        font-weight: bold;
        color: red;
    }
    .m2{
        font-size: 20px;
    }
    .m3{
        border: 1px solid #cccccc;
    }


</style>

</body>
</html>

条件渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-bind:title="title">
<!--        条件渲染 根据变量控制,app.isShow=true-->
        <div v-if="isShow">hello bennyrhys</div>

<!--        template不参与页面渲染,但是能控制多条语句,同时显示 测试app.isShow=true-->
        <template v-if="isShow">
            <p>hello</p>
            <h1>bennyrhys</h1>
            <span>version</span>
        </template>

<!--        v-else-->
        <div v-else>瑞新</div>

<!--        v-else-if  测试app.isShow=true app.gender=1-->
        性别:
        <div v-if="gender == 0">男</div>
        <div v-else-if="gender == 1">女</div>
        <div v-else>未知</div>


<!--        渲染缓存复用【默认】 如果不想用默认的【用key区分】 测试app.loginType='email'-->
        <template v-if="loginType == 'username'">
            <label>用户名</label>
            <input type="text" placeholder="请输入用户名" key="username" >
        </template>
        <template v-else>
            <label>邮箱地址</label>
            <input type="text" placeholder="请输入邮箱地址" key="email">
        </template>

<!--        v-show【if是从dom中删除,show是一直存在控制display显示或隐藏】【不支持和template一起使用】-->
        <div v-show="!isHide" >hello v-show</div>


<!--        【总结:频繁显示隐藏show,偶尔if】-->
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
               isShow:false,
                gender:0,
                loginType:'username',
                isHide:false

            }
        })
    </script>

</body>
</html>

列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-bind:title="title">
<!--    遍历数组 【注意key 】-->
        <table>
            <tr>
                <td>索引</td>
                <td>书名</td>
                <td>作者</td>
            </tr>
            <tr v-for="(book, index) of books" v-bind:key="index">
<!--            注意:in等价于of    -->
                <td>{{index}}</td>
                <td>{{book.name}}</td>
                <td>{{book.author}}</td>
            </tr>
        </table>


<!--    遍历对象元素  ()内元素排序:元素 key index 【注意key,循环渲染被认为同一个div】-->
        <div v-for="(s, k, i) in site" v-bind:key="i ">
            {{s}}--{{k}}--{{i}}
        </div>


<!--    存在问题:数组无法响应式更新

        测试存入,但页面没更新
        app.books[4]={name:'故事新编',author:'鲁迅'}

        测试存入:调用变异方法,是js原有的vue封装,内含了视图更新
        app.books.push({name:'故事新编',author:'鲁迅'})

        元素出栈:app.books.pop()

        删除元素:app.books.splice(0,1)表示从第0个开始,删除一个

        替换数组:非变异方法,不会改变原始数组【filter、concat、slice】
            错误做法 app.books.concat({name:'故事新编',author:'鲁迅'})
            正确做法 app.books=app.books.concat({name:'故事新编',author:'鲁迅'})

        删除替换元素:【参考官方set方法】
            app.books.splice(0,1,{name:'故事新编',author:'鲁迅'})


        对象更新存在问题:
            注意:提前定义元素,保证后期响应式更新
            Vue.set(app.site,'ip','0.0.0.0')
            app.$set(app.site,'ip','0.0.0.0')
            直接写是不会变的

-->
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                books:[
                    {
                        name:'三国演义',
                        author:'罗贯中'
                    },
                    {
                        name:'水浒传',
                        author:'施耐庵'
                    },
                    {
                        name:'西游记',
                        author:'吴承恩'
                    },
                    {
                        name:'红楼梦',
                        author:'曹雪芹'
                    }
                ],
                site:{
                    url:'www.996cloud.work',
                    name:'不才工作室',
                    author:'bennyrhys'
                }
            }
        })
    </script>

</body>
</html>

事件处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-bind:title="title">
        <div>{{counter}}</div>
<!--         @click="counter++"写一个方法替代效果和++一样-->
        <input type="button" value="自增" @click="increment(2)">

<!--        注意事件修饰符,按键修饰符-->
        <input type="text" v-on:keydown.ctrl.enter="submit">
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
               counter:0
            },
            methods:{
                increment(step) {
                    this.counter = this.counter+step;
                },
                submit(){
                    console.log("submit")
                }
            }
        })
    </script>
</body>
</html>

表单输入绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue01</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app" v-bind:title="title">
<!--        单行文本-->
        <input type="text" v-model="msg">
        <p>{{msg}}</p>
        
<!--        多行文本-->
        <textarea v-model="textarea" cols="30" rows="10"></textarea>
        <P style="white-space: pre-line;" >{{textarea}}</P>

<!--        复选框-->
<!--        单个测试-->
        <input type="checkbox" v-model="isRead">
        <p>{{isRead}}</p>
<!--        多选兴趣爱好-->
        篮球<input type="checkbox" value="篮球" v-model="favorites">
        足球<input type="checkbox" value="足球" v-model="favorites">
        乒乓球<input type="checkbox" value="乒乓球" v-model="favorites">
        <p>{{favorites}}</p>

<!--        单选框性别-->
        性别<input type="radio" value="男" v-model="gender">男 <input type="radio" value="女" v-model="gender">女
        <p>{{gender}}</p>

<!--        选择框-->
<!--        学历-单选-->
        <select v-model="edu">
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
        </select>
        <p>{{edu}}</p>
<!--        补充上方爱好的-多选-->
        <select v-model="favorites" multiple>
            <option value="足球">足球</option>
            <option value="篮球">篮球</option>
            <option value="乒乓球">乒乓球</option>
        </select>
<!--        优化-->
        <select v-model="favorites" multiple>
            <option v-for="(f, index) in fs" v-bind:key="index" v-bind:value="f">{{f}}</option>
        </select>

<!--        值选择-->
        <input type="checkbox" true-value="yes" false-value="no" v-model="toggle">
        <p>{{toggle}}</p>

<!--        单选框,返回值类似
            选择框 value可以传一个对象,但记得v-bind
-->

<!--        .lazy .number .trim修饰符,可以使修改事件触发状态【挪出光标点一下才能触发】-->
        <input type="text" v-model.lazy="msg">
        <p>{{msg}}</p>


<!--        改进for的99乘法表-->
<!--        v-model修饰符控制数值【此时即使number类型也没用】-->
<!--        <input type="number" v-model.number="num">-->
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:'',
                textarea:'',
                isRead:false,
                favorites:[],
                gender:'',
                edu:'',
                fs:[
                    '足球',
                    '篮球',
                    '乒乓球'
                ],
                toggle:''
            }
        })
    </script>
</body>
</html>

组件基础

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
<!--&lt;!&ndash;    保证了组件的复用不会同时调用同一个变量,避免结果异常    &ndash;&gt;-->
        <bennyrhys></bennyrhys>
        <bennyrhys></bennyrhys>
        <hr>

<!--     向子组件传递数据 【定义的组件数据像元素属性一样赋值】  -->
        <bennyrhys title="组件1"></bennyrhys>
        <bennyrhys title="组件2"></bennyrhys>

<!--     传递了一个数组的数据给子组件 【注意此处引用data的变量,记得加:】 -->
        <mybolgs @sayhello="hello" v-for="(blog, index) in blogs" :title="blog.title" :date="blog.date" :author="blog.author" :key="index">
<!--        插槽占位符-->
            <div style="color: red">bennyrhys</div>
        </mybolgs>

        <hr>
<!--    动态组件:传组件名字动态切换    -->
        <component v-bind:is="currentTabComponent"></component>
    </div>
    <script>
        Vue.component('bennyrhys',{
            //返回值一定要是方法,避免变量被属性同时公用造成异常
            data() {
                return {
                    counter: 0
                }
            },
            // 向子组件传递数据
            props:['title'],
            // 外层必须是一个整div包裹
            template:'<div><div>{{title}}</div><button @click="counter++" >hello {{counter}}</button></div>'
        })

        Vue.component('mybolgs',{
            // 传递了一个数组的组件
            props:['title', 'date', 'author'],
            template: '<div>' +
                    '<div>{{title}}</div>'+
                    // 插槽占位符 可以起名字
                    '<slot></slot>'+
                    '<div>{{date}}--{{author}}</div>'+
                    // 监听子组件的点击事件,调用app的方法【大小写不敏感的 不要用大写】
                    // 使用组件抛出一个值传参
                    '<button @click="$emit(\'sayhello\',title)">监听子组件</button>'+
                '</div> '
        })
        var app = new Vue({
            el:'#app',
            data:{
                currentTabComponent: 'bennyrhys',
                message:"bennyrhys",
                blogs:[
                    {
                        'title':'Spring Boot1',
                        'date':'时间1',
                        'author':'bennyrhys'
                    },
                    {
                        'title':'Spring Boot2',
                        'date':'时间2',
                        'author':'bennyrhys'
                    },
                    {
                        'title':'Spring Boot3',
                        'date':'时间3',
                        'author':'瑞新'
                    }
                    ]
            },
            methods:{
                // 监听子组件传递过来的方法
                hello(val){
                    console.log("hello zi"+val)
                }
            }
        })
    </script>
</body>
</html>

git提交-vue核心基础完结

此处静待,后期开源

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://blog.csdn.net/weixin_43469680复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • Vue.js 快速上手精华梳理-快速上手核心重点【建议收藏】

    瑞新
  • Vue.js 快速上手精华梳理-实例

    瑞新
  • Vue.js 快速上手精华梳理-条件指令

    瑞新
  • Vue.js 快速上手精华梳理-初体验

    瑞新
  • Vue.js 快速上手精华梳理-循环指令

    瑞新
  • Vue.js 快速上手精华梳理-处理用户输入

    瑞新
  • Vue.js 快速上手精华梳理-组件初体验

    瑞新
  • Vue.js 快速上手精华梳理-为什么选择Vue?

    Vue是一个前端Javascript框架,与React Angular 并称为前端三大主流框架 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。...

    瑞新
  • 源码阅读技巧

    本文是本人学习Cocos Creator、LayaAir、EgretWing 游戏引擎源码(包括渲染流程、资源加载、音频、图片、网络、动画等模块)总结出来的源码...

    EchoROne
  • 【干货合辑】毕业季,如何敲开「IT世界」的大门

    现在 IT 新技术日新月异,IT 行业的工作也变得赤手可热。刚毕业的大学生也蜂拥而至,但是在校的学习经验并没有一定的专业领域的实操经验,而被企业拒之门外。那么,...

    腾讯云开发者社区
  • Vue概述

    星辰_大海
  • 5本书带你走进Python与机器学习的世界

    基于大数据的人工智能如今异常火爆 Python 作为最热门的编程语言之一 是实现机器学习算法的首选语言 Python与机器学习这一话题非常的宽广 5本书虽很难覆...

    企鹅号小编
  • Vue移动端UI框架

    自从Vue成为前端的主流框架之后,各家UI框架也越来越多,今天重点聊一聊移动端的那些框架吧,Vue移动端框架到底哪家强?以下排名不分先后,开发过程中根据自己的具...

    王小婷
  • 一个很酷的后台权限管理框架,模块化、插件化、CRUD 极速开发,永久开源免费

    它是一款基于 Node.js+midway.js 的后台权限管理系统。它开源免费不仅能够快速开发增删改查的需求,还支持 Serverless、Docker 等多...

    JAVA葵花宝典

扫码关注腾讯云开发者

领取腾讯云代金券