Vue.js的基本使用

喝可乐的希饭a

已于 2022-03-24 11:55:22 修改

阅读量1.4k

点赞数

分类专栏：前端文章标签： vue.js java 前端

于 2022-03-10 17:09:49 首次发布

本文链接：https://blog.csdn.net/H_porridge/article/details/123394310

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Vue的官网：

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

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

2.基本使用：

使用Vue 只需在文件中引用以下两个脚本，十分的方便。

引用脚本

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

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

第一个实例：

<!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/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

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

</body>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            msg : 'hello,Vue!'
        }
    })
</script>

</html>

在上面代码中 el: '#app’ 对应着 div中的 “ id="app"，而**{{msg}}**中展示的内容即为

data:{
  msg : 'hello,Vue!'
      }

在浏览器中可到：
在这里插入图片描述

鼠标悬停显示内容（v-bind:title=“绑定事件”）（:title=“绑定事件”）简写

在这里插入图片描述

<body>

<div id="app">

    <span v-bind:title="msg">
        鼠标悬停将显示的内容
    </span>
</div>

</body>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            msg : 'hello,Vue!'
        }
    })
</script>

if判断操作

<body>

<div id="app">
    <h1 v-if="i">yes</h1>
    <h1 v-else>no</h1>
</div>

</body>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            i : true
        }
    })
</script>

else-if 选择判断

<body>

<div id="app">
    <h1 v-if="type==='A'">yes</h1>
    <h1 v-else-if="type === 'B'">no</h1>
    <h1 v-else>else</h1>
</div>

</body>

<script>
    var app = new Vue({
        el: '#app',
        data:{
            type : 'B'
        }
    })
</script>

for遍历

<body>
<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            items: [
                {message: 'qianduan'},
                {message: 'houduan'}
            ]
        }
    })
</script>

事件绑定方法**(methods)** 方法必须定义在Vue的methods对象中 v-on事件 @click简写

在这里插入图片描述

<body>
<div id="app">
    <button @click="sayHi">点击</button>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message: '你好  porridge！'
        },
        methods: {
            sayHi: function () {
                alert(this.message)
            }
        }
    })
</script>

双向数据绑定（v-model）在表单及元素上进行双向绑定

<body>
<div id="app">
    <input type="text" v-model="message">{{message}}
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message: '你好  porridge！'
        },

    })
</script>

select 双向绑定

<body>
<div id="app">
    <select v-model="selected">
        <option  value="" disabled>--请选择--</option>
        <option>a</option>
        <option>b</option>
        <option>c</option>
    </select>
    <span>value:{{selected}}</span>
</div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            selected: ''
        },

    })
</script>

3.Vue组件

component 自定义一个组件

<body>
<div id="app">

    <porridge></porridge>

</div>
</body>
<script>

    Vue.component("porridge",{
        template: '<li>Hello</li>'

    });

    var vm = new Vue({
        el:"#app",
        data: {}

    })
</script>

for循环使用组件绑定

<body>
<div id="app">

    <porridge v-for="item in items" v-bind:p="item"></porridge>

</div>
</body>
<script>

    Vue.component("porridge",{
        props: ['p'],
        template: '<li>{{p}}</li>'

    })

    var vm = new Vue({
        el:"#app",
        data: {
            items: ["java", "vue", "linux"]
        }

    })
</script>

4. Axios异步通信

什么是Axios

Axios是一个开源的可以用在浏览器和NodeJS的异步通信框架，他的主要作用就是实现AJAX异步通信。

特点：

从浏览器中创建XMLHttpRequetsts
从node.js创建http请求
支持Promise API [JS中链式编程]
拦截请求和相应
转换请求数据和相应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF（跨站请求伪造）

GitHub： https://github.com/axios/axios
中文文档： http://wwww.axios-js.com/

需要引用：

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

第一个Axios应用程序

在这里插入图片描述

{
  "name": "广州",

  "address" : {
    "city" : "广州"
  },
  "links" : [
    {
      "name" : "porridge"
    }
  ]
}

<head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-clock>

    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>

</div>
</body>

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

<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data() {
            return {
               info : {
                   name : null,
                   address : {
                       city : null
                   },
                   links : [
                       {
                           name : null
                       }
                   ]
               }
            }

        },
        mounted(){
            axios.get('data.json').then(response=>(this.info = response.data))
        }


    });
</script>

5.Vue快速成型网站

https://element.eleme.cn/#/zh-CN

喝可乐的希饭a

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的基本使用

Vue的官网：https://cn.vuejs.org/v2/guide/1.基本介绍：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。2.基本使用：使用Vue 只需在文件中引用以下两个脚本，十分的方便。引用脚本&l
复制链接

扫一扫