el与data的两种写法/延迟挂载
首页->学习资料->web前端->vue教程->vue2 关键词: 发布时间:2024-01-04 00:22:22 浏览次数:518

加载完成时:

image.png

两秒后:

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p9:el与data的两种写法</title>
    <script type="text/javascript" src="js/vue.js"></script>
</head>

<body>
<!-- 准备好一个容器:模板-->
<div id="demo">
    <h5>
        你好,{{name}}
    </h5>
</div>
<script type="text/javascript">
    //创建vue实例
    const x = new Vue({
        //el: '#demo',//这种不灵活
        // data: {//数据
        //     name: 'hurong',
        // }
        //data也可以用这种写法
        // data(){
        //     console.log(this)//这个this是vue对象
        //     return {
        //         name:'hurong'
        //     }
        // }
        data:()=>{
            console.log(this)//这个this是全局的window对象
            return {
                name:'hurong'
            }
        }
    });
    //这种比较灵活:2秒后挂载
    setTimeout(() => {
        x.$mount("#demo")
    }, 2000)
</script>
</body>
</html>


赞:(0)
踩:(0)
相关文章
初识vue
数据绑定:第一个vue例子
vue模板语法
vue数据绑定
vue数据代理-Object.definePropert
vue事件及事件修饰符prevent/stop/
vue计算属性computed
vue(深度)监视属性watch
vue绑定样式:class,:style
vue条件渲染v-if/v-show
热门文章
win7中将文件拷贝到虚拟机linux下
phpexcel设置行高及列宽,背景颜色,
rabbitmq无法启动
intellij idea不显示git push按钮
php7中使用mongodb的aggregate进行
laravel页面静态化的方法
centos7.4 64位下swoole安装及配置
navicate连接mycat报1184错误
curl设置超时不起作用(CURLOPT_TIM
devops-jenkins容器为pending状态
好评文章
phpexcel设置行高及列宽,背景颜色,
php7中使用mongodb的aggregate进行
intellij idea打开文件所在文件夹
windows下使用MongoDB Compass Com
win7中将文件拷贝到虚拟机linux下
laravel 中悲观锁 & 乐观锁的使用
单点登录sso原理及php实现方式及de
navicate连接mycat报1184错误
rabbitmq无法启动
laravel整合dingo/api方法步骤:jwt
标签
rabbitmq mysql备份 elasticsearch golang swoole
我的项目
【github】www.github.com/hurong241
【码云】gitee.com/hu_rong/projects
【docker hub】hub.docker.com/repositories/hurong241
【packagist】packagist.org/users/hurong241/packages
站点信息
建站时间:2011年
文章数:623篇
浏览数:1303109
粤ICP备18028092号-1  微信:hurong241