Vue基础和基础代码简介

最新推荐文章于 2023-10-16 12:32:14 发布

千魂！~

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量273

点赞数 2

分类专栏： Vue 文章标签： vue js vue.js html

本文链接：https://blog.csdn.net/RememberQian/article/details/103870944

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VUE

1：什么是vue

vue是目前最火的一个框架，和angular.js和react.js 一起，并称为前端三大主流框架。

是一套构建用户界面的框架，只管制视图层，它易于上手，便于与第三库和既有羡慕整合。

2：vue入门

1：在页面上导入vue.js

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">        
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
                
            },
            methods:{
                
            }            
        });	
    </script>            
    </body>
</html>

创建vue实例，当我们导入包的时候，在浏览器的内存中，就多了一个vue的构造函数。

el：表示，当前我们new 的这个vue的实例。要控制页面的哪个区域，

data：表示用来保存vue实例的数据，通过vue提供的指令，就能很方便的吧数据渲染到页面上，程序员就不用再手动操作DOM元素了，【vue框架，不提倡我们去操作去手动操作DOM元素。】

Methods：表示vue实例中的方法的集合，在这里我们可以写我们需要的方法。

3：vue指令

1：插值表达式和v-text

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">   
        <p> 自定义数据++ {{msg}} </p> 
        <!-- {{ }} 表示插值表达式，相当于占位符，
		对应vue实例上的msg属性，将msg的值显示到页面上
		并且在插值表达式的前后 可以自定义凭借一切自己的数据
		-->
        <p v-text="msg"> </p>
        <!--
		 v-text和插值表达式的作用基本一样，但是v-text会覆盖元素中原本的内容，
		在元素中只显示msg的值
		-->
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
                msg:'测试'
            },
            methods:{
                
            }            
        });	
    </script>            
    </body>
</html>)

2：v-html

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">   
       <p v-html="msg"></p>
        <!--
		v-html 可以解析出msg中的html标签，
		而插值表达式和v-text不可以
		-->
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
                msg:'<h1>测试</h1>'
            },
            methods:{
                
            }            
        });	
    </script>            
    </body>
</html>

3：v-bing 和 v-model

v-bing :是vue 中提供的用来单向绑定属性的指令。

v-model：是vue 中提供的用来双向绑定属性的指令。

单向绑定：指的是当data中属性改变，页面对应的值也被改变，

双向绑定：指的是当data中属性改变，页面对应的值也被改变，同时当页面的值改变，data中属性的值也被改变。

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">   
       <input type="button" value="按钮" v-bing:title="msg"/>
        <!--单向绑定，也可以加上自己的需要的东西
			可以简写为 :  冒号
			:title="msg"
		-->
       <input type="button" value="按钮" v-model:title="msg2"/>
        <!--双向绑定，也可以加上自己的需要的东西 -->
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
                msg:'测试',
                msg2:'测试2'
            },
            methods:{
                
            }            
        });	
    </script>            
    </body>
</html>

4：v-on事件绑定

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">   
      <input type="button" value="按钮" v-on:click="show()"/>
        <!-- 
			v-on:事件名称，可以用来绑定事件，会找到对应的methods 上的对应方法。
		可以简写为@
		<input type="button" value="按钮" @click="show"/>
		可以再 add(传递参数)
		-->
        
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
                msg:'测试',
                msg2:'测试2'
            },
            methods:{
                show:function(){
                    alert("123");
                }
            }            
        });	
    </script>            
    </body>
</html>

5：按键修饰符

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">   
        <!-- 
			敲击 回车实现 add 事件
		键盘对应的键码链接 (https://blog.csdn.net/weixin_42218847/article/details/81411291)
		-->
        <input type="button" value="按钮" @keyup.enter="add"/>      
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
                msg:'测试',
                msg2:'测试2'
            },
            methods:{
                add:function(){
                    alert("123");
                }
            }            
        });	
    </script>            
    </body>
</html>

6：class绑定

<div id="app">
    <div :class="{'active':isActive}"></div>
</div>
<script>
var app = new Vue({
    el:'#app',
    data:{
        isActive:true
    }
})
</script>

最终渲染结果为：

7：v-for 循环

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">   
        <!-- user代表每次循环的变量，i表示下标从0开始
			in  list 表示循环的对象是什么。
			:key 表示主键 保证数据的唯一性。
		-->
     <p v-for="(user,i) in list" :key="user.id">
     	{{ user.id }}   
     </p>
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
               list:[
                   {id:1,name="123"},
                   {id:2,name="123"}
               ]
            },
            methods:{
            }            
        });	
    </script>            
    </body>
</html>

8：vue获取dom对象的方法

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">   
      	<h1 ref="demo">
            测试
        </h1>
        <button type="button" @click="demo()"></button>
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
               
            },
            methods:{
                demo:function(){
                    console.log(this.$refs.demo.innerText);
                }
            }            
        });	
    </script>            
    </body>
</html>

4：vue上的data数据操作

1：data上数组添加元素

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">  
     
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
               list:[
                   {id:1,name="123"},
                   {id:2,name="123"}
               ]
            },
            methods:{
                //this 表示当前vue实例
                //this.list 指向data上的list
                //push 添加数据 
                add:funciton(){
                    var car={id:3,name="12313"};
            		this.list.push(car);
                }
            }            
        });	
    </script>            
    </body>
</html>

2：data数组遍历和删除的方法

<html>
	<head>
    	<title></title>
        <script src="vue.js"></script>
    </head>
<body>
  
    <div id="app">  
     
    </div>    
    <script>
    	var app = new VUE({
            el:'#app',
            data:{
               list:[
                   {id:1,name="123"},
                   {id:2,name="123"}
               ]
            },
            methods:{
                //根据id删除
                //some()方法用于检测数组中的元素是否满足条件
                //some() 方法会依次执行数组的每个元素如果满足					条件返回true 剩余的不会再次执行 
                //不满组就返回false 
                //splice 用来删除 第一个单数单表下标，第二个					参数代表删除几个。
                //第三个参数代表替换的值，可以不写。
                
                del:function(id){
                	this.list.some((item,i)=>{
                        if(item.id == id){
                           this.list.splice(i,1);
                         }
                        return true;
                    }
            	}
            }            
        });	
    </script>            
    </body>
</html>

千魂！~

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue基础和基础代码简介

VUE1：什么是vue vue是目前最火的一个框架，和angular.js和react.js 一起，并称为前端三大主流框架。是一套构建用户界面的框架，只管制视图层，它易于上手，便于与第三库和既有羡慕整合。2：vue入门1：在页面上导入vue.js<html> <head> <title></title> ...
复制链接

扫一扫

专栏目录