Vue2.5 入门基础教程

最新推荐文章于 2025-05-13 19:40:35 发布

原创最新推荐文章于 2025-05-13 19:40:35 发布

· 826 阅读

1 ·

版权

文章标签：

#Vue #Vue入门 #TodoList

这篇博客是基于Vue2.5的入门教程，介绍了Vue的基础语法，如模板挂载点、事件绑定、计算属性和侦听器、条件展示与循环，以及组件化开发，包括全局组件、局部组件和发布订阅模式。同时，讨论了Vue CLI的目录结构和优势，强调了模板的唯一根元素和样式作用域。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.前言

本篇文章是曾任去哪网的高级前端工程师DellLee在慕课网发布的教学课程《Vue2.5入门》而总结的笔记。原视频地址：https://www.imooc.com/learn/980
本笔记适用于新手学习vue框架进行前端的开发。

2.基础语法

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

<!-- div是挂载点 el属性后面对应的标签-->
<div id="root">
    {{msg}}</div>
<script>
    new Vue({
        el:"#root", //挂载点id
        /*模板内容可以放在挂载点标签的内部*/
        template:"<h1>hello {{msg}}</h1>",
        data:{
            msg:"hello world"
        }
    })
</script>

2.2 如何进行绑定事件以及绑定相关属性

点击事件
绑定事件的方法在Vue中为：v-on:click=“handleClick” 简写则为@click（类似于android开发开发黄油刀框架的写法）
绑定方法写好了之后需要在Vue的实例中新建methods方法

methods:{
    handleClick:function () {
       this.content="world" //这里的this选择的是data下面的数据
    }
}

属性绑定 v-bind:title=“绑定的属性” 简写为:title
双向绑定 v-model=“content”

2.3 Vue中的计算属性和侦听器

计算属性为computed通常和监听器一起出现watch
下方代码其中firstName和lastName分别对应的是一个div标签

HTML :
    <div>{{fullName}}</div>
    <div>{{count}}</div>
 
JavaScript :
new Vue({
    el: "#root",
    data: {
        firstName: "",
        lastName: "",
        count:0
    },

    /*计算属性*/
    computed:{
        fullName:function () {
            return this.firstName+''+this.lastName
        }
    },
    /*监听器*/
    watch:{
        firstName:function () {
            this.count++;
        },
        lastName:function () {
            this.count++;
        }
    }
})

2.3 用来判断是否显示的v-if v-show

顾名思义，v-if 和v-show都是用来显示标签的，在这里主要说明一下他俩的区别：
v-show 是不清除DOM树的 v-if 是要清除的
v-if 控制DOM的存在 v-show 控制DOM的显示
（类似于android中view的INVISIBLE 和GONE）

2.4 用来循环的 v-for

v-for是用来控制一组数据，并且在for中key值不能相同的
基础的用法是
v-for="item of list"
如果想获取当前的index则：
v-for="(item,index) of list"

<div id="root">
    <div v-show="show">hello world</div>
    <button @click="handleClick">toggle</button>
    <ul>
        <li v-for="item of list" :key="item">{{item}}</li>
    </ul>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            show: true,
            list:[1,2,3,4,5,6,7,8,9]
        },
        methods:{
            handleClick:function () {
                this.show=!this.show;
            }
        }
}）

3 Vue中的组件

无论是在移动开发还是web开发，组件化的方案都为庞大的项目提供便利性，在这里vue中内置了一些组件，从视频中了解的内容也是在web开发的思维上有了一些扩展。
组件与实例的关系：每个组件都是一个Vue的实例。任何一vue项目都是由一个个实例组合而成的

3.1全局组件

HTML标签中可以直接调用
<ul>
    <todo-item></todo-item>
</ul>

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

3.2 局部组件

第一步 定义这个组件的内容
var TodoItem={
    template:'<li>item</li>'
}  需要在Vue实例中进行注册

new Vue({
    el:"#root",
    data:{
        inputValue:'',
        list:[]
    },
    第二步 在vue的实例中 引用刚刚定义的内容
    components:{
        'todo-item':TodoItem
    },
    methods:{
        handleClick:function () {
            this.list.push(this.inputValue),
            this.inputValue=""
        }
    }
})

3.3 发布订阅模式

发布订阅模式，可以使子组建向外触发事件
this.$emit('delete',this.index)通过这种方法，对父组件进行传递。
这种子组件和父组件之间的传递对于vue是一个重点也是一个难点了。

总结：
父组件向子组件传递参数 :content
子组件向父组件传递参数 this.$emit(‘delete’,this.index)

<div id="root">
    <div>
        <input v-model="inputValue"/>
        <button @click="handleClick">�ύ</button>
        <ul>
            <todo-item v-for="(item,index) of list"
                       :key="index"
            :content="item"
            :index="index"
            @delete="handleDelete">
            </todo-item>
        </ul>
    </div>
</div>
<script>
    Vue.component('todo-item',{
        props:['content','index'],
        template:'<li @click="handleClick">{{content}}</li>',
        methods:{
            handleClick:function () {
               this.$emit('delete',this.index)
            }
        }
    })

    new Vue({
        el:"#root",
        data:{
            inputValue:'',
            list:[]
        },
       /* components:{
            'todo-item':TodoItem
        },*/
        methods:{
            handleClick:function () {
                this.list.push(this.inputValue),
                this.inputValue=""
            },
            handleDelete:function (index) {
               this.list.splice(index,1)
            }
        }
    })
</script>

4.脚手架Vue-cli

目录主要结构

build 放置的是配置文件
config 开发环境线上环境的配置文件
node_modules 依赖
src源代码
static资源文件

优势
优势则是支持Es6语法，单文件组件的形式模版，逻辑，样式非常棒的组件模式。
注意事项：
template标签下只能有一个根元素
全局样式与局部样式
scoped 作用域只对当前的组件有效
如果组件使用了scoped 那么子组件依旧可以使用父组件中的样式

通过vue cli实现 todolis:

父组件
<template>
	<div>
		<div id="TodoList">
			<input class="item" v-model="inputValue" />
			<button @click="handleSubmit">提交 </button>
			<ul>
				<todo-item v-for="(item , index) of list"
				:key="index"
				:content="item"
				:index="index"
				@deletee="handleDelete"
				></todo-item>
			</ul>
		</div>
	</div>

</template>

<script>
	import HelloWorld from './components/HelloWorld.vue'
	export default {
		//用cli以后 data则变成一个函数了
		//data: 'inputValue',
		data: function() {
			return {
				inputValue: '',
				list: []
			}
		},
		components: {
			'todo-item': HelloWorld
		},
		methods: {
			handleSubmit() {
				this.list.push(this.inputValue)
				this.inputValue = ''
			},
			handleDelete(index){
				this.list.splice(index,1)
			}
		}

	}
</script>

<style scoped>
	
	.item{
		color: green;
	}
</style>

子组件：
<template>
  <li class="item" @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
 props:['content','index'],
 methods:{
	handleDelete:function(){
		this.$emit("deletee",this.index)
	}
 }
}
</script>
<style >
</style>