认识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>