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>