vue声明形式

最新推荐文章于 2024-04-17 19:25:06 发布

李笙诗

最新推荐文章于 2024-04-17 19:25:06 发布

阅读量268

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/qq_17449435/article/details/118671426

版权

VUE 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

来自Vue2的代码引用格式和实际应用一

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>elementary my dear wahson</title>
</head>
<body>
	<div id="app">
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<input type="button" value="Photo behind the wall" @click="changeisshow">
	<p v-show="msg" @click="changeagain">maybe you could see...</p>

	</div>
	<script>
	var app = new Vue({
		el:"#app",
	    data:{
	        msg:false,
		},
	    methods:{
			changeisshow:function(){
				this.msg = !this.msg;
				if (this.msg){
					alert('really?')
				}
			},
			changeagain:function(){
				this.msg = !this.msg;
				if (this.msg!=1){
					alert('--Your Irene.')
				}
			}
	    },
	})
	</script>
</body>
</html>

来自Vue2的代码引用格式和实际应用二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>elementary my dear</title>

</head>


<body>
	<script src="https://unpkg.com/vue@next"></script>
	
	
	<div id="app">
		<p v-model="msg">{{msg}}</p>
		<button @click="brand">James</button>
		<button @click="site">Sherlock</button>
	</div>


    <script>
	const app = Vue.createApp({
		data(){
			return{
				msg:''
			}
		},
			
		methods:{
			brand(){
				this.msg = "cache me";
				that = this.msg
			},
			site(){
				this.msg = "if you can";
				alert("holmes,")
			},
		},
		
	})
	const vm =app.mount('#app');
    </script>
</body>
</html>

官网的实际引入

const app ={
	data(){
		return{
			members:[
				{id:'link1',name:'连接栗子球',atk:100},
				{id:'link2',name:'逆卷之水灵使',atk:1500},
				{id:'link3',name:'转码语者',atk:2300},
				{id:'link4',name:'访问码语者',atk:2400}
			]
		}
	},
		
	methods:{
	},
	
}
Vue.createApp(app).mount('#app')

要点：

在vue3中，data必须是函数，但是定义method使并没有这个要求

从const app到app.mount的部分是viewmodel

data是model

body是视图

李笙诗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue声明形式

来自Vue2的代码引用格式和实际应用一<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl
复制链接

扫一扫