vue

最新推荐文章于 2024-07-22 08:55:10 发布

@@星辰大海

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量90

点赞数

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/weixin_43619582/article/details/127208527

版权

vue

概述

mvvm模式

为什么要用vue.js

为什么要使用mvvm

View

Model

ViewModel

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{msg}}
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var ver=new Vue({
        el: "#app",  //element绑定元素
        data: {           //数据是键值对
            msg: "hello vue!"
        }
    })
</script>
</body>
</html>

v-bind

实例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <span v-bind:title="msg">
        鼠标悬停于此处可以看到提示信息！
    </span>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var ver=new Vue({
        el: "#app",  //element绑定元素
        data: {           //数据是键值对
            msg: "hello vue!"
        }
    })
</script>
</body>
</html>

vue指令

vue基本语法

el挂载点

data数据对象

vue指令

v-text

示例

v-html

示例

v-if

案例1

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-if="flag">正确</p>
    <p v-else>错误</p>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var ver=new Vue({
        el: "#app",  
        data: {          
            flag: true
        }
    })
</script>
</body>
</html>

案例2

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p v-if="type==='A'">A</p>
    <p v-else-if="type==='B'">B</p>
    <p v-else-if="type==='C'">C</p>
    <p v-else>D</p>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var ver=new Vue({
        el: "#app",
        data: {
            type: 'C'
        }
    })
</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <h3 v-for="(item,index) in msg">
       {{item}}--{{index}}
   </h3>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var ver=new Vue({
        el: "#app",
        data: {
            msg: [
                {name: 'tom'},
                {age: 12},
                {sno: '123456'}
            ]
        }
    })
</script>
</body>
</html>

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.staticfile.org/vue/2.4.2/vue.min.js"></script>

</head>
<body>

<div id="app">
<button v-on:click="sayhi">click me</button>
</div>

<script>
    var app=new Vue({
        el: '#app',
        data: {
            msg: 'hello zhiyong!'
        },
        methods: {
           sayhi: function (event) {
               alert(this.msg)
           }
        }
    });
</script>

</body>
</html>

v-show

示例

v-bind

知识点

v-bind示例

数据双向绑定

概述

示例

input表单

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <input type="text" v-model="msg">
    {{msg}}
</div>

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            msg: 'hello vue!'
        }
    });
</script>
</body>
</html>

单选框

下拉框

组件(模板)

概述

网络通信

Axios

概念

为什么要使用Axios

示例

计算属性

概述

示例

注意

插槽

概述

示例

想要实现的效果

第一个vue-cli项目

什么是vue-cli

需要的环境

安装vue-cli

创建vue程序

初始化并运行

vue-router

概述

安装

vue:实战快速上手

创建工程

路由嵌套

@@星辰大海

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue

vue概述mvvm模式为什么要用vue.js为什么要使用mvvmViewModelViewModel第一个vue程序<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g...
复制链接

扫一扫