VUE基础1方法与指令

前端三个框架 Angular.js、React.js、Vue.js    Vue开发使用热度不断上升

VUE源码下载地址：https://cn.vuejs.org/v2/guide/installation.html

VUE核心思想：将页面的方法封装好，我们只需要修改数据就会完成相应的页面展示

基础语法

导入VUE

<!--方法一：引用网址导入--> 
 <script src = 'https://unpkg.com/vue/dist/vue.js'></script> 
<!-- 下载VUE.js后本地引入--> 
<script src="../JS/vue.js"></script>

创建VUE对象

<script>
    //实例化一个vue对象
    var vm = new Vue({
        //el元素通过id绑定元素
        el:'#app',
        //存储数据
        data:{
            msg:'hi vue!'
        }
    })
</script>

魔板语言引用

<div id="app">
     {{msg}}
</div>

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

<span>{{msg}}</span>
<span>{{ flag ? 'apple' : 'grape' }}</span>
<span>{{num+1}}</span>

定义方法

    //实例化一个vue对象
    var vm = new Vue({
        //el元素通过id绑定元素
        el:'#app',
        //存储数据
        data:{
            msg:'hi vue!'
        },
        methods:{
            //第一种方法定义：
            // changeData:function () {
            //     this.msg = '加油'
            // },
            //第二种方法定义（第二种更简单）：
            changeData(){
                this.msg = '呵呵'
            }
        }
    })

指令

带有v -在vue中叫做指令，指令实际就是vue封装的一些js操作，当数据值发生变更后，将其产生的影响，作用与DOM中，创建的指令v-bind、v-on、v-if、v-for

v-on绑定事件

 <div id="app">
<!--        魔板语言-->
        <span>{{msg}}</span>
<!--        写法一：-->
<!--        <input type="button" v-on:click="changeData" value="修改">-->
<!--        写法二，简写，后面都用这种：-->
        <input type="button" @click="changeData" value="修改">
    </div>

 //实例化一个vue对象
    var vm = new Vue({
        //el元素通过id绑定元素
        el:'#app',
        //存储数据
        data:{
            msg:'hi vue!',
        },
        methods:{
            changeData(){
                this.msg = '呵呵'
            }
        }
    })

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（条件渲染）

用于选择性渲染某一块数据，当符合哪一个条件就执行哪个标签

<span v-if="number==10086">移动</span>
<span v-else-if="number==10010">联通</span>
<span v-else>电信</span>

v-show条件渲染

与v-if逻辑相同，区别在于当条件不满足时，自动给标签加dispaly:none属性，隐藏标签

        <span v-show="number==1003122">中国移动</span>

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for列表循环

渲染数组

games:['绝地求生', '英雄联盟', '王者荣耀']    
<ul v-for="game in games">
    <li>{{game}}</li>
</ul>
 
<!--    列表循环时如果想增加索引值可以将索引值写在值的后面，用括号括起来-->
<ul v-for="(game, index) in games">
    <li>{{game}}--{{index}}</li>
</ul>
 
games:[{"name":"绝地求生"},{"name":"英雄联盟"},{"name":"王者荣耀"}]
<ul v-for="(game, index) in games">
    <li>{{game.name}}--{{index}}</li>
</ul>

渲染对象（即python中的字典）

games:{'name':'绝地求生', 'company':'蓝洞'}
<ul v-for="value in games">
    <li>{{value}}</li>
</ul>
<!--循环对象，需要k,v一起循环则增加个参数，参数1是value，参数2是key-->
<ul v-for="(value,key) in games">
    <li>{{key}}--{{value}}</li>
</ul>