前端三个框架 Angular.js、React.js、Vue.js Vue开发使用热度不断上升
VUE源码下载地址:https://cn.vuejs.org/v2/guide/installation.html
VUE核心思想:将页面的方法封装好,我们只需要修改数据就会完成相应的页面展示
基础语法
导入VUE
1 <!--方法一:引用网址导入--> 2 <script src = 'https://unpkg.com/vue/dist/vue.js'></script> 3 <!-- 下载VUE.js后本地引入--> 4 <script src="../JS/vue.js"></script>
创建VUE对象
1 <script> 2 //实例化一个vue对象 3 var vm = new Vue({ 4 //el元素通过id绑定元素 5 el:'#app', 6 //存储数据 7 data:{ 8 msg:'hi vue!' 9 } 10 }) 11 </script>
魔板语言引用
<div id="app"> {{msg}} </div>
魔板语言支持简单判断和运算
1 <span>{{msg}}</span> 2 <span>{{ flag ? 'apple' : 'grape' }}</span> 3 <span>{{num+1}}</span>
定义方法
1 //实例化一个vue对象 2 var vm = new Vue({ 3 //el元素通过id绑定元素 4 el:'#app', 5 //存储数据 6 data:{ 7 msg:'hi vue!' 8 }, 9 methods:{ 10 //第一种方法定义: 11 // changeData:function () { 12 // this.msg = '加油' 13 // }, 14 //第二种方法定义(第二种更简单): 15 changeData(){ 16 this.msg = '呵呵' 17 } 18 } 19 })
指令
带有v -在vue中叫做指令,指令实际就是vue封装的一些js操作,当数据值发生变更后,将其产生的影响,作用与DOM中,创建的指令v-bind、v-on、v-if、v-for
v-on绑定事件
1 <div id="app"> 2 <!-- 魔板语言--> 3 <span>{{msg}}</span> 4 <!-- 写法一:--> 5 <!-- <input type="button" v-on:click="changeData" value="修改">--> 6 <!-- 写法二,简写,后面都用这种:--> 7 <input type="button" @click="changeData" value="修改"> 8 </div>
1 //实例化一个vue对象 2 var vm = new Vue({ 3 //el元素通过id绑定元素 4 el:'#app', 5 //存储数据 6 data:{ 7 msg:'hi vue!', 8 }, 9 methods:{ 10 changeData(){ 11 this.msg = '呵呵' 12 } 13 } 14 })
v-bind绑定属性
在魔板语言中,我们可以通过{{data}}的形式将data中的数据渲染到页面上,如果我们要将data中的属性赋值给标签的属性时就不能用{{data}}格式来写了。需要用到属性绑定
<a href="{{url}}">跳转到百度地址</a> // 完整写法 <a v-bind:href="url">跳转到百度地址</a> // 缩写 <a :href="url">跳转到百度地址</a>
v-if、v-else-if、v-else(条件渲染)
用于选择性渲染某一块数据,当符合哪一个条件就执行哪个标签
1 <span v-if="number==10086">移动</span> 2 <span v-else-if="number==10010">联通</span> 3 <span v-else>电信</span>
v-show条件渲染
与v-if逻辑相同,区别在于当条件不满足时,自动给标签加dispaly:none属性,隐藏标签
1 <span v-show="number==1003122">中国移动</span>
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
v-for列表循环
渲染数组
1 games:['绝地求生', '英雄联盟', '王者荣耀'] 2 <ul v-for="game in games"> 3 <li>{{game}}</li> 4 </ul> 5 6 <!-- 列表循环时如果想增加索引值可以将索引值写在值的后面,用括号括起来--> 7 <ul v-for="(game, index) in games"> 8 <li>{{game}}--{{index}}</li> 9 </ul> 10 11 games:[{"name":"绝地求生"},{"name":"英雄联盟"},{"name":"王者荣耀"}] 12 <ul v-for="(game, index) in games"> 13 <li>{{game.name}}--{{index}}</li> 14 </ul>
渲染对象(即python中的字典)
1 games:{'name':'绝地求生', 'company':'蓝洞'} 2 <ul v-for="value in games"> 3 <li>{{value}}</li> 4 </ul> 5 <!--循环对象,需要k,v一起循环则增加个参数,参数1是value,参数2是key--> 6 <ul v-for="(value,key) in games"> 7 <li>{{key}}--{{value}}</li> 8 </ul>