Vue插值表达式和事件

最新推荐文章于 2024-02-01 17:54:39 发布

11adaacc

最新推荐文章于 2024-02-01 17:54:39 发布

阅读量560

点赞数 1

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

本文链接：https://blog.csdn.net/Rayshaan/article/details/113099086

版权

文章目录

01.Vue声明式渲染

<body>
	<div id="#app">
		{
  {msg}}
	</div>

	<script src="js/vue.js"></script>
	<script>
		new Vue({
    
			el:"#app",
			data:{
    
				msg:"Hello!Vue"
			}
		})
	</script>
</body>

在这里插入图片描述

02.MVVM

MVVM指的是一种架构模式。通俗的来讲就是视图模型和控制器的关系

M：viewmodel(model数据模型)
V：view视图
VM:viewModel控制器

<body>
		<!-- 指的是MVVM中的(V)view视图 -->
		<div id="app">
			{
  {msg}}
		</div>
		
		<script src="js/vue.js"></script>
		<script>
		// new Vue指的是MVVM中的VM(viewModel控制器) 把视图和数据联系起来
			new Vue({
    
				el:'#app',
				// data指的是MVVM中的M(model数据模型)
				data:{
    
					msg:'hello'
				}
			})
		</script>
	</body>

03.Vue使用相关问题

el绑定元素不能是html/body

new Vue({
   
    el:'body',
    data:{
   
        message:'Hello!'
    }
})

在这里插入图片描述

el绑定元素可以是标签名、类名、id名。
为了避免不必要的问题，el绑定的元素一般使用的是id名
原因：标签名和类名一般有多个，如果多个符合条件，只执行第一个符合条件的，而id名是唯一性的

<!-- 使用标签名的问题 -->
<body>   
    <div>
        {
  {message}}

最低0.47元/天解锁文章

11adaacc

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue插值表达式和事件

文章目录01.Vue声明式渲染02.MVVM03.Vue使用相关问题04.插值表达式05.事件06.操作标签内容01.Vue声明式渲染<body> <div id="#app"> {{msg}} </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ msg:"Hello!Vue" }
复制链接

扫一扫