Vue.js 是什么

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

Vue准备

了解关于 HTML、CSS 和 JavaScript 的中级知识。
如果你刚开始学习前端开发，将框架作为你的第一步可能不是最好的。

Vue中文官网教程：https://cn.vuejs.org/v2/guide/

**Vue下载：**https://github.com/vuejs/vue

Idea中使用Vue

需要安装Vue插件：

打开file--->
在这里插入图片描述
下载完成后：

项目结构：
在这里插入图片描述

入门及插值表达式

前端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>


<div id="app">
    <!--v-cloak：解决插值表达式闪烁问题-->
    <p v-cloak>{{msg}}</p>
    <!--v-text等价于插值表示，没有闪烁问题-->
    <p v-text="msg2"/>
    <p v-text="msg3"/>
    <!--插入一个标签元素，需要使用v-html-->
    <p v-html="msg3"></p>
</div>


<!--
引入Vue.JS
script必须成对出现，不能自闭合
MVC ： M   V   C
-->
<script src="../lib/vue.js"></script>
<script>

    //使用Vue，需要一个Vue的对象
    var vm = new Vue({
        //绑定元素el
        el:"#app",
        //传递数据
        data:{
            /*
            Controller
            @ResponseBody  , JSON
            前后端分离 ：
            前端专注于前端及伪造数据，留下接口
            后端专注数据交互，产生真实数据，数据库中的数据，提供请求路径
            */
            msg:"Hello,vue", //请求  ${content}/hello
            msg2:"hello2",
            msg3:"<h1>hello</h1>"
        }
    })
</script>
</body>
</html>

输出结果;
在这里插入图片描述

绑定数据

<!DOCTYPE html>
<html lang="en"
      xmlns:v-bind="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <p>
        <!--绑定HTML元素属性的值，
        需要使用 v-bind: + 属性名 = "vue中数据的key"
        -->
        用户名 ： <input type="text" name="username" v-bind:value="msg">
    </p>

    <p>
        <!--v-bind: 简化就是  :-->
        用户名 ： <input type="text" name="username" :value="msg">
    </p>

    <p>
        <!-- 只要表达式合法，就能执行
        变量 + 变量
        变量 + 字符串常量
        变量 + 字符串 + 变量
        -->
        用户名 ： <input type="text" name="username" :value="msg+'你好'"> <br>
        用户名 ： <input type="text" name="username" :value="msg+'+'+msg">
    </p>

    <!--
    方法调用,绑定方法： v-on:
    click 和 onclick

    1、onclick是绑定事件，告诉浏览器在鼠标点击时候要做什么。
    2、click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件
    3、click可以理解为一次简单的触发，只执行一次，找不到以后就不再执行；
    4、onclick则是给这个id注册一种行为，可以重复触发
    5、click 是方法；onclick是事件；执行click就是模拟鼠标点击，同时会触发onclick事件。
    -->
    <p><button v-on:click="hello()">点击</button></p>

    <!--v-on: 可以简化为一个 @-->
    <p><button @click="hello()">点击</button></p>


    <p><input type="text" value="Hello" :style="style" ></p>

    <!--注意点:
    1. v-bind 用来绑定元素属性的数据,可以是任意属性，只要数据合法；简写为 ：
    2. v-on 给元素事件[包括但不限于，点击，键盘按下，鼠标移动，窗口缩放]绑定方法，只要方法没有错，简写@
    -->


</div>


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

    function f() {
        alert("hello")
    }

    var vm = new Vue({
        //绑定元素el
        el:"#app",
        //数据：
        data:{
            msg:"hello,Vue2",
            style:"border-radius: 20px"
        },
        //方法
        methods:{
            hello:function () {
                alert("方法被调用了！")
            }
        }
    })
</script>




</body>
</html>

结果输出：
在这里插入图片描述

跑马灯效果实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

    <button @click="toStart()">启动</button>
    <button @click="toStop()">停止</button>
    <h6 v-html="msg" :style="style"></h6>
    <input type="text" :value="msg"/>

</div>




<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"希望你们每次来上网，都是因为喜欢，而不是无聊！就像结婚，是因为爱情，而不是因为凑合。",
            //注意点 ： 赋值，在这里不能使用=号 ，要使用冒号
            lightIntervalID:null,
            style:"color: red;font-weight: bold;background-color:black"
        },
        methods:{
            toStart(){
                /*
                vue对象中data、methods里面声明的内容全部都会成为vm的直接属性、方法
                所有这些内容应该直接使用this访问，而不是【this.data.xxx、this.methods.xxx()】
                */
                console.log("Haaa");
                //如果不为null，直接返回（表示此时定时器已经启动，不可重复启动）
                if (this.lightIntervalID!=null) {
                    return;
                }
                var _this = this; //别名
                this.lightIntervalID = setInterval(function () {
                    //字符走动，跑马灯效果
                    _this.msg = _this.msg.substring(1).concat(_this.msg.charAt(0))
                    /*
                    希望你们每次来上网，都是因为喜欢，而不是无聊！就像结婚，是因为爱情，而不是因为凑合。
                    望你们每次来上网，都是因为喜欢，而不是无聊！就像结婚，是因为爱情，而不是因为凑合。希
                    你们每次来上网，都是因为喜欢，而不是无聊！就像结婚，是因为爱情，而不是因为凑合。希望
                    们每次来上网，都是因为喜欢，而不是无聊！就像结婚，是因为爱情，而不是因为凑合。希望你
                    */
                },200);
            },
            toStop(){
                clearInterval(this.lightIntervalID);
                this.lightIntervalID=null;
            }
        }
    })


</script>


</body>
</html>

输出结果
在这里插入图片描述

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <p>
        <!--value是不会变化，但是我们需要的是可以进行调整的
        数据和视图层可以双向绑定的东西。v-model-->
        单价 ：<input type="text" v-model="price">
        数量 ：<input type="text" v-model="num">
        <button @click="calc()">计算</button>
        总价 ：<span v-text="sum"></span>
    </p>

</div>


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

    var vm = new Vue({
        el:"#app",
        data:{
            price:3,
            num:0,
            sum:0
        },
        methods:{
            calc(){
                this.sum = this.price * this.num
            }
        }
    })
</script>
</body>
</html>

结果输出：
在这里插入图片描述

计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">

        num1： <input type="text" v-model="num1">
        <select v-model="opr">
            <option value="+" selected disabled >+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        num2： <input type="text" v-model="num2">
        <button @click="calc()">=</button>
        <span v-text="sum"></span>

</div>


<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num1:0,
            num2:1,
            sum:0,
            opr:'+'
        },
        methods:{
            calc(){
                //判断标识
                var flag = this.opr;
                switch (flag){
                    case '+':
                        //这里取得的值为字符串，我们需要转换为int类型
                        this.sum = parseInt(this.num1) + parseInt(this.num2);
                        console.log(this.sum);
                        break;
                    case '-':
                        //这里取得的值为字符串，我们需要转换为int类型
                        this.sum = parseInt(this.num1) - parseInt(this.num2);
                        console.log(this.sum);
                        break;
                    case '*':
                        //这里取得的值为字符串，我们需要转换为int类型
                        this.sum = parseInt(this.num1) * parseInt(this.num2);
                        console.log(this.sum);
                        break;
                    case '/':
                        //这里取得的值为字符串，我们需要转换为int类型
                        this.sum = parseInt(this.num1) / parseInt(this.num2);
                        console.log(this.sum);
                        break;
                }

            }
        }
    })
</script>
</body>
</html>

结果输出：
在这里插入图片描述

for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <!--v-for：遍历普通数组： val in arrays ， 这个var就是取出来的值  -->
    <p v-for="name in names">{{name}}</p>
    <!--数组下标从0开始，index是默认的属性-->
    <p v-for="name,index in names" v-text="name+'---'+index"/>
    <hr>
    <!--遍历对象数组-->
    <p v-for="student in students">{{student.id}}--{{student.name}}--{{student.age}}
    </p>
    <hr>
    <!--遍历普通对象的键和值-->
    <p v-for="value,key in kuangshen">{{key}}---{{value}}</p>
    <!--for循环固定的次数,遍历的值名不能为var-->
    <p v-for="num in 12">{{num}}</p>
    <!--
    v-for ： 用于循环，可以循环 数组，打印对象的值，循环固定次数；
    value in arrays
    -->
</div>


<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            names:["张三","李四","王五","赵六","田七"],
            students:[
                {id:1,name:"喜洋洋",age:1},
                {id:2,name:"懒洋洋",age:2},
                {id:3,name:"灰太狼",age:3}
            ],
            kuangshen:{id:1,name:"秦疆",age:3,hobby:"code"}
        }
    })
</script>
</body>
</html>

结果输出：
在这里插入图片描述

for循环应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    id: <input type="text" v-model="id">
    name: <input type="text" v-model="name">
    age: <input type="text" v-model="age">
    <button @click="add()">添加信息</button>
    <!--显示所有用户的信息--><hr>
    <p v-for="student in students" :key="student.id">
        <input type="checkbox">
        {{student.id}}--{{student.name}}--{{student.age}}
    </p>

</div>


<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            id:1,
            name:"张三",
            age:2,
            students:[
                {id:1,name:"喜洋洋",age:1},
                {id:2,name:"懒洋洋",age:2},
                {id:3,name:"灰太狼",age:3}
            ]
        },
        methods:{
            add(){
                //添加一个人员信息
                this.students.unshift({id:this.id,name:this.name,age:this.age});
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

v-if&v-show

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">

    <button @click="change()">显示</button>
    <!--如果只有一行代码的情况下，可以直接写在事件中
    一行代码不用写this ， 因为this在我们的函数中，指代本身，但是这里不需要，我们直接操作属性即可；
    -->
    <button @click="flag=false">隐藏</button>
    <button @click="flag=!flag">切换</button>
    <!--v-if为true，则显示-->
    <p v-if="flag">希望你们每次来上网，都是因为喜欢，而不是无聊！就像结婚，是因为爱情，而不是因为凑合。</p>

    <!--v-show为true，则显示-->
    <p v-show="flag">希望你们每次来上网，都是因为无聊，而不是喜欢！就像结婚，是因为凑合，而不是因为爱情。</p>

    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <p>撒娇的骄傲看来是加大了快速解答了空间都卡了时间到了</p>
    <a href="#">点击链接</a>
</div>



<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag:true
        },
        methods:{
            change(){
                this.flag=true;
            }
        }
    })
</script>
</body>
</html>

结果输出：
在这里插入图片描述

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app1">
    {{msg|ri()}}
</div>

<div id="app2">
    {{msg|ri()}}
</div>
<script src="../lib/vue.js"></script>
<script>



<!--导入Vue-->

    //全局过滤器，不要出现日
    Vue.filter("ri",function(a){
        return a.replace('日',"*")
    });


    var vm1 = new Vue({
        el:"#app1",
        data:{
            msg:"我爱你，日"
        },
        filters:{
            ri:function(a){
                return a.replace('日',"#")
            }
        }
    });

    var vm2 = new Vue({
        el:"#app2",
        data:{
            msg:"向日葵"
        },
        filters:{
            ri(a){
                return a.replace('日',"!")
            }
        }
    });

</script>
</body>
</html>

结果输出：
在这里插入图片描述

自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="app">
    <input type="text" v-kuang="'red'" value="西部开源"/>
</div>

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

    //自定义指令 v-*    v-kuang
    Vue.directive("kuang",{
        bind:function (el,binding) {
            //el,指代指令作用的元素
            //binding.value 就是你自定义指令后面的具体指 ， v-kuang=""
            el.style.color = binding.value;
        }
    });


    //09: 使用BootStrap操作列表

    //Vue对象
    var vm = new Vue({
        el:"#app",
        directives:{}
    })


</script>

</body>
</html>

结果输出：
在这里插入图片描述

过滤器笔记

什么是过滤器？

可以用来过滤一个网页上的资源，比如将网页上的所有的，都改为 - ，实现一个过滤效果

如何自定义一个过滤器

全局过滤器（作用域：全局）需要再vm对象创建之前创建，使用Vue.filter(“name”,function())来创建

    Vue.filter(name,function (data,old,newWord) {
       
    });

局部过滤器（作用域，仅在这个对象中有效）需要再vm对象里面创建，加上一个filter属性,里面添加不同的过滤器，格式

filters:{
     name:function f() {
       
     },
     name2:function f() {
       
     }
 }

如何调用过滤器

在插值表达式或者v-bind下使用 {{data|过滤器的名字（arg1,arg2,arg3…）}}

就近原则

如果局部过滤器和全局过滤器名字相同，优先调用进的；局部过滤器

dream_Felix

发布了84 篇原创文章 · 获赞 15 · 访问量 9998

私信关注

Vue介绍及使用

Vue.js 是什么

Vue准备

Idea中使用Vue

需要安装Vue插件：

入门及插值表达式

绑定数据

跑马灯效果实现

双向绑定

计算器

for循环

for循环应用

v-if&v-show

过滤器

自定义指令

过滤器笔记

猜你喜欢