VUE笔记

爱吃大猫的小鱼

于 2024-06-27 20:06:34 发布

阅读量599

点赞数 13

文章标签： vue.js 笔记前端

本文链接：https://blog.csdn.net/Gou_Hao_Liang/article/details/139997102

版权

框架：

框架结构，把很多基础功能已经实现（封装了）。

框架：在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率。

举例：操作页面

现在：点击按钮，触发事件，获得要操作的标签，对标签进行操作。

框架：操作网页时，程序员只关注操作的内容即可，对标签的内容更新操作，都由框架完成。

前端框架：

JavaScript是原生的。

vue.js 是一个js框架，不是代替js的，是对js进行封装。

优点:

体积小

效率高

双向数据绑定：

M V VM

生态丰富，学习成本低（花费时间少点）

UI框架：将前端常用的一些组件（表单，按钮，消息提示）进行封装；对html和css进行封装。

后端java框架：

mybatis--jdbc

spring···

部分VUE指令

v-show&&v-if和v-else

v-show="布尔值" true-显示，false-隐藏控制标签的display属性，显示和隐藏标签，效率高 v-if="布尔值" true-显示，false-隐藏会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/v2.6.10/vue.js"></script>
		<style>
			img{
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
		 v-show="布尔值" true-显示，false-隐藏  控制标签的display属性，显示和隐藏标签，效率高
		 v-if="布尔值" true-显示，false-隐藏  会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合，
		 -->
		<div id="app">
			<img v-show="isShow" src="img/1.jpg"/>
			<img v-show="age<18" src="img/2.jpg"/>
			
			<img v-if="isShow" src="img/3.jpg"/>
			<img v-if="age<18" src="img/4.jpg"/>
			<img v-else src="img/5.jpg"/>
			<input type="button" value="切换" @click="qh()">
		</div>
		<script>
			
		   var app = new Vue({
		     el: '#app', 
		     data: {
		      isShow:true,
			  age:15
		     },
			 methods:{
				qh(){
					this.isShow=!this.isShow;
					this.age=19;
				}
			 }
		   })
		   
		   
		</script>
	</body>
</html>

v-users

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/v2.6.10/vue.js">
        </script>
    </head>
    <body>
        
        <div id="uid">
            <li></li>
        </div>
        <script>
            var users=[{name:"jim",age:20,gender:"男"},
                {name:"lih",age:21,gender:"女"},
                {name:"xm",age:22,gender:"男"}]
           
           var uobj =document.getElementById("uid");
           var s="";
           for(var i=0;i<users.length;i++){
               s+="<li>姓名:"+users[i].name+",年龄:"+users[i].age+",性别:"+users[i].gender+"</li>"
           }
           uobj.innerHTML=s;
        </script>
    </body>
</html>

v-for

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/v2.6.10/vue.js">
        </script>
    </head>
    <body>
        
        <div id="app">
            <li v-for="usr in users">
                姓名:{{usr.name}}
                年龄:{{usr.age}}
                性别:{{usr.gender}}
            </li>
                
        </div>
        <script>
            
           var app = new Vue({
             el: '#app', 
             data: {//数组，模拟从后端响应回来的数据
              users:[{name:"jim",age:20,gender:"男"},
                {name:"lih",age:21,gender:"女"},
                {name:"xm",age:22,gender:"男"}]
             },
             methods:{
                
             }
           })
           
           
        </script>
    </body>
</html>

VUE-CLI(脚手架)

vue-cli官方提供的脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构及基础代码，使得开发更加的快速；

主要的功能：

统一的目录结构，本地调试，热部署，单元测试，集成打包上线

需要的环境：

Node.js(前段js的一个运行环境)

npm:

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展.

使用HbuilderX 搭建vue-cli项目步骤：

一、创建一个vue-cli默认项目或者vue3-cli默认项目，学习前期建议使用vue-cli默认项目创建后会进行下载，需要等待一段时间

二、通过npm i vue-router@3.5.3命令在命令窗口安装vue-router插件包

三、创建Router目录，并在其中创建index.js文件，并在其中配置路由，导入路由和其他组件

四、在Vue.use(router)后定义组件路由，最后在导出路由。

五、使用路由

六、在main.js中配置路由。

七、运行项目

搭建Node.js环境：

一、下载Node.js

通过地址下载： Node.js — Download Node.js®

二、解压后

选好要安装的文件位置

之后一直让其继续就行，知道安装好Node.js。

然后我们可以通过win+R cmd进入指令窗口，输入“node -v”和"npm -v"

当分别出现v16.20.2和8.19.4说明安装好了，可以通过HbuilderX快速创建vue-cli项目了。

爱吃大猫的小鱼

关注

13
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
VUE笔记

v-show="布尔值" true-显示，false-隐藏控制标签的display属性，显示和隐藏标签，效率高 v-if="布尔值" true-显示，false-隐藏会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合。一、创建一个vue-cli默认项目或者vue3-cli默认项目，学习前期建议使用vue-cli默认项目创建后会进行下载，需要等待一段时间。vue.js 是一个js框架，不是代替js的，是对js进行封装。vue-cli官方提供的脚手架，
复制链接

扫一扫