Vue：idea编写Vue程序

一、环境布置首先安装vue插件cdn vue.js：主要导入在我们前端页面上<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>二、第一个Vue程序<!DOCTYPE html><html lang="en"><head><meta c

白色风车下的花海

3252人浏览 · 2021-07-31 21:52:28

白色风车下的花海 · 2021-07-31 21:52:28 发布

一、环境布置

首先安装vue插件

cdn vue.js：主要导入在我们前端页面上

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

二、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

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

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

浏览器的控制台输入：

vm.message="hello"

可对浏览器页面上显示的结果进行修改

三、v-指令

1、v-bind：绑定

v-bind和{{}}差不多的意思

v-bind:title 鼠标放上信息显示

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <span v-bind:title="message">我是谁！</span>
</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            message:"狗!"
        }
    });
</script>
</body>
</html>

2、v-if，v-else，v-else-if：判断

v-if，v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            ok : true
        }
    });
</script>
</body>
</html>

v-if，v-else，v-else-if

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <h1 v-if="ok==='A'">A</h1>
    <h1 v-else-if="ok==='B'">B</h1>
    <h1 v-else-if="ok==='C'">C</h1>
    <h1 v-else>D</h1>
</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            ok : "A"
        }
    });
</script>
</body>
</html>

3、v-for：循环

不带索引

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            items:[
                {message:"Java"},
                {message:"C#"},
                {message:"C"}
            ]
        }
    });
</script>
</body>
</html>

带索引

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}},{{index}}
    </li>
</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            items:[
                {message:"Java"},
                {message:"C#"},
                {message:"C"}
            ]
        }
    });
</script>
</body>
</html>

4、v-on：事件

各种事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <button v-on:click="sayHi">click me</button>
</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            message : "hello,vue"
        },
        methods : {
            sayHi : function () {
                alert(this.message);
            }
        }
    });
</script>
</body>
</html>

5、v-model：双向绑定

是两边的messge信息绑定在一起

input：text：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <input type="text" v-model="message"/> {{message}}
</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            message : "hello,vue"
        },
    });
</script>
</body>
</html>

input：radio：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <input type="radio" value="男" v-model="message"/> 男
    <input type="radio" value="女" v-model="message"/> 女<br>
    选中了:{{message}}

</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            message : ""
        },
    });
</script>
</body>
</html>

select：

disabled属性：不能被选择

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <select v-model="message">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select><br>
    选中了:{{message}}

</div>

<script>
    var vm=new Vue({
        el : "#app",
        data:{
            message : ""
        },
    });
</script>
</body>
</html>

四、组件

类似于Thymeleaf的th:fragment

初体验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <ly></ly>

</div>

<script>
    Vue.component("ly",{
        template: '<li>java</li>'
    });

    var vm=new Vue({
        el : "#app"
    });

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

实现组件中数据的动态：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">

    <ly v-for="item in items" v-bind:pr="item"></ly>

</div>

<script>
    Vue.component("ly",{
        props : ['pr'],
        template: '<li>{{pr}}</li>'
    });

    var vm=new Vue({
        el : "#app",
        data : {
            items : ["Java","C","C#"]
        }
    });

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

五、通信

我们vue推荐使用的通讯工具是Axios，当然使用JQuery的ajax也行。

Axios使用之前如果是个人版的idea，需要将idea的ES改成ES6（idea默认使用ES5.1，因为绝大多数的都用ES5）

Axios的cdn：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

data.json文件

{
  "name": "feiyue",
  "level": 99,
  "age": 18,
  "skillList": [
    {
      "id": 1,
      "name": "天下无双",
      "damage": "123"
    },
    {
      "id": 2,
      "name": "雌雄难辨",
      "damage": "182"
    },
    {
      "id": 3,
      "name": "暗流涌动",
      "damage": "89"
    }
  ]
}

浏览器控制台打印

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">

</div>

<script type="text/javascript">

    var vm=new Vue({
        el : "#app",
        mounted(){
            axios.get('../data.json').then(response=>(console.log(response.data)));
        }
    });

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

取出json并将其贴在网页上

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    {{info.name}}
    {{info.level}}
</div>

<script type="text/javascript">

    var vm=new Vue({
        el : "#app",
        data(){
            return{
                info:{
                    name : null,
                    level : null
                }
            }
        },
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    });

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

六、计算属性

计算出来的结果保存在属性中，其实就类似于缓存的一种概念

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>

<div id="app">
    
    <span>{{getTimesChange()}}</span>
    <span>{{getTimesForever}}</span>

</div>

<script>
    var vm=new Vue({
        el : "#app",
        data : {
            message: "hello,Vue!"
        },
        methods : {
            getTimesChange : function () {
                return Date.now();
            }
        },
        computed: {
            getTimesForever : function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

computed与methods属性类似，只是methods 中的方法是通过方法调，而 computed中的方法是通过属性调。当computed与methods方法的方法名相同时，优先调用methods中的方法。

在说一下computed的计算属性的问题，只有在刷新页面和方法中的值发生改变的时候，方法的返回值才会发生改变，不然是不变的（return Date.now();）。有点类似与同一个请求的返回数据是一样的，原因是放在了缓存中。

七、内容分发

v:bind: 可以缩写为一个：

v-on: 可以缩写为一个@

内容分发主要的概念就是一个插槽的概念，也就是<slot name="组件"></slot>，类似于组件之间的一个调用，让组件可以组合。

一个组件如果需要外部传入简单数据如数字、字符串等等的时候，可以使用property；如果需要传入js表达式或者对象时，可以使用事件；如果希望传入的是HTML标签，那么使用内容分发就再好不过了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <todo>
        //通过slot="todo-title"，绑定到todo组件的指定插槽中，并将代码整合
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        //通过slot="todo-items"，绑定到todo组件的指定插槽中，并将代码整合
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>
<script>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "图书馆系列图书",
            //列表
            todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
        }
    });
</script>
</body>
</html>

八、自定义事件

见名知意，就是做一个自定义一个事件，可以让v-on:绑定。

使用this.$emit(‘自定义事件名’,参数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items"
                    v-for="(item,i) in todoItems"
                    v-bind:item="item" v-bind:index="i"
                    v-on:remove="removeItem(i)">//从绑定的事件中获取i
        </todo-items>
    </todo>
</div>
<script>
    //slot 插槽 这个组件要定义在前面不然出不来数据
    Vue.component("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    Vue.component("todo-title", {
        //属性
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item', 'index'],
        template: '<li>{{index}}-{{item}}<button style="margin: 5px" @click="remove">删除</button></li>',
        methods: {
            remove: function (index) {
                // this.$emit('事件',参数) 自定义事件分发（远程调用方法）
                this.$emit('remove', index)//这个remove才是自定义的事件
            }
        },
    });
    let vm = new Vue({
        el: "#app",
        data: {
            //标题
            title: "图书馆系列图书",
            //列表
            todoItems: ['三国演义', '红楼梦', '西游记', '水浒传']
        },
        methods: {
            removeItem: function (index) {
                // 一次删除一个元素
                this.todoItems.splice(index, 1)
                console.log("删除了" + this.todoItems[index] + "OK")
            }
        },
    });
</script>
</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...