Vue起步之实现多对象和组件

最新推荐文章于 2023-07-27 15:15:15 发布

浩瀚云海

最新推荐文章于 2023-07-27 15:15:15 发布

阅读量202

点赞数

分类专栏： vue 前端文章标签： Vue

本文链接：https://blog.csdn.net/qq_35723619/article/details/83817317

版权

前端同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

vue

13 篇文章 0 订阅

订阅专栏

1多对象：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
	<link rel="stylesheet" href="demo07.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<!--根容器-->
	<div id="vue-appone">
        <h1>多个Vue实例化对象{{title}}</h1>
        <p>{{greet}}</p>
    </div>
    <div id="vue-apptwo">
        <h1>多个Vue实例化对象{{title}}</h1>
        <p>{{greet}}</p>
        <button v-on:click="changetitle">change</button>
    </div>

	<script src="app08.js"></script>
</body>
</html>

//实例化对象
var one = new Vue({
    el:"#vue-appone",
    data:{
       title:"app one",
    },
    methods:{
        
    },
    computed:{
      greet:function(){
          return "one"
      }
    }
});
//实例化对象
var two=new Vue({
    el:"#vue-apptwo",
    data:{
       title:"two"
    },
    methods:{
        changetitle:function(){
            one.title="change"
        }
    },
    computed:{
        greet:function(){
            return "two"
        }
    }
});

two.title ="change two"

2.组件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Vue.js</title>
	<link rel="stylesheet" href="demo07.css">
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <h1>组件</h1>
	<!--根容器-->
	<div id="vue-appone">
        <greeting></greeting>
    </div>
    <div id="vue-apptwo">
            <greeting></greeting>
    </div>

	<script src="app09.js"></script>
</body>
</html>

Vue.component("greeting",{
    template:
    '<p>hello world!{{name}}<button v-on:click="changeName">changName</button></p>',
    data:function(){
        return {
            name:'鹿晗',
        }
    },
    methods:{
        changeName:function(){
            this.name="jerry"
        }
    }
})
//实例化对象
 new Vue({
    el:"#vue-appone",
});
//实例化对象
new Vue({
    el:"#vue-apptwo",
});

搭建脚手架CLI:https://blog.csdn.net/qq_35723619/article/details/83817417

浩瀚云海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue起步之实现多对象和组件

1多对象：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue.js&lt;/title&gt; &lt;link rel="stylesheet" href="demo0
复制链接

扫一扫