vue的基本使用 ╰+哭是因爲堅強的太久メ 2023-07-11 06:11 1阅读 0赞 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> [v-cloak]{ display: none; } </style> </head> <body> <!--定义vue的操作对象--> <div id="app"> <!-- 如果vue.js在该代码下方导入，v-cloak 属性解决数据闪烁问题，但需要配合上面的css代码--> <p v-cloak>{ { msg }}</p> <!--将数据渲染到DOM中 如果导入文件的位置在渲染数据的下方，会出现数据闪烁的问题--> <!--{ { }} 不会覆盖原有的数据，并且可以在括号前或括号后添加任意字符--> <p>{ {msg}}</p> <!--使用 v-text 属性渲染数据 该属性不会出现数据闪烁的问题 --> <!--但该属性会覆盖元素中原有的数据--> <p v-text="msg"></p> <!-- v-text 属性不会解析html代码--> <p v-text="msg2"></p> <!-- v-html 能解析html代码--> <p v-html="msg2"></p> <!-- v-bing 绑定属性的值 引号中的title被认为是一个变量的表达式 一个冒号，同样的效果--> <input type="button" value="提交" v-bind:title="title"> <input type="button" value="提交" :title="title"> <!-- 在绑定的值中拼接一个字符串--> <input type="button" value="提交" :title="title + '123'"> <!-- vue中v-on事件绑定 以点击事件为例 引号内的字符被认为是一个表达式 @有同样的效果--> <input type="button" value="点击弹框" v-on:click="show"> <input type="button" value="点击弹框" @click="show"> </div> <!--导入vue.js--> <script src="./vue.js"></script> <script> //创建一个vue实例 var vm = new Vue({ el:"#app", //指定实例控制的DOM元素 data:{ //存储页面数据 msg:"欢迎学习vue", msg2:"<h1>我是一个字符串</h1>", title:"这是一个按钮" }, methods:{ //在此处定义实例可用的所有方法 show(){ alert('holle') } } }) </script> </body> </html>
还没有评论，来说两句吧...