认识VUE
前端三大框架 Angular.js、React.js、Vue.js,目前最热的是Vue 并且使用热度还在递增中.
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
将VUE的JS源码库下载下来:https://cn.vuejs.org/v2/guide/installation.html
vue已经将操作页面的方法都封装好,我们只需要对数据进行修改就可以完成页面的显示。vue的核心思想是只要改变数据,页面就发生变化。
基本语法
导入VUE
<script src="vue.js"></script> //引入后就不可以在里面写东西了
创建VUE对象
<div id="app"> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> / 创建vue对象 从一个vue对象开始 作用于定位的元素的自己或内部 //最基础的实例Vue的方法 var vm = new Vue({ // 元素 el:'#app',//定位div的绑定 el全称就是element // 存储数据 data:{ msg:'同志们!辛苦了!' }, // 方法 methods:{ } }) </script>
魔板语言引用--- { { } }
<div id="app">{{data}}</div>
练习:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--魔板语言--> {{msg}} </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script> // 创建vue对象 从一个vue对象开始 作用于定位的元素的自己或内部 //最基础的实例Vue的方法 var vm = new Vue({ // 元素 el:'#app',//定位div的绑定 el全称就是element // 存储数据 data:{ msg:'同志们!辛苦了!' }, // 存储方法 methods:{ change(){ }, //方法和方法之间是需要有逗号来分隔 } }) </script> </body> </html> //首先实例了vue,通过el元素绑定了 div里面的 '#app' ,在div中通过模板语言直接展示出来
效果图:
魔板语言
<span>{{msg}}</span> <span>{{ flag ? 'apple' : 'grape' }}</span> <span>{{num+1}}</span>
指令
带有v-的在vue中叫做指令,指令实际就是vue封装的一些js操作,当数据值发生变更后,将其产生的影响,作用与DOM中,创建的指令v-bind、v-on、v-if、v-for
v-on(绑定事件)
<div id="app"> <span>{{msg}}</span> // 完整写法 //通过绑定changeData方法,实现点击按钮,将原有的msg'亲爱的同学们!加油!'改为'老铁们加油' <input type="button" v-on:click="changeData" value="改变MSG"> //简写,简写直接在事件前加@ <input type="button" @click="changeData" value="改变MSG"> </div> <script> var vm = new Vue({ // 元素 el:'#app', // 数据源 data:{ msg:'亲爱的同学们!加油!' }, // 方法 methods:{ changeData() { this.msg = '老铁们加油!' } } }) </script>
v-bind(绑定属性)
在魔板语言中,我们可以通过{{data}}的形式将data中的数据渲染到页面上,如果我们要将data中的属性赋值给标签的属性时就不能用{{data}}格式来写了。需要用到属性绑定
<a href="{{url}}">跳转到百度地址</a> // 完整写法 <a v-bind:href="url">跳转到百度地址</a> // 缩写 <a :href="url">跳转到百度地址</a>
绑定class(class属性字典的写法)
<!--冒号左侧为对应的css的class样式,右侧为判断是否显示当前class样式--> <p v-bind:class="{blue:isBlue,red:isRed}">蓝色字体红色背景色</p>
绑定class(class属性数组的写法)
<!--数组的写法中,每个值代表一个样式,所以要写成字符串--> <p v-bind:class="['blue','red']">蓝色字体红色背景色</p> <!--如果isBlue为真,则blue显示,否则为空,则不显示--> <p v-bind:class="[isBlue?'blue':'','red']">蓝色字体红色背景色</p
v-if、v-else-if、v-else(条件渲染)
指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回true 值的时候被渲染
<body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <span v-if="number==10086">移动-v-if</span> <span v-else-if="number==10010">联通</span> <span v-else="number==10010">电信</span> <span v-show="number==10086">移动-v-show</span> <span v-show="number==10010">联通111</span> </div> <script> var vm = new Vue({ //元素 el: '#app', //存储数据: data: { number: 10086, } }) </script> PS:通过div中的id绑定定位到number,然后在span标签中的v-if、v-else-if、v-else进行判断
效果图:
v-show(条件渲染)
根据条件渲染的另一种写法,它独立自己使用,和v-if的使用相同,区别在于v-if条件不成立,元素不会被创建,而v-show条件不成立只是增加了一个display:none的属性。
<span v-show="phoneNumber==10086"> 中国移动 </span>
官网对v-if和v-show的推荐指南
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
v-for(列表渲染)
- 列表循环
- 字典循环
<div id="app"> <!--列表循环--> <div v-for="item in games" >{{item}}</div> <div v-for="(item,index) in games" >{{item}}--{{index}}</div> //如果想将下标和数值都展示出来,需要用()括起来,item是值,index是下标 <!--字典循环--> <div v-for="item in dict_games">{{item}}</div> <div v-for="(item,key) in dict_games">{{item}}--{{key}}</div> //将字典的value 和key都循环出来, </div> <script> //最基础实例Vue的方法, var vm=new Vue({ //元素 el:'#app', //存储数据: data:{ games:['绝地求生', '英雄联盟', '王者荣耀'], dict_games:{'name':'绝地求生', 'company':'蓝洞'} } }) </script>
任何付出都是值得的,会越来越好