VUE快速入门

目前为止，VUE是每个开发人员都需要必备的技能，不管是前端人员还是后端人员。特此总结一篇VUE知识总结。适合VUE初学者以及有基础人员进行回顾。

var code = “45950012-3900-4d2f-a110-0edb4c2c997b”

文章目录

一.Vue入门程序
二.Vue指令
三.MVVM模式
- 四.数据绑定
五.Axios
六.Computed

一.Vue入门程序

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

el:挂载点，定义vue元素挂在的元素节点。表示vue接手该区域。
data：vue中用的数据定义到data中。

二.Vue指令

2.1.v-text指令

获取data中的数据。设置标签的内容，会覆盖原有的数据，优先级强。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message">到放弃</h2>
        //字符串拼接用+
        <h2 v-text="message+'到放弃'"></h2>

    </div>
</body>
<script src="./vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
        message:"vue入门"
    }
  });
   
</script>
</html>

效果：

2.2.v-html指令

与v-text指令功能类似，v-text作用在普通文本，v-html可以作用在html元素上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2 v-html="url"></h2>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
   var vm=new Vue({
    el:"#app",
    data:{
        message:"vue入门",
        url:"<a href='https://www.baidu.com'>跳转到百度</a>"
    }
  });
</script>
</html>

效果：

2.3.v-on指令

为元素绑定事件。v-on: 可以简写成@

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="show">
        <!-- 简写方式将v-on：简写成@ -->
        <input type="button" value="按钮" @click="show">

    </div>
</body>

<script src="./vue.min.js"></script>
<script>
   var vm=new Vue({
    el:"#app",
    data:{
        message:"vue入门",
        url:"<a href='https://www.baidu.com'>跳转到百度</a>"
    },
    //存放vue中的方法
    methods:{
        show:function(){
            alert("入门到放弃");
        }
    }
  });
</script>
</html>

效果：

2.4.v-show指令

根据真假值，确定元素是否显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-show="isShow">aaaaaa</span>
    </div>
</body>

<script src="./vue.min.js"></script>
<script>
   var vm=new Vue({
    el:"#app",
    data:{
        isShow:false,
        message:"vue入门",
        url:"<a href='https://www.baidu.com'>跳转到百度</a>"
    }
  });
</script>
</html>

效果：

2.5.v-if指令

根据表达式的真假，判断元素的显示或者隐藏。v-if操作的是dom。效果与v-show效果一致。
频繁切换用v-show，否则用v-if。

2.6.v-bind指令

设置元素的属性，例如src class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <a v-bind:href="url">baidu</a>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
        message:"vue入门",
        url:"https://www.baidu.com"
    }
  });
   
</script>
</html>

效果：

2.7.v-for指令

根据数据生成列表结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <ul>
        <li v-for="(item,index) in arr">
            城市：{{item}}
        </li>
       </ul>
    </div>
</body>
<script src="./vue.min.js"></script>
<script>
  var vm=new Vue({
    el:"#app",
    data:{
       arr:["北京","上海","广州"]
    }
  });
   
</script>
</html>

效果：

三.MVVM模式

M:Model，负责数据存储。data为model
V：View，负责视图展示。
VM：View Model，负责业务逻辑处理，将数据渲染到页面上。即创建的vue实例，为vm。

四.数据绑定

单向数据绑定，将model绑定到view上。model变化导致view变化。
双向数据绑定，view变化时，model也会发生变化。

五.Axios

5.1.请求浏览器的方式

同步请求：需要等待服务器的响应，在此等待期间，客户端不能操作。
异步请求：服务器在处理过程中，等待期间客户端也可以进行操作。

5.2.axios介绍

其内部还是ajax，用于发送异步请求。

5.3.axios发送请求

get：axios.get(url?key=value&key=value).then(function(response){},function(error){})
post：axios.post(url,{key:value,key:value}).then(function(response){},function(error){})

六.Computed

页面中通过计算获取到的属性，减少重复运算的次数。

posted on 2023-03-02 13:55 程序员菜籽儿阅读(79) 评论(0) 收藏举报