Vue入门:看这一篇就够了

编程入门 行业动态 更新时间:2024-10-11 09:20:38

Vue入门:看<a href=https://www.elefans.com/category/jswz/34/1768373.html style=这一篇就够了"/>

Vue入门:看这一篇就够了

高速通道

  • 官网实栗
  • vue指令
    • v-text: 设置标签的文本值(textContent)
    • v-html: 设置标签的innerHTML
    • v-on: 为元素绑定事件
    • v-show:根据表达式的真假切换元素的显示和隐藏
    • v-if:根据表达式真假,切换元素显示与隐藏
    • v-bind:设置元素的属性
    • v-for:根据数据生成列表结构
    • v-model:获取和设置表单元素的值(双向数据绑定)
  • 网络请求 axios
      • 使用axios进行网络交互案例
  • 小叮当任意门:
  • 感谢点赞

话不多说,直接开干。
先来个官网实栗吧。

官网实栗

<body><!--第一个vue实栗--><div id="app">{{message}}</div><script src=".js"></script><script>//注意这里构造Vue开头要大写哦,不然会报引用错误var app = new Vue({el:'#app',data:{message:'hello world'}})</script></body>

el挂载点:
1、el是用来设置vue实栗挂载(管理)的元素
2、vue会管理el选项命中的元素及其内部的后代元素
3、可以使用其他的选择器,建议使用ID选择器
4、可以使用其他双标签,除了HTML和BODY

data数据对象:
vue中用到的数据定义在data中
data可以写复杂类型的数据,包括表达式

vue指令

vue指令是指以v-开头的一组特殊语法

v-text: 设置标签的文本值(textContent)

<body><div id="app"><h3 v-text="message">小白</h3><h3 v-text="info">定居在</h3><h3>{{address}}定居</h3></div><script src=".js"></script><script>var app = new Vue({el:'#app',data:{message:'前端程序员',info:'目前',address:'杭州'}})</script>
</body>

v-text指令的作用是设置标签的内容
默认写法会替换全部内容,使用{{}}可以替换指定内容
内部支持表达式

v-html: 设置标签的innerHTML

<body><div id="app"><p v-html="content"&

更多推荐

Vue入门:看这一篇就够了

本文发布于:2024-02-06 23:00:41,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1751596.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:这一   入门   就够了   Vue

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!