目录
(一)Vue简介
(1)Vue的特点
(1) 采用组件化模式,提高代码复用率,让代码更好维护
一个vue文件就是一个组件
(2)声明式编码,让编码人员无需直接操作DOM,提高开发效率
(3)使用虚拟DOM+diff算法,尽量复用DOM节点
虚拟dom对于时刻变化的数据才有意义。
使用优秀的diff算法,可以感知页面数据的变化,避免每次都更新真实dom。
(2)Vue开发环境
(3)引入
src:本地资源引入和在线资源引入
可以通过CDN加速在线资源引入的速度
(4)Vue实例的创建
(1)需要vue工作,就需要创建一个vue实例,然后传入一个配置对象
el和data是两个配置对象
(2)root容器中的代码仍然复合html规范,只不过混入了一些特殊的vue语法
(3)root容器中的代码成为【vue模板】
(4)vue实例和容器是一一对应的
(5)真实开发中只有一个Vue实例,并且会配合着各个组件一起使用
(6){{}}中要写js表达式,且可以自动读取到data中的所有属性
(7)一旦data中的数据发生改变,页面中用到该数据的部分会自动更新
js代码和js表达式的区别:
表达式:一个表达式会生成一个值,可以放在任何一个需要的地方 a/a+b/demo(2)
js代码:语句 if() for(){}
(二)模板语法
(1)插值语法
{{}} :把指定的值放在指定的位置
(2)指令语法
功能:用于解析标签,vue可以将双引号中的语句解析为js表达式
//href是普通的属性
<a href="url"></a>
//有了v-bind,vue会把双引号中的表达式当做js表达式执行
//将url执行的结果,绑定给href
<a v-bind:href="url"></a>
(三)数据绑定
(1)单向数据绑定
v-bind
- 数据只能从data流向页面
//简写形式
:value=“name”
(2)双向数据绑定
v-model
- 数据不仅能从data流向页面,还可以从页面流向data
- 只能运用在表单类元素上(输入类)例如input、select等
//简写形式
v-model=“name”
(四)el和data的两种写法
(1)el
写法一:
//写在Vue对象中
new Vue({
el:'#root'
})
写法二:
//挂载到生命周期函数中
const v= new Vue({})
v.$mount('#root')
写法二更加灵活,例如想要在页面打开后过一段时间再挂载
setTimeout(()=>{
v.$mount('root')
},1000
)
(2)data
对象式:
new Vue({
//元素 一个id选择器 对应上面的id=root,用于指定当前vue实例为哪个容器服务,值通常为css选择器
el:'#root' ,
//数据,是一个对象,{}包裹的都是对象,用于指定容器去使用
data:{
name:'vue'
}
})
函数式:
data:function(){
return{
name:'a'
}
}
(五)MVVM模型
- m:模型(model)是data中的数据
- v:视图(view)是模板代码
- vm:视图模型(Viewmodel)Vue实例
- data中的所有属性,最终都出现在了vm身上
- vm身上所有属性以及vue原型上的所有属性,在vue中都可以直接使用
这里写目录标题
(六)Object.defineProperty
可以对追加属性进行高级的配置。
<body>
<script type="text/javascript">
let person = {
name:'张三',
sex:'男'
}
Object.defineProperty(person,'age',{
value:18
})
console.log(person);
</script>
</body>
- 枚举
enumerable:true - 修改
writable:true - 删除
configure:true
(1)get函数
当读取传入给defineproperty中传入的属性时,get函数(getter)就会被调用,且返回值就是该属性的值
get:function(){
return number
//此时number和age双向绑定,改变任意一个值都会使另一个同时发生变化
}
(2)set函数
当修改这个属性时,set函数(setter)就会被调用,且收到具体值
set:function(){
number = value
//此时number和age双向绑定,改变任意一个值都会使另一个同时发生变化
}
(七)数据代理
通过一个对象代理对另一个对象属性的操作(读写)
let obj = {x = 100}
let obj2 = {y = 200}
Object.defineProperty(obj2,"x",{
get(){
return obj.x
}
set(value){
obj.x = value
}}
)
(八)事件相关
vue实例中的配置名:methods
const vm = new Vue({
//元素 一个id选择器 对应上面的id=root,用于指定当前vue实例为哪个容器服务,值通常为css选择器
el:'#root' ,
//数据,是一个对象,{}包裹的都是对象,用于指定容器去使用
data:{
name:'vue',
}
//事件处理配置项
methods:{
showInfo( ){
alart('')
}
}
})
(1)事件修饰符
- prevent:阻止默认事件
- stop:阻止事件冒泡
事件冒泡:当子元素(事件源)事件触发,事件会沿着包含关系,依次往上级传递,每一级都可以感知到事件,直到触发根元素(根源)
- once:事件只触发一次
- capture:使用事件捕获模式
- self:只有event.target是当前操作的元素是才触发事件
- passive:事件默认行为立即执行,无需等待事件回调进行完毕
(2)键盘事件
<div id="root">
<h2>我的名字叫{{name}}</h2>
<input type="text" placeholder="按下回车输出" @keyup.enter="showInfo">
<input type="text" placeholder="按下回车输出" @keyup.13="showInfo">
<input type="text" placeholder="按下回车输出" @keyup.huiche="showInfo">
<input type="text" placeholder="按下删除或退格输出" @keyup.delete="showInfo">
<input type="text" placeholder="按下切换大小写输出" @keyup.caps-lock="showInfo">
</div>
<script>
Vue.config.keyCodes.huiche = 13; //定义一个别名为huiche的enter按键
const vm = new Vue({
el: '#root',
data: {
name: 'zzy',
age: 18
},
methods: {
showInfo(e) {
// if (e.keyCode !== 13) return //原生js实现按下回车输出值
console.log(e.target.value);
}
}
})
</script>
- vue常见的按键别名:
按键 | 别名 |
---|---|
回车 | enter |
删除 | delete |
退出 | esc |
空格 | space |
换行 | tab |
上、下、左、右 | up down left right |
- Vue未提供别名的按键,可以使用原始的key值去绑定,但注意要转为kebab-case
- 系统修饰键:ctrl、alt、shift、meta(start)
(1)配合keyup使用:按下其他键,随后释放其他键,事件才会被触发。
(2)配合keydown使用:正常触发事件。
- 也可以使用keycode去指定具体的按键
- Vue.config.keyCodes.自定义键名 = 键码,可以定制按键别名
补充细节
- 修饰符可以连续写
<button @click.stop.prevent="showInfo">你好</button>
- 如果先让两个键同时按下才触发,键名也可以连续绑定
比如按下ctrl+y触发showInfo方法
<input type="text" @keyup.ctrl.y="showInfo">