VUE基础1方法与指令

前端三个框架 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>

扫描二维码关注公众号，回复： 11386257 查看本文章

魔板语言支持简单判断和运算

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>

VUE基础1方法与指令

猜你喜欢