Vue入门：看这一篇就够了

其他 2020-08-09 11:31:27 阅读次数: 0

高速通道


话不多说，直接开干。
先来个官网实栗吧。

官网实栗

<body>
    <!--第一个vue实栗-->
    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    	//注意这里构造Vue开头要大写哦，不然会报引用错误
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello world'
            }
        })
    </script>

</body>

el挂载点：
1、el是用来设置vue实栗挂载（管理）的元素
2、vue会管理el选项命中的元素及其内部的后代元素
3、可以使用其他的选择器，建议使用ID选择器
4、可以使用其他双标签，除了HTML和BODY

data数据对象：
vue中用到的数据定义在data中
data可以写复杂类型的数据，包括表达式

vue指令

vue指令是指以v-开头的一组特殊语法

v-text: 设置标签的文本值（textContent）

<body>
    <div id="app">
        <h3 v-text="message">小白</h3>
        <h3 v-text="info">定居在</h3>
        <h3>{{address}}定居</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'前端程序员',
                info:'目前',
                address:'杭州'
            }
        })
    </script>
</body>

v-text指令的作用是设置标签的内容
默认写法会替换全部内容，使用{{}}可以替换指定内容
内部支持表达式

v-html: 设置标签的innerHTML

<body>
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                content:"<a href='https://blog.csdn.net/weixin_38289787'>我的博客</a>"
            }
        })

    </script>
</body>

v-html指令用来设置元素的innerHTML
内容中有html结构会被解析为标签
v-text指令无论什么内容，只会解析为相应文本

v-on: 为元素绑定事件

<body>
<div id="app">
    <input type="button" value="v-on指令" v-on:click="justDo">
    <input type="button" value="v-on简写" @click="doIt">
    <input type="button" value="双击事件" @dblclick="changeWrite">
    <h1 @click="changeWrite">{{write}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            write:"公众号：就这样写"
        },
        methods:{
            justDo:function () {
                alert('just do it')
            },
            doIt:function () {
                alert('只做IT')
            },
            changeWrite:function () {
                this.write+="写的真不赖！"
            }
        }
    })

</script>
</body>

v-on指令为元素绑定事件
事件名不需要写on
指令可以简写为@
绑定的方法定义在methods属性中
方法内部通过this关键字可以访问定义在data中的数据

<body>
<div id="app">
    <input type="button" value="点击" @click="justDo('IT','程序员')">
    <input type="text" @keyup.enter="doIt">

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        methods:{
            justDo:function (a,b) {
                alert('just do '+a+b)
            },
            doIt:function () {
                alert('只做IT')
            }
        }
    })

</script>
</body>

事件绑定的方法写出函数调用的形式，可以传入自定义参数
事件后面跟上.修饰符可以对事件进行限制。.enter可以限制触发的按键为回车键
事件修饰符有很多，详细可参考文末链接

v-show：根据表达式的真假切换元素的显示和隐藏

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <input type="button" value="年岁增长" @click="addAge">
    <p>我今年{{age}}岁了</p>
    <img v-show="isShow" src="../img/zyeb.jpg">
    <img v-show="age>=18" src="../img/zyeb.jpg">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeIsShow:function () {
                this.isShow = !this.isShow;
            },
            addAge:function () {
                this.age++;
            }
        }
    })

</script>
</body>

v-show指令根据真假切换元素的显示状态
原理是修改元素的display，实现显示与隐藏
指令后面的内容最终会被解析成布尔值，值为true时元素显示
数据改变后，相应元素的显示状态也会发生改变

v-if：根据表达式真假，切换元素显示与隐藏

<body>
<div id="app">
    <input type="button" value="切换显示状态" @click="changeIsShow">
    <input type="button" value="年岁增长" @click="addAge">
    <p>我今年{{age}}岁了</p>
    <img v-show="isShow" src="../img/zyeb.jpg">
    <p v-if="age>=18">枕上诗书闲处好</p>
    <p v-if="age>=19">门前风景雨来佳</p>
    <p v-if="age>=20">朝暮与年岁并往</p>
    <p v-if="age>=21">然后与你一同行至天光</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isShow:false,
            age:17
        },
        methods:{
            changeIsShow:function () {
                this.isShow = !this.isShow;
            },
            addAge:function () {
                this.age++;
            }
        }
    })

</script>
</body>

v-if指令根据表达式的真假切换元素的显示状态
原理是通过操作DOM元素来切换显示状态
表达式的值为true，元素存在DOM树中，为false则从DOM树中移除
频繁的切换使用v-show，否则使用v-if，因为前者切换消耗更小

扫描二维码关注公众号，回复： 11552597 查看本文章

v-bind：设置元素的属性

<head>
    <meta charset="UTF-8">
    <title>v-bind实栗</title>
    <style>
        .active{
            border: 1px red dashed;
        }
    </style>
</head>
<body>
<div id="app">
    <img v-bind:src="imgSrc">
<!--    省略写法-->
    <img :src="imgSrc" :title="imgTitle">
    <img :src="imgSrc" :title="imgTitle" :class="isActive?'active':''" @click="changeClass">
<!--    对象方式-->
    <img :src="imgSrc" :title="imgTitle" :class="{active:isActive}" @click="changeClass">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            imgSrc:'../img/zyeb.jpg',
            imgTitle:'章鱼恶霸',
            isActive:false
        },
        methods:{
            changeClass:function () {
                this.isActive = !this.isActive;

            }
        }
    })

</script>
</body>

v-bind为元素绑定属性
完整写法是 v-bind:属性名，可以省略v-bind，只保留 :属性名
动态增删class建议使用对象方式

v-for：根据数据生成列表结构

<body>
<div id="app">
    <input type="button" value="新爱好" @click="add">
    <input type="button" value="淘汰爱好" @click="remove">
    <ul>
        <li v-for="(item,index) in arr">
            {{index+1}}前端热门技术：{{item}}
        </li>
    </ul>
    <p v-for="item in hobbies" :title="item.name">
        {{item.name}}
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            arr:["HTML","CSS","JavaScript","Vue"],
            hobbies:[{name:"篮球"},{name:"阅读"}]
        },
        methods:{
            add:function () {
                this.hobbies.push({name:"学习"});
            },
            remove:function () {
                this.hobbies.shift();
            }
        }
    })

</script>
</body>

v-for指令根据数据生成列表结构，语法是(item,index) in 数据
数组经常和v-for结合使用
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

v-model：获取和设置表单元素的值(双向数据绑定)

<body>
<div id="app">
    <input type="button" value="重置message" @click="setMsg">
    <input type="text" v-model="message" @keyup.enter="getMsg">
    <p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:"自信者天助"
        },
        methods:{
            setMsg:function () {
                this.message="自信才有未来";
            },
            getMsg:function () {
                alert(this.message);
            }
        }
    })

</script>
</body>

v-model指令便捷的设置和获取表单元素的值
绑定的数据和表单元素的值互相关联

网络请求 axios

一路走来，前端发展的过程中诞生了很多优秀的前后端交互的技术。对jQuery Ajax 、fetch 和 axios 三者进行比较，尽管 jQuery 对于现在来讲比较老旧了，但这丝毫不妨碍它是一个优秀的类库，它提供的 Ajax 功能也确实是非常好。而 fetch 后来的替代方案，本身的设计也是可圈可点的，只是现在来讲还过于稚嫩，不适用于我们业务中推广使用。相比之下，axios 可算是当打之年，从设计上、从体积上，都很适用现在的各种前端技术体系，因此，可以进一步的学习和使用这个技术。
想了解更多相关内容的同学可参考axios中文文档

使用axios进行网络交互案例

执行GET请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 上面的请求也可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行POST请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

像其他包一样，axios必须先导入才能使用
使用get或post方法即可发送对应的请求
then方法中的回调函数会在请求成功或失败时触发
通过回调函数的形参可以获取服务器响应内容或错误信息

小叮当任意门：

Vue.js中文文档

更多事件修饰符

axios中文文档

axios文档GitHub

配套学习视频

感谢点赞

猜你喜欢

转载自blog.csdn.net/weixin_38289787/article/details/107682480
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022