Vue快速入门

最新推荐文章于 2024-06-01 15:46:07 发布

Aurora.Luo

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量134

点赞数 1

文章标签： vue.js javascript 前端 ajax

本文链接：https://blog.csdn.net/m0_54264380/article/details/130022173

版权

Vue快速入门

一、Vue简介

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

二、第一个Vue程序

（1）导入开发版本的Vue.js

 <!-- 导入开发版本的 Vue.js  -->
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

（2）创建Vue实例对象，设置el属性和data属性

 // 创建Vue 实例 
        var app = new Vue({
            // 设置el属性和data属性
            el: '#app',
            data:{
                message:'Hello Vue!'
            }
        })

（3）使用简洁的模板语法把数据渲染到页面上

二、Vue的el挂载点

el是用来挂载Vue实例挂载的元素。

（1）Vue实例的作用范围是什么呢?

答：Vue会管理el挂载的元素以及内部的所有元素。

（2）是否可以使用其他的选择器?

答：可以使用其他选择器，但是建议使用ID选择器

（3）是否可以设置其他的dom元素呢?

答：el可以设置其他标签，但是不可设置HTML标签和BODY

三、Vue的data数据对象

（1）Vue用得到的数据都定义在data中

（2）data中可以写复杂类型的数据

（3）渲染复杂类型数据时,遵守js的语法即可

四、Vue常见指令

（一）v-text

v-text指令（相当于原生js中的innerText）

用于将数据填充到标签中，作用于插值表达式类似。

 <div id="app">
        <!-- v-text 写法 -->
        <h2 v-text="English"></h2>
        <!-- 插值表达式 -->
        <h2>{{Chinese}}</h2>
    </div>
    <!-- 导入开发版本的 Vue.js -->
    <script  src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script>
        // 创建Vue 实例
        new Vue({
            // 设置el属性和data属性
            el:'#app',
            data() {
                return {
                    English:'How are you ?',
                    Chinese:'你好吗？'
                }
            },
        })
    </script>

（二）v-html

v-html指令(相当于原生js中的innerHTML)

v-html和v-text的区别

v-html的作用：

（1） v-html指令的作用是:设置元素的innerHTML

（2）内容中有html标签或元素会被解析为标签

v-text的作用

（1） v-text指令无论内容是什么,只会解析为文本

（2）解析文本使用v-text,需要解析html结构使用v-html

<div id="app">
        <p v-html="message"></p>
   
        <p v-text="message"></p>
    </div>
     <!-- 导入开发版本的 Vue.js -->
     <script  src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
     <script>
        // 创建Vue 实例
        new Vue({
            el:'#app',
            data() {
                return {
                    message:'<a href="http://www.baidu.com">百度</a>'
                }
            },
        })
     </script>

（三）v-on基础

v-on为元素班绑定事件

语法：v-on:事件=“方法名”

v-on指令的特点

（1）事件名不需要写on
（2）指令可以简写为@
（3）绑定的方法定义在methods属性中
（4）方法内部通过this关键字可以访问定义在data中数据

div id="app">
<input type="button" value="事件绑定" v-on:click="sayHi">
<input type="button" value="事件绑定" @monseenter="sayHi"><input type="button" value="事件绑定" @dblclick="sayHi">
</div>
<script>
       
        new Vue({
            el:'#app',
           methods:{
			dolt:function(){
				alert('hi');
			}
		}
       })
     </script>

v-on补充

（1）事件绑定的方法写成函数调用的形式。

（2）可以传入自定义参数定义方法时需要定义形参来接收传入的实参。
（3）事件的后面跟上.修饰符可以对事件进行限制，
例如： “.enter” 可以限制触发的按键为回车。
（4）事件修饰符有多种

（5）传递自定义参数

<div id="app">
<input type="button" @click="dolt(形参1,形参2)"/>
//鼠标弹起 sayHi
<input type="text" @keyup.enter="sayHi"></div>

var app = new Vue({
el: "#app",
methods: {
dolt: function(实参1,实参2){},
sayHi:function(){}
}
})

（四）v-show

v-show的作用：根据表达式的值,切换元素的显示和隐藏。

v-show的特点

（1）原理是修改元素的display ，显示隐藏。

（2）指令后面的内容，最终都会解析为布尔值

（3）v-show的值为true元素就会显示，值为false元素隐藏。

（五）v-if

v-if的作用：根据表达值的真假,切换元素的显示和隐藏(操纵dom元素)

v-if的特点

（1）v-if本质是通过操作dom元素来显示隐藏的。

（2）表达式的值为true，元素存在于dom树中，为false,从dom树中销毁。

（3）频繁的切换v-show,反之使用v-if,前者的切换消耗内存小。

（六）v-bind

v-bind的作用：绑定数据和设置元素的属性(比如:src,title,class)。v-bind也称单向数据绑定。

语法：

v-bind:属性名=表达式

简写语法：

：属性名=表达式

（七）v-for

**v-for的作用：**根据数据生成列表结构。

v-for语法

v-for = “（值 , 索引）in 目标元素”
v-for = “值 in 目标结构”

v-for目标结构：数组，对象，数字、字符串（可遍历结构）

注意：

v-for的临时变量不能用到v-for范围以外
谁需要循环循环添加给谁加v-for

v-for的特点

item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上,是响应式的

（八）v-model

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

v-model

绑定的数据会和表单元素值相关联。
绑定的数据对应表单元素的值。

注意：v-model不能用于作数据判断。

五、axios基础

axios是一个功能强大的网络请求库

认识axios

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。
说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。

Axios特性
（1）可以在浏览器中发送 XML，Http，Requests

（2）可以在 node.js 发送 http 请求

（3）支持 Promise API

（4）拦截请求和响应

（5）转换请求数据和响应数据

（6）能够取消请求

（7）自动转换 JSON 数据

（8）客户端支持保护安全免受 XSRF 攻击

axios的使用步骤：

2.使用get或者post方法即可发送对应的请求。

then方法中的回调函数会在请求成功或失败时触发。
通过回调函数的形参可以获取响应内容,或错误信息。

小练习：

<body>
    <input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <!-- 1.axios必须先导入才能使用 -->
    <!-- 官网提供的在线地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        /*
           接口1:随机笑话
           请求地址:https://autumnfish.cn/api/joke/list
           请求方法:get
           请求参数:num(笑话条数,数字)
           响应内容:随机笑话
           传参方法：
                    （1）/num=请求数量
                    （2）？num=请求数量
       */
        //1.1先获取元素 
        let btn_get = document.querySelector('.get');
        let btn_post = document.querySelector('.post');
        btn_get.addEventListener('click', function () {
            axios.get('https://autumnfish.cn/api/joke/list?num=3')
            .then(function (response) {
                // 正确信息
                console.log(response);
            }),function (err) {
                // 错误信息
                console.log(err);
            }
        })
        /*
             接口2:用户注册
             请求地址:https://autumnfish.cn/api/user/reg
             请求方法:post
             请求参数:username(用户名,字符串)
             响应内容:注册成功或失败
             传参方法： 键值对
             {键名:值}
             注意点：
             键名一定要对应后端一致的参数
         */
         btn_post.addEventListener('click',function () {
            axios.post('https://autumnfish.cn/api/user/reg',{username:'rose'})
            .then(function (response) {
                console.log(response);
            }),function (err) {
                console.log(err);
            } 
         })

    </script>

Aurora.Luo

关注

1
点赞
踩
0

收藏

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

Vue (发音为 /vjuː/，类似) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。二、第一个Vue程序（1）导入开发版本的Vue.js（2）创建Vue实例对象，设置el属性和data属性（3）使用简洁的模板语法把数据渲染到页面上。
复制链接

扫一扫