一.什么是Vue
Vue是一套用于构建用户界面的渐进式框架
二.Vue的特点和优点
特点:Vue是尤玉溪创造的,分为v2和v3两个版本,其中v3是近年刚出的,所以还是二使用的较为广泛,它结合了angular的指令与react的组件,以及虚拟的dom
优点:Vue中文文档较为完善,生态相较于其他的前端框架比较丰富(也就是插件比较多),上手也比较简单,适合新手小白学习,Vue存在一些指令,组件,虚拟的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开头的特殊属性,通过指令可以进行一些简单的操作,比如:
1.可以渲染实例的值:<h1 v-text="msg"></h1>
2.进行简单的数学运算:<h1 v-text="2+3"></h1>
3.使用js表达式:<h1 v-text="msg.length"></h1>
4.如果是文本需要加单引号:<h1 v-text="msg + ',像春天的花一样' "></h1>
5.三目运算符:<h1 v-text="5+6>9 ? '大于' : '小于' "></h1>....
下面列举一些简单的常用的指令:
1.文本渲染指令:{{}}、v-text、v-html
2.条件渲染指令:v-if、v-else、v-else-if、v-show
这里需要注意一点:v-if和v-show有一定的区别
1.都是用来控制显示与隐藏
2.v-if是通过dom操作实现隐藏,v-show通过css方式实现隐藏
3.频繁切换用v-show,反之用v-if
3.遍历指令:v-for、v-key
4.属性绑定:v-bind(简写为:)
5.事件绑定:v-on:事件名(例:v-on:click)(简写为@事件名)(例:@click)