Vue快速入门

最新推荐文章于 2024-06-20 09:46:43 发布

卍暴力出奇迹卍

最新推荐文章于 2024-06-20 09:46:43 发布

阅读量397

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43610675/article/details/110134870

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

开发工具：idea
安装vue.js插件

新建html页面
导入vue cdn

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>

	<script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:"hello vue",
                type:'A'
            }
        })
    </script>

el:绑定的元素,里面是元素的id
data:保存数据，以对象形式，类似键值对

可以直接{{message}}获取数据
也可以使用v-bind，需要声明

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

实例

	<div id="app">
        <span v-bind:title="message">
            鼠标悬停看提示
        </span>
    </div>

效果
在这里插入图片描述

相关语法

v-if

	<div id="app">

        <h1 v-if="type=='A'">A</h1>
        <h1 v-else-if="type=='B'">B</h1>
        <h1 v-else-if="type=='C'">C</h1>
        <h1 v-else>D</h1>
        <span v-bind:title="message">
            鼠标悬停看提示
        </span>
    </div>

在这里插入图片描述
可以在浏览器的console直接修改，例如vm.type="B",会发生动态改变

v-for
修改script代码

	<script>
        var vm=new Vue({
            el:"#app",
            data:{
                items:[
                    {message:'A'},
                    {message:'B'},
                    {message:'C'}
                ]
            }
        })
    </script>

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

效果
在这里插入图片描述
v-on绑定事件
方法定义在methods对象中

	<script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:"ZZF"
            },
            methods:{
                f:function (event) {
                    alert(this.message);
                }
            }
        })
    </script>

	<div id="app">
        <button v-on:click="f">点击</button>
    </div>

效果
在这里插入图片描述
双向绑定v-model

	<script>
        var vm=new Vue({
            el:"#app",
            data:{
                message:"1",
                checked:'',
                selected:''
            }
        })
    </script>

<div id="app">
        <input type="text" v-model="message">{{message}}<br>
        <textarea v-model="message"></textarea>{{message}}<br>
        <input type="radio" value="男" v-model="checked">男
        <input type="radio" value="女" v-model="checked">女
        {{checked}}<br>
        <select  v-model="selected">

            <option disabled value="">请选择</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        {{selected}}
    </div>

效果
在这里插入图片描述
会发现，输入或选中发生变化，后面的值也跟着变化

Vue组件
可复用的Vue实例，相当于可以重复使用的模板

	<script>
        //定义一个组件
        Vue.component("z",{
            props:['zzf'],
            template:'<li>{{zzf}}</li>'
        })
        var vm=new Vue({
            el:"#app",
            data:{
                items:["Java","C++","C#"]
            }
        })
    </script>

	<div id="app">
        <z v-for="item in items" v-bind:zzf="item"></z>
    </div>

效果
在这里插入图片描述

Axios异步通信
功能特点
1、从浏览器中创建XMLHttpRequests
2、从node.js创建http请求
3、支持Promise API（JS中链式编程）
4、拦截请求和响应
5、转换请求数据和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防御XSRF（跨站请求伪造）

新建JSON文件

{
  "name": "Java开发",
  "url": "https://mp.csdn.net/console/article?spm=1011.2124.3001.5114",
  "page": 1,
  "isNoProfit": true,
  "address": {
    "street": "东街",
    "city": "陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "百度",
      "url": "https//www.baidu.com/"
    },
    {
      "name": "csdn",
      "url": "https://mp.csdn.net"
    }

  ]
}

<!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>
    <!--解决闪动-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>

    <div id="app" v-clock>
        <!--<z v-for="item in items" v-bind:zzf="item"></z>-->
        <div>{{info}}</div>
        <div>{{info.name}}</div>
        <div>{{info.address.street}}</div>
        <a v-bind:href="info.url">点击</a>
       
    </div>

    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="text/javascript">
        var vm=new Vue({
            el:"#app",
            data:{
                info:null
            },
            mounted(){
                axios.get('data.json').then(response=>(this.info=response.data));
            }
        })
    </script>
</body>
</html>

效果
在这里插入图片描述
Vue计算属性
将计算结果缓存起来
可实现将不经常变化的计算结果进行缓存，以节约系统开销

<!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>currentTime1{{currentTime1()}}</p>
    <p>currentTime2{{currentTime2}}</p>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        methods:{
            currentTime1:function () {
                return Date.now();//返回时间戳

            }
        },
        computed:{
            currentTime2:function () {
                return Date.now();//返回时间戳
            }
        }
    })
</script>
</body>
</html>

效果
在这里插入图片描述
插槽slot
用于组合组件，相当于模板套模板

<!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">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script type="text/javascript">
    //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>'
    });

    var vm=new Vue({
        el:"#app",
        data:{
            title:"课程列表",
            todoItems:['Java开发',"Linux","C++"]
        }
    })
</script>
</body>
</html>

:是v-bind:的简写

效果
在这里插入图片描述

自定义事件内容分发
在前面的基础上实现一个删除功能

<!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">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems" :item="item" :index="index" v-on:remove="removeItems(index)"></todo-items>
    </todo>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
<script type="text/javascript">
    //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 @click="remove">删除</button></li>',
        methods: {
            remove:function (index) {
                //第一个参数为自定义事件名
                this.$emit('remove',index)

            }
        }
    });

    var vm=new Vue({
        el:"#app",
        data:{
            title:"课程列表",
            todoItems:['Java开发',"Linux","C++"]
        },
        methods:{
            removeItems:function (index) {
                console.log("删除了"+this.todoItems[index]+"OK");
                this.todoItems.splice(index,1);//一次删除一个

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

v-bind绑定前端与Vue的数据，props：绑定前端与组件的数据
this.$emit将事件分发回前端，前端v-on:remove再将事件给removeItems处理

效果
在这里插入图片描述

卍暴力出奇迹卍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue快速入门

开发工具：idea安装vue.js插件新建html页面导入vue cdn<script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script> <script> var vm=new Vue({ el:"#app", data:{ message:"hello vue",
复制链接

扫一扫