Vue_1-0_Vue基本框架+简单数据绑定

陪你去流浪_

于 2021-07-02 17:23:08 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/jokerxiuka/article/details/118420033

版权

本文介绍了使用Vue.js实现基本框架及简单数据绑定的示例。通过创建Vue实例，将`#app`元素交由Vue管理，并利用`v-model`指令实现输入框与展示内容的同步更新。示例中展示了如何初始化数据以及如何直接修改属性数据，从而达到视图与模型的实时同步。

摘要由CSDN通过智能技术生成

Vue基本框架+简单数据绑定

<div id="app"><!-- View -->
<input type="text" v-model="message"><!--双向数据绑定-->
	<p>Hello {{message}}</p>
</div>

<script src="./js/vue.js"></script>
<script>
//创建Vue实例vm，Vue是一个vue.js库提供的构建函数
    const vm = new Vue({     //配置对象（属性名必须是指定的一些名称）
        el:'#app',//element : 选择器字符串 表明将哪个元素交给vue管理
        data:{//数据（Model）
        message:'Vue!'//初始数据
    	}
    })
    vm.message='huzi';//修改属性数据
</script>

输入框里的内容与框下的内容同步更新
在这里插入图片描述