Web前端 Vue2基础

最新推荐文章于 2024-09-12 11:43:08 发布

No_Rishi

最新推荐文章于 2024-09-12 11:43:08 发布

阅读量495

点赞数

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

本文链接：https://blog.csdn.net/no_rishi/article/details/113808373

版权

本文详细介绍了Vue2的基础知识，包括Vue简介、Vue程序创建、挂载点和数据对象。深入讲解了Vue本地应用中的v-text、v-html、v-on等指令以及计数器案例。同时，探讨了Vue网络应用中axios的使用，结合实际案例讲解如何进行HTTP请求。通过本文，读者将全面掌握Vue2的基础操作。

摘要由CSDN通过智能技术生成

一、Vue基础

1、Vue简介

JS 框架；

简化 Dom 操作；

响应式数据渲染。

2、Vue程序

导入开发版本的Vue.js CDN；

创建Vue实例对象，设置el属性和data属性；

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

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
	{
   {
   message}}
</div>
<script>
const  app = new Vue({
   
	el:'#app',
	data:{
   
		message:"Hello World"
	}
})
</script>

3、Vue挂载点

Vue 实例的作用范围：Vue会管理 el 选项命中的元素及其内部的后代元素；

Vue 可以使用其他的选择器，但是推荐使用 ID 选择器；

Vue 可以使用其他的双标签，不能使用 html 和 body 标签。

4、Vue数据对象

Vue 中用到的数据定义在 data 中；

data 中可以写复杂类型的数据；

渲染复杂类型数据时，遵守 js 的语法即可。

二、Vue本地应用

1、v-text指令

v-text 指令的作用是设置标签的内容；

默认写法会替换全部内容，使用差值表达式{ { message }}仍可以替换指定内容；

内部支持写表达式 < h2 v-text ="message+’!’ ">。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text指令</title>

</head>
<body>
    <div id="app">
        <h2 v-text ="message+'!'">大吉</h2>
        <h2 v-text = "info +'!'">冲天</h2>
        <h2>{
   {
   message+'!'}}</h2>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
   
            el:'#app',
            data:{
   
                message:"牛年",
                info:'牛气'
            }
        })
    </script>
</body>
</html>

2、v-html指令

v-html 指令的作用是：设置元素的 innerHTML；

内容中若有 html 结构会被解析成标签；

v- text 指令无论内容是什么只会解析成文本；

解析文本使用v-text，需要解析html结构使用 v-html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html指令</title>
</head>
<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>
        const app = new Vue({
   
            el:'#app',
            data:{
   
                content:"<a href = 'https://cn.vuejs.org/'>Vue</a>"
            }
        })
    </script>
</body>
</html>

3、v-on指令

v-on 指令的作用是：为元素绑定事件；

事件名不需要写 on；

指令可以简写为 @；

绑定的方法定义在 methods 属性中；

方法内部通过 this 关键字可以访问定义在 data 中数据。

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title> v-on指令</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on指令" v-on:click ="doIt">
        <input type="button" value="v-on简写" @click ="doIt">
        <input type="button" value="双击事件" @dblclick ="doIt">
        <h2 @click = 'changeFood'>{
   {
    food }}</h2>
    </div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">				</script>
    <script>
        const app = new Vue({
   
            el:'#app',
            data:{
   
                food:"土豆"
            },
            methods:{
   
                doIt:function () {
   
                    alert('做it');
                },
                changeFood:function(){
   
                    this.food +="好好吃！"
                }
            },
        })
    </script>
</body>
</html>

补充：

事件绑定的方法写成函数调用的形式，可以传入自定义参数;

定义方法时需要定义形参来接受传入的实参;

事件的后面跟上 .修饰符可以对事件进行限制;

例如 .enter 可以限制触发的按钮为回车。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on 指令补充</title>
</head>
<body>
<div id="app">
    <input type="button" value="点击" @click="doIt('很快啊','闪电五连鞭')">
    <input type="text" @keyup.enter="sayHi">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
   
        el:"#app",
        methods:{
   
            doIt:function (p1,p2) {
   
                console.log("马保国");
                console.log(p1);
                console.log(p2);
            },
            sayHi:function () {
   
                alert("年强人不讲武德");
            }
        },
    })
</script>
</body>
</html>