Vue的基础学习

Vue实例的创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">{{msg}}</div>
		<script type="text/javascript">
		/* 通过new Vue({});创建Vue的实例 */
			new Vue({
				el:'#root',//绑定页面元素(挂载点)
				data:{
					msg:'Hello World'
				}
			});
		</script>
	</body>
</html>

挂载点、模板、实例之间的关系

挂载点:vue实例中el绑定的dom元素
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">{{msg}}</div>
		<script>
			new Vue({
				el:'#root',//绑定页面元素(挂载点)
				data:{
					msg:'Hello World'
				}
			});
		</script>
	</body>
</html>

模板:
vue的实例默认的模板就是挂载点的内部内容指定了模板,那就会覆盖默认的模板而使用指定的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">{{msg}}</div>
		<script>
			new Vue({
				el:'#root',
				//{{}}:vue的插值表达式
				template:'<h1>{{msg}}</h1>',//指定模板
				data:{
					msg:'Hello World'
				}
			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述

vue实例中的数据、事件和方法

加载数据的方法:
1、插值表示 {{}}
2、v-text:将内容进行转义
3、v-html:不会转义
事件:
写在Vue实例下的methods方法下
v-on:click=“handleClick” 或者 @click=“handleClick”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<h1 v-text="content"></h1>
			<div v-html="content" @click="handleClick"></div>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					msg:'Hello World',
					number:123,
					content:"<h1>hello</h1>"
				},
				methods:{
					handleClick:function(){
						this.content="word";
					}
				}
			});
		</script>
	</body>
</html>

属性绑定和双向数据绑定

属性绑定

属性绑定v-bind:属性名
v-bind:title也可以简写为:title
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定和双向数据绑定</title>
		<script src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<div  :title="title">hello world</div>
			<input :value="title"/>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					title:'this is hello world'
				}
			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述
鼠标放上去显示this is hello world

双向数据绑定

使用v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<input v-model="title"/>
			<div>{{title}}</div>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					title:'this is hello world'
				}
			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述
input输入框内容发送变化时,div内容也自动发生变化

计算属性和侦听器

计算属性都以函数的形式写在 Vue 实例内的 computed 选项内,最终返回计算后的结果。
computed 是有缓存的,如果属性值没有发生变化,直接返回缓存中存储的数据
当遍历大数组和做大量计算时,应当使用计算属性,除非不希望得到缓存;
当需要数据实时发生变化时,适合用 methods
监听属性实验使用 watch,可以通过 watch 来监听响应数据的变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性与侦听器</title>
		<script src="js/vue.js" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			姓:<input v-model="firstname"><input v-model="lastname" />
			<div>{{fullName}}</div>
			<div>{{count}}</div>
		</div>
		<script>
			new Vue({
				el: '#root',
				data: {
					firstname: '',
					lastname: '',
					count: 0
				},
				//计算属性
				computed: {
					fullName: function() {
						return this.firstname + " " + this.lastname;
					}
				},
				//监听器
				watch: {
					/* 监听属性fullName */
					fullName:function(){
						return this.count++;
					}
				}

			});
		</script>
	</body>
</html>

页面显示
在这里插入图片描述

v-if,v-show,v-for

v-if指令的参数为true,所在的元素显示,否则则不显示
v-if:式对dom元素的重建与销毁
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性:display
vue官网对v-if和v-show的区别与介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<div v-if="show">v-if的显示与隐藏</div>
			<button @click="toggle">toggle</button>
			<div v-show="hide">v-show的显示与隐藏</div>
			<button @click="hideToggle">v-show的toggle</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#root',
				data: {
					show: true,
					hide:true
				},
				methods: {
					toggle: function() {
						this.show=!this.show;
					},
					hideToggle:function(){
						this.hide=!this.hide;
					}
				}
			});
		</script>
	</body>
</html>

页面显示:
在这里插入图片描述
点击toggle按钮,页面v-if所在的dom元素被移除,只显示
如下视图:
在这里插入图片描述
点击v-show的toggle按钮,v-show所在的dom元素只是添加css属性display:none;
在这里插入图片描述

v-for列表的渲染

vue官网的介绍

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<!-- item 则是被迭代的数组元素的别名。
			 index,数组下标的索引,
			 arr:被遍历的对象或数组
			 :key:便于对数组进行排序,并且会移除key中不存在的元素
			 -->
			<li v-for="(item,index) in arr" :key="item">{{item}}</li>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					arr:[1,2,3]
				}
			});
		</script>
	</body>
</html>


页面显示
在这里插入图片描述

TodoList功能

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputVaule">
				<button @click="submit">提交</button>
				<button @click="del(inputVaule)">删除</button>
			</div>
			<ul>
				<li v-for="(item,index) in arr" :key="index">{{item}}</li>
			</ul>
		</div>
		<script>
			new Vue({
				el:'#root',
				data:{
					inputVaule:'',
					arr:[]
				},
				methods:{
					submit:function(){
						this.arr.push(this.inputVaule);
						this.inputVaule='';
					},
					del(inputVaule){
						this.arr.pop(inputVaule);
						this.inputVaule='';
					}
				}
			});
		</script>
	</body>
</html>

页面显示:
在这里插入图片描述
输入框输入1,点击提交按钮,页面显示如下:
在这里插入图片描述
输入框输入1,点击删除按钮,页面显示如下:
在这里插入图片描述

TodoList使用组件的方式改写

全局注册TodoList组件与使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
			<!--使用全局组件todo-list-->
				<todo-list></todo-list>
			</ul>
		</div>
		<script>
			/* 全局组件的定义 */
			 Vue.component('todo-list',{
			 	template:'<li>item</li>'
			 });
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						
					}
				}
			});
		</script>
	</body>
</html>

局部组件的注册与使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
			<!--使用组件-->
				<todo-list></todo-list>
			</ul>
		</div>
		<script>
			/* 局部组件的定义 */
			var toDoList={
				template:'<li>item</li>'
			};
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				/*注册局部组件*/
				components:{
				//组件名称:组件内容
					'todo-list':toDoList
				},
				methods:{
					handleSubmit:function(){
						
					}
				}
			});
		</script>
	</body>
</html>

使用全局注册组件的方式改写todolist

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
				<!-- 通过属性传递值 -->
				<todo-list v-for="(item,index) of list" :key="index" :content="item">
					{{item}}
				</todo-list>
			</ul>
		</div>
		<script>
			/* 全局组件的定义 */
			Vue.component('todo-list',{
				template:'<li>{{content}}</li>',
				props:['content']//接收从外部传递过来的值
			});
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue);
						this.inputValue='';
					}
				}
			});
		</script>
	</body>
</html>

页面样式:

在这里插入图片描述
输入框输入12,点击提交按钮,输入框内容被清空,下方显示列表12,如下图
在这里插入图片描述
在这里插入图片描述

组件与实例的关系

每个组件都是一个Vue的实例,里面也可以进行方法的定义
每个vue实例就是组件

todolist的删除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" ></script>
	</head>
	<body>
		<div id="root">
			<div>
				<input v-model="inputValue"/>
				<button @click="handleSubmit">提交</button>
			</div>
			<ul>
				<!-- 通过属性传递值 -->
				<todo-list v-for="(item,index) of list" :key="index" :content="item" :index="index"
				@delete="handleDelete">
					{{item}}
				</todo-list>
			</ul>
		</div>
		<script>
			/* 全局组件的定义 */
			Vue.component('todo-list',{
				props:['content','index'],//接收从外部传递过来的值
				/* @click='del',绑定的是组件上的方法,所以方法是在组件的methods:中定义的 */
				template:'<li @click="del">{{content}} {{index}}</li>',
				methods:{
					del:function(){
						/* this.$emit()触发当前实例上的事件。附加参数都会传给监听器回调 */
						this.$emit('delete',this.index);
					}
				}
			});
			new Vue({
				el:'#root',
				data:{
					inputValue:'',
					list:[]
				},
				methods:{
					handleSubmit:function(){
						this.list.push(this.inputValue);
						this.inputValue='';
					},
					handleDelete:function(index){
						this.list.splice(index,1);
					}
					
				}
			});
		</script>
	</body>
</html>

页面显示如下:
在这里插入图片描述
输入框输入值,点击提交按钮,页面显示如下:
在这里插入图片描述
点击列表项,当前列表项删除,

Vue-cli

vue脚手架工具,快速完成vue工程级的开发

  1. 全局安装vue-cli
npm install --gloabal vue-cli
  1. 创建一个基于webpack模板的新项目
vue init webpack my-project

在这里插入图片描述
3. 安装依赖,运行项目

cd my-project
npm run dev

4、也可以输入如下命令,运行项目

npm run start

文档结构图:
在这里插入图片描述
程序的入口文件时文件目录下src文件夹下的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//引入组件
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
//实例化Vue对象
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

  1. 以.vue结尾的vue单文件里面,必须有一个根元素包裹所有的元素
  2. 在vue-cli开发的项目中data不再是对象的形式而是函数的形式
<script>
    new Vue({
      el:'#root',
      data:{//data在Vue实例中,以对象的形式展现

      }
    })
</script>
<style>

</style>
<template>
  <div>
      <div>
        <input/>
        <button>提交</button>
      </div>
      <ul>
        <li></li>
      </ul>
  </div>

</template>

<script>
    export default{
      //在vue脚手架创建的vue项目中,data以函数的形式展现
      data:function(){
			return {
			}
      }
    }
    //可以简写为以下方式(在ES6语法中,简写成如下方式)
    data(){
    	return {
		}
    }
</script>
<style>

</style>

改写todolis

TodoItem.vue

<template>
  <div>
    <li @click="handleDelete">
      {{content}}
    </li>
  </div>
</template>

<script>
export default {
 props:['content','index'],//定义接受父组件的属性content,index
 methods:{
   handleDelete(){
     //子组件触发delete事件,父组件需要监听这个事件
    this.$emit('delete',this.index);
   }
 }
}
</script>

<style>

</style>

TodoList.vue

<template>
  <div>
      <div>
        <input v-model="inputValue"/>
        <button @click="handleSubmit">提交</button>
      </div>
      <ul>
        <!-- 3.引用局部组件-->
        <!-- 父组件监听到子组件的delete事件之后,执行handleDelete-->
        <todo-item v-for="(item,index) in list" :content="item" :index="index" :key="index" @delete="handleDelete"></todo-item>
      </ul>
  </div>

</template>

<script>
  //1.引入组件
  import TodoItem from './components/TodoItem.vue'
    export default{
      //在vue脚手架创建的vue项目中,data以函数的形式展现
      data:function(){
          return{
            inputValue:'',
            list:[]//定义数组
          }
      },
      components:{
        //2.注册组件
        //将局部组件注册到页面中
        /* todo-item标签对于TodoItem标签*/
        'todo-item':TodoItem
      },
      methods:{
        handleSubmit(){
          this.list.push(this.inputValue);//将输入的inputValue的值添加到数组中
          this.inputValue='';//清空inputValue的值
        },
        handleDelete(index){
          this.list.splice(index,1);//删除当前项
        }
      }
    }
</script>
<style>

</style>

文件结构:
在这里插入图片描述

全局样式与局部样式

scoped:css作用域作用于当前页面或组件,用来区分在子组件和父组件.class名称一样时进行区分,防止全局污染

<style scoped>

</style>

class与style绑定

class的绑定

  1. 绑定单个class
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js">
		</script>
	</head>
	<body>
		<div id="app">
		<!--2.:class绑定样式,:class="{样式名称:变量名}"
		变量名的值为true为绑定,false为不绑定样式
		-->
			<div :class="{red:isRed}">hi vue</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
				//3.变量名
					isRed:true
				}
			});
		</script>
		<style type="text/css">
		/*1.声明样式*/
			.red{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				line-height: 200px;
				text-align: center;
				color: #FFF;
			}
		</style>
	</body>
</html>

页面效果:
在这里插入图片描述

  1. 绑定多个class样式,class之间用逗号,隔开
    代码如下:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js">
		</script>
	</head>
	<body>
		<div id="app">
			<div :class="{red:isRed,green:isRed}">hi vue</div>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:'#app',
				data:{
					isRed:true
				}
			});
		</script>
		<style type="text/css">
			.red{
				width: 200px;
				height: 200px;
				background-color: #FF0000;
				line-height: 200px;
				text-align: center;
				color: #FFF;
			}
			.green{
				font-size: 32px;
			}
		</style>
	</body>
</html>

页面样式
在这里插入图片描述
3.绑定数组形式的class

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- 3.绑定class属性 -->
		<div id="app" :class="['green']">hello</div>
		<style type="text/css">
			.green{
				color: #00FF00;
				font-size: 30px;
			}
		</style>
		<script type="text/javascript">
			/* 2.创建vue的实例 */
			new Vue({
				el:'#app'
			});
		</script>
	</body>
</html>

页面样式:
在这里插入图片描述
4.通过条件运算绑定class样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<!-- :class条件运算绑定class -->
		<div id="app" :class="isActive?'red':''">1</div>
		<script>
			/* 2.创建Vue实例*/
			new Vue({
				el:'#app',
				data:{
					isActive:true
				}
			});
		</script>
		<style type="text/css">
			.red{
				color: #FF0000;
			}
		</style>
	</body>
</html>

style绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js"></script>
	</head>
	<body>
	<!--:style绑定样式,:style="{样式名称:'属性值',样式名称:'属性值'}"-->
		<div :style="{color:'hotpink',fontSize:'32px'}" id="app">hello</div>
		<script>
		/*1.实例化Vue对象*/
			new Vue({
				el:'#app'
			});
		</script>
	</body>
</html>

页面样式
在这里插入图片描述

事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.引入vue.js -->
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- @dblclick:双击事件
			 @click:单机事件
			 访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
			 -->
			<button @click="greet('abc',$event)" >greet</button>
			<button @dblclick="add(1)">双击事件</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
				},
				methods:{
					greet:function(str,e){
						alert(str);
						confirm(e);
					},
					add:function(str){
						confirm(str);
					}
				}
			})
		</script>
	</body>
</html>

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页