Vue学习一：vue2的基本指令

Vue是一个构建用户界面的渐进式框架。官网：https://cn.vuejs.org/。

Vue可以用网上的CDN，也可以下载到本地（下载的话就是进入官网打开学习文档，点击基础里面的安装，点击里面的开发版本这几个字，建议下载开发版本，里面包含完整的警告和调试模式）

1、创建Vue2实例

首先将下载的vue.js引入到html中，路径按照自己下载的来。

<script src="./vue.js"></script>

弄一个div盒子，给一个id属性

<div id="box01">
　　<h1>{{msg}}</h1>
　　<h2>{{ age >= 18 ? '成年':'未成年'}}</h2>
</div>

创建Vue实例，记得放到script标签里面，el使用id选择器关联上面的盒子，data中存放数据，methods中写方法。Vue实例的作用为关联的DOM提供数据和方法。

<script>
　　const box01 = new Vue({
　　　　el:'#box01',
　　　　data:{
　　　　　　msg:'阿龙',
　　　　　　age:20
　　　　},
　　　　methods:{
　　　　}
　　})
</script>

2、插值表达式

插值表达式就是从vue实例中的data拿数据并渲染到页面，使用两个花括号，花括号里面写表达式。拿数据时直接使用data中的数据的变量名。

3、Vue的响应式特性

数据改变，视图自动更新。

访问和修改数据：1）访问数据，"实例.属性名"；2）修改数据，"实例.属性名"="值"

4、基本指令

Vue指令就是带有v-前缀的特殊属性，不同属性对应不同功能。

v-html

1.作用:动态解析标签。

2.语法:v-html="表达式"

<div id="box01">
    <div v-html="msg"></div>
</div>
<script>
    const box01 = new Vue({
        el:'#box01',
        data:{
            msg:`<a href="https://www.baidu.com">阿龙</a>`
        }
    })
</script>

View Code

v-show
1.作用: 控制元素显示隐藏
2.语法: v-show= "表达式"，表达式值true显示，false 隐藏
3.原理:切换display:none控制显示隐藏
4.场景:频繁切换显示隐藏的场景

v-if
1.作用:控制元素显示隐藏( 条件渲染)
2.语法: v-if="表达式"，表达式值true显示，false 隐藏
3.原理:基于条件判断，是否创建或移除元素节点
4.场景:要么显示，要么隐藏，不频繁切换的场景

v-else和v-else-if
1.作用:辅助v-if进行判断渲染
2.语法: v-else或v-else-if = "表达式"
3.注意:需要紧挨着v-if一起使用

v-on
1.作用: 注册事件=添加监听+提供处理逻辑
2.语法:
①v-on:事件名= "内联语句"
②v-on:事件名= "methods中的函数名"
3.简写: @事件名

<div id="box06">
    <div style="border: 2px solid #000000;width:300px" class="box">
        <h3>阿龙自动贩卖机</h3>
        <button @click="buy(5)">咖啡5元</button>
        <button @click="buy(10)">白酒10元</button>
    </div>
    <p>余额：{{money}}元</p>
    <div>
        <button @click="index--" v-show="index > 0">上一页</button>
        <img :src="list[index]">
        <button @click="index++" v-show="index < 4">下一页</button>
    </div>
</div>
<script>
    const box06 = new Vue({
    el:'#box06',
    data:{
        money:100000,
        index:0,
        list:[
            './img/beautifulGirl01.PNG',
            './img/beautifulGirl02.PNG',
            './img/beautifulGirl03.PNG',
            './img/beautifulGirl04.PNG',
            './img/beautifulGirl05.PNG',
        ]
    },
    methods:{
        buy(price){
            this.money -= price
        }
    }
})
</script>

View Code

v-bind
1.作用: 动态的设置html的标签属性→src、url、title等
2.语法: v-bind:属性名="表达式"
3.注意: 简写形式:属性名="表达式"

v-for
1.作用:基于数据循环，多次渲染整个元素→数组、对象、数字

v-for中的key
语法: key属性="唯一标识"
作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用。

<div id="box07">
    <h3>书架</h3>
    <ul>
        <li v-for="item in bookList" :key="item.id">
            <span>{{item.name}}</span>
            <span>{{item.author}}</span>
            <button @click="del(item.id)">删除</button>
        </li>
    </ul>
</div>
<script>
    const box07 = new Vue({
    el:'#box07',
    data:{
        bookList:[
            {id:1,name:"三国演义",author:"罗贯中"},
            {id:2,name:"红楼梦",author:"曹雪芹"},
            {id:3,name:"西游记",author:"吴承恩"},
            {id:4,name:"水浒传",author:"施耐庵"}
        ]
    },
    methods:{
        del(id){
            this.bookList = this.bookList.filter(item => item.id != id)
        }
    }
})
</script>