经验总结

  1. 首页 > 生活 > >

一篇文章带你了解网页框架——Vue简单入门( 二 )

生活百科

Data数据对象介绍学习过Vue的基本使用后，我们对Data做出最基本的介绍：

  • Data用于存储页面元素中使用的各类属性
  • 属性可以包括各种类型，例如文本，数组等复杂类型
  • 渲染复杂类型数据时，遵循JavaScript的语法基本都可以使用
我们给出简单示例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>data:数据对象</title></head><body><div id="app"><!--使用{{}}调用data数据-->{{ message }}<!--对象采用.来调用内部元素--><h2> {{ school.name }} {{ school.mobile }}</h2><ul><!--数组采用[index]来选择内部元素--><li>{{ campus[0] }}</li><li>{{ campus[3] }}</li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"你好!",school:{name:"河南师范大学",mobile:"0373-3325000"},campus:["东校区","西校区","新乡校区","平原湖校区"]}})</script></body></html>Vue本地应用在介绍了Vue的基本使用后，我们针对Vue内部的各种属性方法来做出一一介绍
每条属性或方法我们都会给出解释和相关案例
v-text文本解释：
v-text：设置标签的文本值
代码解释：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-text指令</title></head><body><div id="app"><!--我们采用v-text来设置标签内文本，注意会覆盖掉内部文本，“深圳”将不再显示--><h2 v-text="message+'!'">深圳</h2><h2 v-text="info+'!'">深圳</h2><!--另一种文本书写方式{{}}--><h2>{{ message +'!'}}深圳</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"河南师范大学",info:"软件学院"}})</script></body></html>v-html文本解释：
v-html：以html的格式来设置标签的文本值
代码解释：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-html指令</title></head><body><!--v-html:设置元素的innerHTML--><!--采用v-html后显示的是河南师范大学的加粗版，但采用v-text后显示的是<strong>河南师范大学</strong>--><div id="app" v-html="context"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{content:"<strong>河南师范大学</strong>"}})</script></body></html>v-on文本解释：
v-on：为元素绑定事件，可以采用@代替
代码解释：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on</title></head><body><div id="app"><!--v-on：后面跟事件名 用于绑定事件 可以用@代替 后面用methods中的方法即可--><input type="button" value="https://www.huyubaike.com/biancheng/点击" v-on:click="doIt"><input type="button" value="https://www.huyubaike.com/biancheng/点击" @click="doIt"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",methods:{doIt:function(){alert("河南师范大学");}}})</script></body></html>

经验总结扩展阅读


上一篇：2023年2月9日拜观音黄道吉日 2023年农历正月十九宜拜观音吗

下一篇：2023年农历正月十九宜求神拜佛吗 2023年农历正月十九求神拜佛吉日