vue基础知识和原理

学VUE 496849654@qq.com 1年前 (2023-06-13) 730次浏览

初识Vue

想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
demo容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
demo容器里的代码被称为【Vue模板】
Vue实例和容器是一一对应的
真实开发中只有一个Vue实例,并且会配合着组件一起使用
{{xxx}}是Vue的语法:插值表达式,{{xxx}}可以读取到data中的所有属性
一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)

<!-- 准备好一个容器 -->
<div id="demo">
	<h1>Hello,{{name.toUpperCase()}},{{address}}</h1>
</div>

<script type="text/javascript" >
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	//创建Vue实例
	new Vue({
		el:'#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
		data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
			name:'hello,world',
			address:'北京'
		}
	});

</script>


css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:vue基础知识和原理
喜欢 (0)