本文是Vue.js的入门教程，涵盖了创建项目、组件创建与使用、Vue指令、事件绑定、数据响应式等内容，旨在帮助初学者掌握Vue的基本操作。重点讲解了如何使用Vue CLI创建项目，组件的三部分组成（template、script、style），以及常用的Vue指令如v-if、v-bind、v-on等。此外，还介绍了事件修饰符、Vue中key属性的作用、数组和对象的更新检测、Class与Style绑定、表单输入绑定、计算属性和侦听器等功能。
1，创建vue项目
1.1，安装：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
检查版本
vue --version
升级
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
1.2，创建项目
创建一个新项目
vue create hello-world
选择下面三个
2、
2.1、组成-三部分
- template 视图标签 （template标签不会被渲染 只是包裹作用）必写
- script 逻辑代码
- style 样式 >
2.2，创建组件
- xxx.vue 后缀 .vue 结尾
- 三部分组件
2.3，组件使用
<script>
// 1.引入组件
import Banner from './components/Banner.vue'
export default {
name: 'App',
// 2.注册组件
components: {
Banner,
}
}
</script>
<template>
<div id="app">
<h1>APP中的h1标签</h1>
<!-- 3.使用组件 -->
<Banner></Banner>
</div>
</template>
3、Vue指令
3.1声明式渲染 -表达式
1、作用：获取vue数据 显示视图
2、语法：{ { js表达式 }}
总结
1.创建vue项目：vue create 项目名称
2.vue常用指令
2.1 v-html=’ ’ 插入HTML元素，渲染元素内容
2.2 v-text=’ ’ 渲染元素内容
2.3 { { }} 模板语法 数据绑定
2.4 v-if=’ 表达式 ’ 是否显示
2.5 v-else-if=’ ’
2.6 v-else
2.7 v-show=’ 表达式 ’ 是否显示
2.8 v-bind : 属性=’ ’ 绑定属性 v-bind : class=’ ’ v-bind : key=’ ’ 简写：:key=’ ’
2.9 v-on: 事件名称=’ 函数名 ’ 绑定事件 简写：@时间名=’ 函数名 ’
2.10 v-for=’ （item,index） in arr ’ 遍历数组和对象
3、Vue绑定事件 this指向 事件对象获取
3.1语法
<div v-on:click='demo'></div>
3.2、this指向当前对象
3.3、事件对象获取
1、无参数传递：第一个参数就是event
2、有参数传递：需要手动传递事件对象
<div v-on:click='demo(1,2,$event)'></div>
Vue事件
1、绑定事件：
<div v-on:事件名='函数名'></div>
2、实现方法：
methods:{
函数名(){
}
}
3、事件对象 event
1、无参数传递：第一个参数就是event
2、有参数传递：需要手动传递事件对象
<div v-on:click='demo(1,2,$event)'></div>
4、事件修饰符
.stop*.prevent*.capture.self.once.passive
<template>
<div>
<p @click="parent">
这是父标签
<button @click.stop="child">这是子标签</button>
</p>
<!-- 提交事件不再重载页面 -->
<!-- <form v-on:submit.prevent="onSubmit"></form> -->
<!-- 修饰符可以串联 -->
<!-- <a v-on:click.stop.prevent="doThat"></a> -->
<input type="text" v-on:keyup.enter='getInput'>
</div>
</template>
<script>
export default {
methods:{
child(){
console.log('子元素事件');
},
parent(){
console.log('父元素事件');
},
getInput(){
console.log('按了回车');
}
}
}
</script>
<style>
</style>
5、按键修饰符
.enter*.tab*.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
<template>
<div>
<input type="text" v-on:keyup.enter='getInput'>
</div>
</template>
<script>
export default {
methods:{
getInput(){
console.log('按了回车');
}
}
}
</script>
<style>
</style>
6、系统修饰符
.ctrl*.alt.shift.meta
<template>
<div>
<textarea @keyup.ctrl.enter="send" id="" cols="30" rows="10"></textarea>
<button @click="send">send</button>
</div>
</template>
<script>
export default {
methods:{
send(){
console.log('发送了信息');
}
}
}
</script>
<style>
</style>
7、鼠标按钮修饰符
.left.right.middle
Vue中key属性的作用：
1、作用：主要是为了高效的更新虚拟DOM
2、使用 diff 算法
<template>
<div>
<ul>
<li v-for="item in arr" :key='item'> {
{
item }} </li>
</ul>
<button @click="addF">点击插入元素F</button>
</div>
</template>
<script>
export default {
date(){
return{
arr:['A','B','C','D','E']
}
},
methods:{
addF(){
this.arr.splice(2,0,'F')
}
}
}
</script>
<style>
</style>
数组更新检测
1.说明：
在列表渲染中，如果遍历是数组，当数组数据发生改变时，页面什么时候能自动更新（页面重新渲染）
2.实现数组视图同步更新
1.变更方法（修改了原数组）
- push（）
- pop（）
- shift（）
- unshift（）
- splice（）
- sort（）
- reverse（)
2.替换数组（修改后返回新的数组原数据不修改视图想同步更新覆盖原数组）
filter（）、concat（）和slice（）
对象更新检测
1、说明：对象修改后 视图同步更新视图 – 内存：栈内存 堆内存
2、实现对象视图更新
Vue.set( target, propertyName/index, value )
参数：
{Object | Array} target
{string | number} propertyName/index
{any} value
返回值：设置的值
用法：
想响应式对象中添加一个 property（属性），并确保这个property同样是响应的，且触发视图更新。他必须用于向响应式对象上添加新 property，因为 Vue 无法探测到普通的新增 property （例：this.myObj.newProperty = 'hi'）
<template>
<div>
<h2>对象同步更新</h2>
<p>对象obj：{
{
obj }}</p>
<button @click="changeUname">修改对象已存在的属性</button>
<button @click=" obj = {user:'admin'}">修改整个obj</button>
<button @click="add">修改对象中不存在的属性</button>
</div>
</template>
<script>
import Vue from 'vue'
export default {
data(){
return {
obj:{
uname:'周以',
age:21
}
}
},
methods:{
changeUname(){
this.obj.uname = '刘洲'
},
add(){
// this.obj.love='男和女',
// console.log('obj',this.obj);
//方法一：...
// this.obj = {...this.obj};
//方法二：es6 合并对象 Object.assgin({},{},{})
// this.obj = Object.assign({},this.obj);
//方法三。vue官网解决方法：
//想响应式对象中添加一个 property（属性），并确保这个property同样是响应的，且触发视图更新。
// this.$set(this.obj,'love','boy & girl');
//Vue.set(this.obj,'love','boy & girl');
//删除 同步试图 删除对象的property。如果对象是响应式的，确保删除能触发更新视图
Vue.delete(this.obj,'age')
}
}
}
</script>
<style>
</style>
Class 与 Style 绑定
1、介绍：动态的提娜佳class或者是style样式
2、绑定 HTMlL Class
-
直接绑定变量
<div v-bind:class="变量"></div> -
对象语法（推荐使用）
<div v-bind:class="{类名：表达式-true显示类名、false隐藏，....}"></div>
最低0.47元/天 解锁文章
3627
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
