Vue学习

最新推荐文章于 2024-09-30 15:23:15 发布

Shannon404

最新推荐文章于 2024-09-30 15:23:15 发布

阅读量268

点赞数 1

分类专栏： Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/suga_/article/details/118708052

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

传送门

1、定义
2、下载VUE.JS
3、进入实战
4、小结

1、定义

1.1 官网地址：https://cn.vuejs.org/

                  官网解释为：渐进式JavaScript框架（对原始JS的封装）

1.2 渐进式：
在这里插入图片描述
1.3 具体来说：html中JavaScript常用语句——document.getElementByid("")，为了简化这些语句，建议使用Vue，是前后端分离的架构核心

1.4 前后端分离的交互：Vue(前)———JSON————>Springboot（后）

2、下载VUE.JS

2.1 需要联网的两种方式：

直接向html中导入两种之一（版本对应要一致）
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

2.2 无需联网的方式：

https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js

https://cdn.jsdelivr.net/npm/vue@2

以上两个网址分别对应不同版本，网页搜索下载后导入项目即可、

3、进入实战

Ⅰ、三种输出方式：

3.1.1 代码01：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE01</title>
</head>
<body>
<div id="apa">
{{ ml }}<br/>
<h2>{{bl}}</h2>
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="js/vue.js"></script>
<script>//vue元素数据要放在作用块的下面，否则找不见
var apa=new Vue({
	el:"#apa" ,//元素作用：用来指定VUE实例作用范围
	data:{       //数据作用：用来给VUE实例对象绑定一系列数据
		ml:"CSDN欢迎您！",
		bl:"你爱我我爱你 mxbc甜蜜蜜"
	}
});
</script>

运行界面：
在这里插入图片描述

3.1.2 代码02：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VUE02</title>
</head>
<body>
<div id="app">
{{ml}}<br/>
{{user.name}}<br/>
{{girls[0]}}<br/>
{{users[0].name}}<br/>
{{users[2].age}}<br/>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
 var app=new Vue({
	el:"#app",//作用范围
	data:{
		ml:"小李",
		user:{name:"小米",age:33,sex:"男"},//对象属性
		girls:["lia","lee","lisa"],//数组
		users:[
			{name:"张三",age:09,sex:"男"},
			{name:"王五",age:88,sex:"男"},
			{name:"李四",age:02,sex:"女"},
		]//数组对象属性结合
	}
	
})
</script>

运行界面：
在这里插入图片描述
3.1.3 代码03：

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2  v-text="ml">您好</h2><!-- 覆盖标签内数值 -->
</div>

运行界面：
在这里插入图片描述

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2> <span  v-text="ml"></span>您好</h2><!-- 不会覆盖标签内数值 -->
</div>

运行界面：
在这里插入图片描述
注意：在网络不好的情况下，{{}}取值会出现插值闪烁，即加载时会出现原始代码，而后者可避免这种情况

3.1.4 代码04：

<div id="app">
<h2>{{ml}}您好</h2><!-- 不会覆盖标签内数值 -->
<h2> <span  v-text="ml"></span>您好</h2><!-- 这样就不会覆盖标签内数值 -->
<h2 v-html="ml"></h2>
</div>

运行界面：在这里插入图片描述

<div id="app">
<h2>{{content}}</h2>
<h2 v-text="content"></h2><!--以文本形式输出数值 -->
<h2 v-html="content"></h2><!-- 经过解析超链接后才会输出 -->
</div>
<script src="js/vue.js"></script>
<script>
 var app=new Vue({
	el:"#app",//作用范围
	data:{
		ml:"hello vue",
		age:99,
		content:"欢迎来到<a href='https://www.csdn.net/?spm=1001.2014.3001.5359'>CSDN</a>",
	}
})
</script>

运行界面：
在这里插入图片描述
Ⅱ、vue事件绑定(具体事件: JS事件.)

3.2.1 代码05：（依次绑定单击事件、鼠标移入事件、鼠标移出事件）

此代码段使用了联网方式引入VUE.JS

<body>
<div id="apa">
    {{ml}}<br/><br/>
    <input type="button" value="点我" v-on:click="aaa" v-on:mouseover="bbb" v-on:mouseout="ccc">
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//vue元素数据要放在作用块的下面，否则找不见
var apa=new Vue({
    el:"#apa" ,//元素作用：用来指定VUE实例作用范围
    data:{       //数据作用：用来给VUE实例对象绑定一系列数据
        ml:"CSDN欢迎您！",
    },
    methods:{
        aaa:function (){
            alert("VUE")
        },
        bbb:function(){
            console.log("mouse over")//控制台输出
},
        ccc:function(){
            console.log("mouse out")//控制台输出
        }
    }
});
</script>

运行界面：
在这里插入图片描述
控制台上输出
3.2.2 代码06：

<body>
<div id="apa">
   <h2> {{age}}</h2><br/><br/>//双向绑定
    <input type="button" value="点我年龄+1" v-on:click="ddd" >
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//vue元素数据要放在作用块的下面，否则找不见
var apa=new Vue({
    el:"#apa" ,//元素作用：用来指定VUE实例作用范围
    data:{       //数据作用：用来给VUE实例对象绑定一系列数据
        ml:"CSDN欢迎您！",
        age:99
    },
    methods:{
        ddd:function (){
            console.log(this.age)
            console.log(this);//this 对象代表当前vue实例
            this.age=this.age+1;
        }
    }
});
</script>

运行界面：
双向绑定
3.2.3 代码07：

<body>
<div id="apa">
   <h2> {{age}}</h2><br/><br/>
    <input type="button" value="点我改变年龄" @click="eee(10,'xiaobai')" ><!--定义实参-->
</div>
</body>
</html>
<!-- 引入开发vue版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>//vue元素数据要放在作用块的下面，否则找不见
var apa=new Vue({
    el:"#apa" ,//元素作用：用来指定VUE实例作用范围
    data:{       //数据作用：用来给VUE实例对象绑定一系列数据
        ml:"CSDN欢迎您！",
        age:99
    },
    methods:{
        eee:function (number,name){//定义形参接收实参
            console.log(number);
            console.log(name);
            this.age=this.age+number;
        }
    }
});
</script>