初学着入门Vue第一篇
1.Vue的特点和优点2.介绍了Vue的导入与实例化方式3.指令与模板4.文本渲染指令5.条件渲染指令7.Vue遍历
一.什么是Vue
Vue是一套用于构建用户界面的渐进式框架
二.Vue的特点和优点
特点:1.是由尤雨溪所创造的,v2与v3两个版本
2.结合了Angular的指令于React的组件,虚拟dom
3.渐进式javascript框架
优点:1.是中文文档
2.生态丰富(插件多)上手简单
3.指令,组件,虚拟dom
三.如何导入Vue与实例化:
第一种:本地引入js文件<script src="./js/vue.js"></script>
第二种:通过链接引入js:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
实例化操作比较简单,需要new一个Vue内部定义好使用范围(el:指定模板范围),只能在指定的范围内起作用,超出指定范围则无效,然后在data属性内部定义指定的数据
四.Vue指令与模板
Vue的数据和模板产生联系主要是通过指令,指令是联系模板与Vue实例的桥梁Vue的指令就是v-开头的特殊属性,通过指令可以进行一些简单的操作,如下:
五.文本渲染指令
{{}} v-text v-html(会解析html文本||innerHTML)
六.条件渲染指令
v-show:隐藏元素以css的方式 display:none/display:block 频繁切换用v-show 少量切换用v-if
v-if:是通过dom操作实现隐藏
v-else,v-else-if
七.遍历
v-for:字符串,数字,列表,对象进行遍历
<p v-for="(item,index) in list" v-key="item">{{index+1}}-{{item}}</p>
item 遍历的元素(自定义的名称
index 遍历的下标(键名)
list 被遍历的数据
v-key:值必须是唯一
伪类让Vue更好的优化渲染列表
更多推荐
所有评论(0)