浅学Vue
编程学习
浅学Vue
编程学习

浅学Vue

一、Vue基础

JavaScript相关语法

1、绑定事件

  • @click="" 绑定单机事件
  • @onclick="" 绑定双击事件
  • @keyup.enter="" 绑定回车事件

2、数组

  • arr:["s1","s2","s3",] 创建数组
  • arr.push() 在数组末尾添加元素
  • arr.splice(index,length) 从指定索引删除，并指定删除元素数量
  • arr.length 获取数组长度
  • arr.splice(0) 清空数组

其他

  • console.log("") 控制台输出
  • this.method() 在其他方法中调用method方法

1、Vue简介

https://cn.vuejs.org/v2/guide/

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

VScode缩进快捷键：Shift+Alt+F

2、第一个Vue程序

  • 引入Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  • 编写页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue基础</title>
</head>
<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

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

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '你好!'
            }
        })
    </script>
</body>
</html>
  • 页面效果

3、el挂载点

Vue实例的el属性可以设置与标签对应的Vue实例，可为标签绑定数据，方法

  • id 选择器："#" (唯一，建议)
<h1 id="app">{{message}}</h1>

<script>
        var app=new Vue({
            el: "#app",
            data: {
                message: "hello world!"
            }
        })
</script>
  • class 选择器："."
<h1 class="app">{{message}}</h1>

<script>
        var app=new Vue({
            el: ".app",
            data: {
                message: "hello world!"
            }
        })
</script>
  • 标签选择器："标签名"
<div>{{message}}</h1>

<script>
        var app=new Vue({
            el:"div",
            data: {
                message: "hello world!"
            }
        })
</script>

4、data数据对象

Vue实例的data属性中，可设置数据值，并根据数据类型，在标签中取出

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{user.name}} , {{user.password}} , {{user.email}}</h2>
        <h2>{{interest[3]}}</h2>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world!!",
                user: {
                    name: "cxk",
                    password: "123123",
                    email: "123@qq.com"
                },
                interest: ["唱", "跳", "rap", "篮球"]
            }
        })
    </script>

取出方式：

基本值：{{ 属性名 }}

对象值：{{ 对象名.属性值 }}

数组值：{{ 数组名[索引] }}

5、methods方法

Vue实例的methods属性是为标签绑定方法

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app3">
        <input type="button" value="单机事件测试" v-on:click="doCode">
</div>

<script>
var v_on=new Vue({
            el:"#app3",
            data:{
                food:"sandwitch"
            },
            methods:{
                doCode:function(){
                    alert("doCode!!!")
                }
            }                
        })
</script>

二、本地应用

1、v-text

可以将标签中的内容替换成v-text中引入的内容

只适用于纯文本

可使用+拼接字符串

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div  id="app">
        <h2 v-text="message+' world'"></h2>
        <h2 v-text="message1+' jntm'"></h2>
        <h2>{{message+' !'}}</h2>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello",
                message1:"cxk!"
            }
        })
    </script>

2、v-html

可适用将html内容（超链接，按钮...）替换标签内容

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app2">
        <h2 v-text="context"></h2>
        <h2 v-html="context"></h2>
    </div>

    <script>
        var v_html=new Vue({
            el:"#app2",
            data:{
                context:"<a href='https://www.baidu.com'>百度</a>"
            }
        })
    </script>

标签显示区别：

3、v-on

为标签绑定事件，事件方法可写成函数形式（可传入参数）

事件名不需写on

指令可简写为@

绑定的方法写在Vue实例的methods属性中

<div id="app3">
        <input type="button" value="单机事件测试" v-on:click="doCode">
        <br><br>
        <input type="button" value="简写的单机事件" @click="doCode">
        <br><br>
        <input type="button" value="双击事件" @dblclick="doCode">
        <br><br>
        <h2 v-text="food" @click="changeFood"></h2>
        <br><br>
        <button @click="doIt('java!','js!')" >请点击</button>
        <br><br>
        <input type="text" @keyup.enter="sayHi" value="请输入用户名">
</div>

<script>
    var v_on=new Vue({
            el:"#app3",
            data:{
                food:"sandwitch"
            },
            methods:{
                doCode:function(){
                    alert("doCode!!!")
                },
                changeFood:function(){
                    this.food+=" good!!!"
                    v_text.message1+=" sb!"
                },
                doIt:function(n1,n2){
                    alert("hello!"+" "+n1+" "+n2)
                },
                sayHi:function(){
                    alert("确定提交吗？")
                }
            }                
     })

     var v_text=new Vue({
            el:"#app",
            data:{
                message:"hello",
                message1:"cxk!"
            }
      })
</script>

取出同一个vue实例的data值：this.值name

取出不同vue实例的data值： 实例名.值name

4、案例：计数器

通过点击计数器的加号及减号，可以改变中间数字

并且在数字到0和10时，会有分别有弹窗提示不能进行操作

<body>
    <!-- 计数器案例 -->
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <button @click="decline">-</button>
        <span>{{num}}</span>
        <button @click="add">+</button>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                decline: function () {
                    if (this.num == 0) {
                        alert("已经是最小啦！")
                    } else {
                        this.num--;
                    }
                },
                add: function () {
                    if (this.num == 10) {
                        alert("已经是最大的啦！")
                    } else {
                        this.num++;
                    }
                }
            }
        })
    </script>
</body>

5、v-show

根据真假切换元素的显示状态，指令后的值都会切换为布尔型

原理是修改元素display，实现显示和隐藏

  • 通过点击按钮来操纵图片是否显示
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
    <button @click="Show">显示图片</button>
    <button @click="noShow">不显示图片</button>
    <img src="/static/1.gif" alt="" v-show="isShow">
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:true
            },
            methods:{
                Show:function(){
                    this.isShow=true
                },
                noShow:function(){
                    this.isShow=false
                }
            }
        })
    </script>

6、v-if

根据表达式的真假切换元素的显示状态

本质是通过操作dom元素来切换显示状态

根据指令后布尔值的真假，将dom树添加或移除

  • 通过点击按钮来操纵图片是否显示
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <button @click="Show">显示</button>
        <button @click="NoShow">不显示</button>
        <br>
        <img src="/static/1.gif" alt="" v-if="isShow">
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                isShow:true
            },
            methods:{
                Show:function(){
                    this.isShow=true
                },
                NoShow:function(){
                    this.isShow=false
                }
            }
        })
    </script>

7、v-bind

为元素绑定属性，可省略v-bind，只写" ："

  • 图片的路径，标题，样式皆由v-bind绑定
  • 并为图片绑定了单机事件，点击图片后显示边框
<head>
<style>
        .active{
            border: 2px solid red;
        }
</style>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}"
         alt="" @click="isShow">
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                imgSrc:"/static/1.gif",
                imgTitle:"蔡徐坤！",
                isActive:false
            },
            methods:{
                isShow:function(){
                    this.isActive=!this.isActive
                }
            }
        })
    </script>
</body>

8、案例：切换图片

通过数组存储图片，点击上一张或下一张切换图片

点击图片显示边框，再次点击消失边框

当图片到达第一张时上一张按钮消失，到达最后一张时下一张按钮消失

<head>
<style>
        .active{
            border:2px solid black;
        }
    </style>
</head>

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <button type="button" @click="declineImg" v-show="index!=0">
            上一张
        </button>

        <img :src="imgSrc[index]" alt="" :class="{active:isActive}" 
        width="400px" height="200px" @click="isBorder">

        <button type="button" @click="addImg" v-show="index<(imgSrc.length-1)">
            下一张
        </button>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                index: 0,
                imgSrc: [
                    "/static/1.png",
                    "/static/2.png",
                    "/static/3.png",
                    "/static/4.png",
                    "/static/5.png"],
                isActive:false
            },
            methods: {
                addImg: function () {
                    this.index++;
                },
                declineImg: function () {
                    this.index--;
                },
                isBorder: function(){
                    this.isActive=!this.isActive;
                }
            }
        })
    </script>
</body>

9、v-for

根据数据生成列表结构，经常与数组配合使用

（item,index）in 数组

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                {{index}} username：{{item}}
            </li>
        </ul>
        <br><br>
        <button @click="addFood">增加</button>
        <button @click="decline">减少</button>
        <br><br>
        <h2 v-for="(item) in foods">
            {{item.name}}
        </h2>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:["cxk","qbl","lbw","wjz"],
                foods:[
                    {name:"sandwitch"},{name:"tock"}
                ]
            },
            methods:{
                addFood:function(){
                    this.foods.push({name:"orange"})
                },
                decline:function(){
                    this.foods.shift();
                }
            }
        })
    </script>

  • 将数组数据及索引遍历在页面

  • 点击增加与减少按钮，在数组中添加或减少数据。同时页面也随之添加或减少

10、v-model

可用来设置和获取表单元素更改后的值

绑定的data数据和标签内容相关联，一改都改

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app">
        <input type="text" v-model="message" @keyup.enter="show">
        <button @click="changeIt">改变为值为LBW</button>
        <h2>{{message}}</h2>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"cxk"
            },
            methods:{
                show:function(){
                    alert(this.message);
                },
                changeIt:function(){
                    this.message="LBW!";
                }
            }
        })
    </script>

11、案例：图书列表

  • 将数组中的书名展示在页面列表中
  • 点击添加按钮即可往数组和页面中添加书名
  • 点击删除按钮即可删除当前索引位置图书
  • length显示当前图书数量，点击清空图书按钮清空数组和页面中所有图书

<body>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

    <div id="app" class="jumbotron">
        <h2>BOOK CHARGE</h2>
        <input type="text" v-model="bookName">
        <button @click="addBook" >添加图书</button>
        <br>
        <ul>
            <li v-for="(item,index) in arr">
                {{index+1}} {{item}}  
                <button @click="declineBook(index)" >删除</button>
            </li>
        </ul>
        <p v-if="arr.length!=0">length:{{arr.length}}</p>
        <button @click="clearBook" v-if="arr.length!=0">
            清除所有图书
        </button>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                arr:["Java编程思想","深入理解JVM虚拟机","Spring技术内幕","Effective Java"],
                bookName:"请输入书名"
            },
            methods:{
                addBook:function(){
                    this.arr.push(this.bookName);
                },
                declineBook:function(index){
                    this.arr.splice(index,1);
                },
                clearBook:function(){
                    this.arr.splice(0);
                }
            }
        })
    </script>
</body>

发表回复

您的电子邮箱地址不会被公开。