Vue：idea编写Vue程序

时间：2025-03-19 12:50:36

目录

一、环境布置

 二、第一个Vue程序

三、v-指令 

1、v-bind：绑定

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

3、v-for：循环

4、v-on：事件

5、v-model：双向绑定

 四、组件

五、通信

六、计算属性

七、内容分发

一、环境布置

首先安装vue插件

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

<script src="/npm/vue@2.5.16/dist/"></script>

 二、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >
    {{message}}
</div>

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

 浏览器的控制台输入：

="hello"

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

三、v-指令 

1、v-bind：绑定

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

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

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http:///1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >
    <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:///1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >
    <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:///1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >
    <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:///1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >
    <li v-for="item in items">
        {{}}
    </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:///1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >
    <li v-for="(item,index) in items">
        {{}},{{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:///1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >

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

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

5、v-model：双向绑定

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

input：text：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >

    <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="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >

    <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="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >

    <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="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >

    <ly></ly>

</div>

<script>
    ("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="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >

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

</div>

<script>
    ("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="/axios/dist/"></script>

 文件

{
  "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="/npm/vue@2.5.16/dist/"></script>
    <script src="/axios/dist/"></script>
</head>
<body>

<div >

</div>

<script type="text/javascript">

    var vm=new Vue({
        el : "#app",
        mounted(){
            ('../').then(response=>(()));
        }
    });

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

取出json并将其贴在网页上

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
    <script src="/axios/dist/"></script>
</head>
<body>

<div >
    {{}}
    {{}}
</div>

<script type="text/javascript">

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

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

六、计算属性

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/npm/vue@2.5.16/dist/"></script>
</head>
<body>

<div >
    
    <span>{{getTimesChange()}}</span>
    <span>{{getTimesForever}}</span>

</div>

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

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

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

七、内容分发

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--1.导入-->
    <script src="/npm/vue@2.5.21/dist/"></script>
</head>
<body>
<div >
    <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 插槽 这个组件要定义在前面不然出不来数据
    ("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    ("todo-title", {
        //属性
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    ("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.导入-->
    <script src="/npm/vue@2.5.21/dist/"></script>
</head>
<body>
<div >
    <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 插槽 这个组件要定义在前面不然出不来数据
    ("todo", {
        template: '<div>\
                <slot name="todo-title"></slot>\
                <ul>\
                <slot name="todo-items"></slot>\
                </ul>\
                <div>'
    });
    ("todo-title", {
        //属性
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    ("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) {
                // 一次删除一个元素
                (index, 1)
                ("删除了" + [index] + "OK")
            }
        },
    });
</script>
</body>
</html>

相关文章