1,vue脚手架 npm i -g @vue/cli
2,安装vue vue create demo -m npm
3,运行 npm run serve
4,<template></template>存放内容,必须有,不然报错,其中只可以有一个根标签
5,<script></script> 存放js业务代码的
6,<style></style>存放css样式的
7,内容渲染: v-text/v-html
v-text相当于innerText
v-html相当于innerHTML 会渲染内容中的标签
两者都会覆盖原有内容
插值表达式 {{}}:内容渲染指令,里面填写数据,不会覆盖原有内容
可以放数据项,可以放三元表达式,对象.属性
注意:标签内的属性值不能使用{{}}插值语法,之内放在双标签中间使用
8,属性绑定指令--动态设置属性--v-bind可以省略成 :冒号
9,事件绑定指令--v-on 可以省略成 @
其中可以放 程序代码/事件函数名/事件函数名(传参)
注意:如果传递了参数,则实参$event表示事件对象
10,指令修饰符
.prevent 阻止事件默认行为
.stop 阻止冒泡
.prevent.stop阻止默认行为+阻止冒泡
.enter 键盘事件,表示按下enter键才出发
.once表示事件指触发一次
11,双向绑定 --v-model--原理:input+v-bind
含义:数据改变之后页面改变,页面呈现结果更新,数据也更新
11.B,双向绑定指令符
.number 自动将用户输入的值转换为数值类型
.trim 去除输入字符串前后空格字符
.lazy 焦点事件
12,表单项
单个复选框,通过布尔值控制是否选中,对应则选中
多个复选框,通过[value,value]中的值对应的项来判断是否选中
13,条件判断指令 v-show // v-if
相同:都是通过布尔值判断DOM元素的显示与隐藏
不同:
v-show通过display:none来隐藏元素
v-if是通过移出元素,来隐藏元素
使用场景:
需要频繁切换的时候使用v-show.
根据条件判断显示组件模块的时候使用v-if,配合v-else-if + v-else来使用
14,循环渲染指令--v-for-基于一个数组来循环渲染一个列表结构
<li v-for="item,index in List" :key='item.id'>
item表示数组中的每一项,index表示每一项的下标,index不用可以省略
必须带有key,否则警告,并且key必须是数组每一项的唯一的值,且不推荐使用index,一般后台都有id
15,虚拟DOM
虚拟DOM就是一个用来描述真实DOM结构对象,存在内存中,Vue可以根据虚拟DOM来构建页面,当数据更新之后,vue会根据新旧虚拟DOM比较,然后向旧的虚拟DOM上查缺补漏,以快速更新DOM
16,diff算法:就是新旧虚拟DOM对比的算法，用于检查新旧DOM的差异，并更新旧的虚拟DOM。
17,为什么for循环当中的 :key 要使用唯一值,而不是index?
因为遍历的是数组,如果使用下标的话,列表发生变化时,会影响其他元素的index,会误导diff算法重现渲染List,浪费性能
18,computed 计算属性
(1),语法:
与data平级
data(){....}
computed:{
jisuanA:{
return this.xing+ ' ' +this.ming
},
jisuanB:{....}
}
计算属性得写方法,按照函数的格式写,因为使用它的位置必须将其视为属性
必须return一个值
(2),缓存特点
计算属性对应的函数并不会触发多次,只会计算一次,并且将计算的值缓存起来
当计算属性再次计算属性时就会从缓存中的值直接使用,而不是再次调用函数重新计算
(3)get()和set()方法
computed:{
jiasuanA:{
get(){} //在get方法中正常计算
set( value ){
log(value)
} //在set方法中修改计算属性值,value就是修改之后的值
}
}19.侦听器 wacth 侦听data和props中的数据变化
触发条件:当监听的数据发生变化的时候触发
位置:要写在watch中,与data,methods平级
data(){...},
wacth:{
(1), //------------函数写法----------------
data数据项 ( 新值 , 旧值 ){...}
uname(newV,lodV ){....}
(2), //-------------对象写法---------------
data数据项:{
handler ( 新值 , 旧值 ){....}
handler (newV,lodV){}
immediate: true, // 可选
deep: true // 可选
}
}(3), 使用侦听器的例子
在注册账号的时候,判断用户输入的账号是非已经被注册
逻辑:
1,用户在输入框中输入
2,通过侦听器监听获取输入框中的数据
3,将侦听到的值发送到服务器,等到服务器验证之后返回的结果
4,渲染结果
watch:{
async username(newV,oldV){
if (newVal === '') return (this.msg = '')
const result = await axios.get('url' + newVal)
this.msg = result.data.message
}
}(4), immediate初始监听 -- 初次加载页面的时立即开启监听属性
(5), deep深度监听 -- 如果侦听的是一个对象,那么对象中的属性值发生变化的时候无法被侦听到
deep: true // 表示深度侦听，当对象的任意属性改变后，都会触发该侦听器
(6),在实际开发中,可以单独监听一些对象的属性
watch:{
'对象.属性'(新值){...}
'user.name'(val){...}
}20.组件
(1),组件命名格式:大驼峰,小驼峰,多词格式--不合格的命名可以用name来解决问题
(2),注册局部组件
1,在components中注册子组件
2,在父组件中import引入组件,同样路径下的组件可以放在 {} 中
3,在父组件的component:{}中注册
4,在父组件中的template 中 使用
(3),注册全局组件--注册成全局组件之后可以在任意位置调用
1,在main.js中引入组件
2,然后通过 vue.component('组件名',导入的组件)
3,在需要调用的任意位置调用
21.组件传值--父传子
1,父组件中,传输data中的数据
2,父组件中,引入子组件,在子组件标签中使用冒号传输 : 变量名=' 变量名 '
3,子组件中,接收父组件传输过来的数据,使用prop: props:[ ' 变量名A ', ' 变量名B ' ..... ]
4,子组件中直接引用变量名
