Vue概念

什么是Vue?

vue 是一套用于构建用户界面的渐进式框架。

特点?

结合了angular的指令与react的组件,虚拟dom;

渐进式javascript框架。

优点?

中文文档(生态丰富(插件多),上手简单);

指令,组件,虚拟dom

导入与实例化?

模板:<div id="app"> ​ <h1>{{msg}}</h1> ​</div>

引入:<script src="./js/vue.js"></script>

实例化:new Vue({ el:"#app", data:{msg:"你好Vue ! "} )}

指令与模板(vue的数据和模板产生联系主要是通过指令)

指令与模板?

 特点:

就是v开头的特殊属性它的值预期为javascript单行表达式

可以渲染实例的值v-text="msg"

数学运算v-text=“2+3"

使用js表达式v-text="msg.length"

如果是文本需要加单引号v-text="我在中国,'+msg”

指令是联系模板与vue实例的桥梁

Vue的实例?

var  vm = new Vue({...})                

vm 就是newVue创建的实例

文本渲染指令?

  • {()}
    • 渲染vue的数据
    • 执行js的普通方法split分割,reverse翻转数组,join连接数组为字符串
    • 数学运算
    • 三元运算(不能使用if,for等多行命令)
  • v-text
    • 文本渲染指令
  • v-html
    • html文本渲染指令
  • 条件渲染指令
    • v-if
    • v-else
    • v-else-if
    • v-show
      • 隐藏元素以css的方式(频繁切换用v-show,少量v-if)
  • 遍历指令
    • v-for
      • 字符串,数字,列表,对象进行遍历
      • <p v-for="(item,index) in list" v-key="item">{{index+1}}--{{item}</p>
        • item 遍历的元素(自定义的名称); ​index 遍历的下标(键名); list 被遍历的数据
    • v-bind:key
      • Vue在渲染列表的时候更加优化,v-key的值必须是唯一的
        • 不建议用随机或者index
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值