vue学习笔记记录-慕课网《vue2.5入门》黑马程序员《VUE开发小程序》

最新推荐文章于 2023-10-02 21:07:41 发布

有趣的学习

最新推荐文章于 2023-10-02 21:07:41 发布

阅读量530

点赞数 2

分类专栏：笔记文章标签： vue html javascript node.js

本文链接：https://blog.csdn.net/weixin_40852935/article/details/105193836

版权

笔记专栏收录该内容

54 篇文章 14 订阅

订阅专栏

vue学习笔记记录-慕课网《vue2.5入门》

看慕课网上的课程《vue2.5入门》
黑马程序员《VUE开发小程序》

写在前面：已经有一定的html，css，JavaScript的基础，学习vue为了更好地开发，写了一些基础上的笔记，为了以后复习查阅

1、vue基础语法

1.1、创建vue实例、绑定数据和事件

目录结构

vuedemo
- vue.js
- index.html

导入vue库

	<head>
		<meta charset="utf-8">
		<title>导入vue</title>
		<script src="./vue.js" ></script>
	</head>

绑定数据

<div id="root" >{{content}}</div>
<script>
		 new Vue({
			 el:"#root",
			 data:{
				 content:"hello",
			 }
		 })	
		</script>

绑定事件函数
其中 @click=是v-on:click的缩写

	<div id="root" >{{content}}
		<div @click="handleClick"></div>
	</div> 
	<script>
	 new Vue({
		 el:"#root",
		 data:{
			 content:"hello",
		 },
		 methods:{
			 handleClick:function(){
			 	 alert(123),//弹出123
				 this.content="wolrd"
				 //点击后切换为world，改变数据
			 }
		 }
	 })	
	</script>

1.2、属性绑定、数据双向绑定

属性绑定
其中:title是v-bind:title的缩写

<div id="root" >
	<div :title="title"> hello world</div>
	//=后面的是js表达式，可以用'TEEL'+title
	//则输出TEELthis is hello world
</div> 
<script>
 new Vue({
	 el:"#root",
	 data:{
		 title:"this is hello world "
		 //鼠标上去的提示语
	 }
 })	
</script>

下面展示一些 双向数据绑定。

双向数据绑定使用v-model:来

<div id="root" >
	<input v-model:value="content" />
	<div id="">{{content}}</div>
</div> 
<script>
 new Vue({
	 el:"#root",
	 data:{
		 content:"this is content ",
	 }
 })	
</script>

输入框内显示content的内容
在这里插入图片描述
输入框内改变，content也改变

1.3、计算属性、监听器

下面展示一些 计算属性。

计算属性采用computed:{}，计算内容写在其中
监听器采用watch::{}，变化写在其中

<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:function(){
			 this.count++
		 }
	 }
 })	
</script>

效果
在这里插入图片描述

1.4、v-if、v-show和v-for指令

v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
下面展示一些 v-if。

<div id="root" >
	<div v-if="show">hello world</div>
	<button @click="handleClick">toggle</button>
</div> 
<script>
 new Vue({
	 el:"#root",
	 data:{
		 show:true
	 },
	 methods:{
		 handleClick:function(){
			 this.show = !this.show;//取反
		 }
	 }
 })	
</script>

默认
在这里插入图片描述
点击后

v-for
下面展示一些 v-for。

<div id="root" >
	<ul>
		<li v-for="(item,index) of list" :key="index">{{item}}</li>
	</ul>
</div> 
<script>
 new Vue({
	 el:"#root",
	 data:{
		 list:[1,2,3,3]
	 }
 })	
</script>

在这里插入图片描述

2、todolist案例开发

2.1、todolist功能开发

下面展示一些 todolist实例。

<div id="root" >
	<div id="">
		<input v-model="inputValue" />
		<button @click="handleClick">提交</button>
	</div>
	<ul>
		<li v-for="(item,index) of list" :key="index">{{item}}</li>
	</ul>
</div> 
<script>
 new Vue({
	 el:"#root",
	 data:{
		 list:[],
		 inputValue:'',
	 },
	 methods:{
		 handleClick:function(){
			this.list.push(this.inputValue),
			this.inputValue=""
		 }
	 }
 })	
</script>

在这里插入图片描述

2.2、组件的拆分

全局组件
下面展示一些 全局组件。

<todo-item></todo-item>

Vue.component('todo-item',{
	template:'<li>item</li>'
})

下面展示一些 局部组件。

<todo-item></todo-item>

var TodoItem ={
	template:'<li>item</li>'
}
new Vue({
	 el:"#root",
	 components:{//对局部组件注册
		 'todo-item':TodoItem
	 }
})

用全局组件来实现todolist
下面展示一些 全局组件，并接收。

<todo-item 
	v-for="(item,index) of list"
	:key="index"
	:content="item"
	>
</todo-item>

//组件
Vue.component('todo-item',{
	props:['content'],//接收名为content的数据
	template:'<li>{{content}}</li>'
})

2.3、组件与实例

vue是有一个个实例来构成的，每个组件都是实例，每个实例都可以包括props、template、methods

2.4、todolist删除功能

下面展示一些 完整的todolist 可以添加和删除。

<body>
	<div id="root" >
		<div id="">
			<input v-model="inputValue" />
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<!-- <li v-for="(item,index) of list" :key="index">{{item}}</li> -->
			<todo-item 
			v-for="(item,index) of list"
			:key="index"
			:content="item"
			:index="index"
			@delete="handleDelete"
			>
			
			</todo-item>
		</ul>
	</div> 
	<script>
		Vue.component('todo-item',{
			props:['content','index'],
			//接收名为content的数据，inde为对应下标
			template:'<li @click="handleClick">{{content}}</li>',
			methods:{
				handleClick:function(){
					this.$emit('delete',this.index)
					//触发delete，传递一个index值
				}
			}
		})
	
	new Vue({
		 el:"#root",
		
		 data:{
			 list:[],
			 inputValue:'',
		 },
		 methods:{
			 handleSubmit:function(){
				this.list.push(this.inputValue),
				this.inputValue=""
			 },
			 handleDelete:function(index){
				 //传入下标index
				 this.list.splice(index,1)
				 //list中index下标删除一个
			 }
		 }
	 })	
	</script>
</body>