Vue基础笔记

最新推荐文章于 2024-08-08 15:28:54 发布

至上_

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量121

点赞数

分类专栏：学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_36762914/article/details/129461729

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue笔记

Vue基础笔记：

Vue基础笔记：

1.Vue data数据

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!-- 1.导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
	<span>{{message}}</span>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			message:'hello',
		}
	})
</script>
</html>

2.v-bind 绑定元素属性

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
		<a href="#">{{message}}</a>
		<span>{{hello}}</span> 
		<hr>
		<!-- <span>{{world}}</span> -->
		<hr>
		<a v-bind:href="url">戳我有惊喜</a>
		<br>
		<span :title='showmessage'>鼠标放在这里</span>
</div>

</body>
<script type="text/javascript">
	
	var vm = new Vue({
		el:'#app', 
		data:{
			message:'领取优惠劵',
			hello:'hi en heng',
			url:'http://www.itheima.com',
			showmessage: '当前的时间是' + new Date().toLocaleString()
		}
	})

</script>
</html>

3.v-for 循环

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!-- 1.导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
	<span>{{message}}</span>

	<hr>
	<ul>
		<li v-for="(item,index) in items"> {{index}} ~~~ {{item}} </li>
	</ul>
	<hr>
	<!-- 对对象进行遍历 -->
	<ul>
		<li v-for="(value,key) in object">{{key}} {{value}}</li>
	</ul>
	<hr>
	<ul>
		<li v-for="todo in todos">{{todo.title}} ---- {{todo.author}}</li>
	</ul>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			message:'hello',
			items:['python','mysql','linux','html','js','css'],
			object: {
	      title: 'How to do lists in Vue',
	      author: 'Jane Doe',
	      publishedAt: '2016-04-10'
    	},
    	todos: [
       {
        title: 'Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      },
      {
        title: 'python',
        author: 'Ricky',
        publishedAt: '2019-04-10'
      },
      {
        title: 'itcast',
        author: 'itcast',
        publishedAt: '2006-05-08'
      }
    ]
		}
	})
</script>
</html>

4.v-if

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!-- 1.导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
	<span>{{message}}</span>
	<hr>
	<a href="#" v-if="isLogin">欢迎你归来</a>
	<hr>
	<a href="#" v-if="level === 1">青铜</a>
	<a href="#" v-else-if="level === 2">白银</a>
	<a href="#" v-else>王者</a>


	<hr>
	<span v-if="seen">v-if</span> <br>

	<span v-show="seen">v-show</span>

</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			message:'hello',
			isLogin:false,
			level:2,
			seen:true,
		}
	})
</script>
</html>

5.methods事件 v-on:绑定事件

可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!-- 1.导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
	<span>{{message}}</span>

	<button v-on:click="login">登陆</button> <br>
	<a href="javascript:;" @click="register">注册</a>

	<hr>
	<button @click="add(counter)">点击+1</button>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
	var vm = new Vue({
		// 接管标签
		el:'#app',
		// 绑定数据
		data:{
			message:'hello',
			counter:1,
			total:0,
		},
	// 方法
		methods:{
				login:function(){
						alert('我被点击了')
				},
				register:function(){
					alert('zhuce')
				},
				add:function(counter){
		// this 表示当前的 vue 我们通过this.total 来获取data中的变量
						this.total+=counter;
						alert(this.total)
				}
		}
	})
</script>
</html>

6.model表单输入绑定(双向绑定数据) v-model=“data”

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!-- 1.导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
	<span>{{message}}</span>
	<hr>

	<table>
		<tr> <td>用户名</td> <td><input type="text" name="username" v-model="username"></td></tr>
		<tr> <td>密码</td> <td><input type="password" name="password1" v-model="password1"></td></tr>
		<tr> <td>确认密码</td> <td><input type="password" name="password2" v-model="password2"></td></tr>
		<tr> <td>性别</td> 
			<td>
					男 <input type="radio" name="sex" value="boy" v-model="sex">
					女 <input type="radio" name="sex" value="girl" v-model="sex">
			</td>
		</tr>
	
	<tr>
			<td>爱好</td>
        <td>
          足球 <input type="checkbox" name="like" value="足球" v-model="like"> 
          篮球 <input type="checkbox" name="like" value="篮球" v-model="like">
          兵乓球<input type="checkbox" name="like" value="兵乓球" v-model="like"> 
        </td>
      </tr>
	

	</table>

	<button v-on:click="register">注册</button>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			message:'hello',
			username:'',
			password1:'',
			password2:'',
			sex:'',
			like:[],
		},
		methods:{
			register:function(){
				alert(this.username+this.password1+this.password2+this.sex+this.like)
			}
		}
	})
</script>
</html>

7.Todolist案例数据变更改变视图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<!-- 导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 定义标签 -->
	<div id="app">
		<span>{{message}}</span>
	<input type="text" name="todoitem" v-model="newitem"> <button @click="add">添加</button>
	<hr>
	<ul>
		<li v-for="(item,index) in items">
		 <a href="javascript:;" @click="up(index)">↑</a>	{{item}}  <a href="javascript:;" @click="deleteitem(index)">删除</a>  <a href="javascript:;" @click="down(index)">↓</a>
		</li>
	</ul>
	</div>

</body>
<!-- 初始化vue -->
<script type="text/javascript">
	var vm = new Vue({
		// el 接管 html
		el:'#app',
		//data 绑定数据
		data:{
			message:'hello ',
			items: ['学习html','学习python','mysql'],
			newitem:''
		},
		// 绑定的事件
		methods:{
				add:function(){
						this.items.push(this.newitem);
						this.newitem='';
				},
				deleteitem:function(index){
					// alert(index)
					this.items.splice(index, 1);
				},
				up:function(index){
						// 1.获取当前的元素
						current=this.items[index]
						// 2.先把当前的元素删除
						this.items.splice(index, 1)
						// 3.再添加,添加的时候让它的索引-1
						this.items.splice(index-1, 0,current)
				},
				down:function(index){
							// 1.获取当前的元素
						current=this.items[index]
						// 2.先把当前的元素删除
						this.items.splice(index, 1)
						// 3.再添加,添加的时候让它的索引+1
						this.items.splice(index+1, 0,current)
				}
		}
	})
</script>
</html>

8.life 生命周期

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<!-- 1.导入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- 2.定义一个 标签 需要给一个标签添加 id -->
<div id="app">
	<span>{{message}}</span>
</div>
</body>
<!-- 3.创建vue实例 -->
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{
			message:'hello',
		},
		// 生命周期的钩子(函数) 没有在methods
		beforeCreate:function(){
			console.log('beforeCreate')
		},
		created:function(){
			console.log('created')
		},
		beforeMount:function(){
			console.log('beforeMounted')
		},
		mounted:function(){
			console.log('mounted')
		},
		beforeDestroy:function(){
			console.log('beforeDestroy')
		},
		destroyed:function(){
			console.log('destroyed')
		}
	})
</script>
</html>

9.axios发送ajax请求

1.因为Vue的模板变量和django的模板变量分隔符冲突,所以需要修改Vue的分隔符delimiters:["[[","]]"]
2.箭头函数解决这个指向的问题

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 开发环境版本 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 导入axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <span>{{ message }}</span> <br>
  <span>[[ message ]]</span> <br>
  <a @click="login" href="javascript:;">登录-GET</a> <br>
  <a @click="login2" href="javascript:;">登录-GET2</a> <br>
  <a @click="login3" href="javascript:;">登录-POST</a> <br>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    delimiters:["[[","]]"],  
    data: {
        message: 'Hello Vue!',
    },
    methods:{
        login:function(){
            let url = 'http://127.0.0.1:8000/login/?username=admin&password=123';
            axios.get(url).then(response=>{
                if(response.data.code == '200'){
                  this.message=response.data.info.username;
                }else if (response.data.code == '400') {
                  this.message=response.data.msg;
                }
            }).catch(error=>{
              console.log(error)
            })
        },
        login2:function(){
            let url = 'http://127.0.0.1:8000/login/';
            axios.get(url,{
                params:{
                    "username":"admin",
                    "password":"123"
                }
            }).then(response=>{
                if(response.data.code == '200'){
                  this.message=response.data.info.username;
                }else if (response.data.code == '400') {
                  this.message=response.data.msg;
                }
            }).catch(error=>{
              console.log(error)
            })
        },
         login3:function(){
            let url = 'http://127.0.0.1:8000/login/';
            axios.post(url,{
                "username":"admin",
                "password":"123"
            }).then(response=>{
                if(response.data.code == '200'){
                  this.message=response.data.info.username;
                }else if (response.data.code == '400') {
                  this.message=response.data.msg;
                }
            }).catch(error=>{
              console.log(error)
            })
        }
    }
})
</script>
</html>