Vue.js Day1

it2022-05-05  112

vue 的基本代码

一、vue的基本代码

1、导入vue的包
#导入vue的包 <script src="./lib/vue-2.4.0.js"></script>
2、创建一个vue实例

当我们导入包之后,在浏览器的内存中,就多了一个Vue构造函数

<body> <!--将来new的vue实例,会控制这个元素中的所有内容> <!--vue实例所控制的这个区域就是我们的V> <div id="app"> <p>{{ msg }}</p> </div> <script> //注意:我们new出来的这个vm对象,就是我们MVVM中VM的调度者 var vm = new Vue({ el:'#app', //表示,当前我们new的这个vue实例,要控制页面上的哪个区域 //这里的data就是MVVM中的M,专门用来保存每个页面的数据的 data:{//data属性中,存放的是el中要用到的数据 msg: '欢迎学习vue' //通过Vue提供的指令,很方便的把数据渲染到页面上,程序员不再手动操作DOM元素(前端的vue之类的框架不提倡我们手动操作DOM元素) } }) </script> </body>

二、v-cloak的学习

<head> <script src="./lib/vue-2.4.0.js"></script> <style> [v-cloak]{ dispaly:none; } </style> </head> <body> <div id="app"> <!--使用v-cloak能够插值表达式闪烁的问题--> <p v-cloak>{{msg}}</p> <!--默认v-text没有闪烁问题--> <!--v-text会覆盖元素中原本的内容,但是插值表达式,只会替换自己的这个占位符,不会把整个元素的内容清空--> <h4 v-text="msg"></h4> <!--可以把内容当html --> <div v-html="msg2"></div> </div> <script> var vm = new Vue({ el:'#app', data:{ msg:'123' msg2:'<h1>我是一个大大的H1</h1>' } }) </script> </body>

最新回复(0)