Vue是一套用于构建用户界面的渐进式JS框架。
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="root">
<h1>Hello {{name}}</h1>//{{name}} 为vue里面的模板
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//容器与vue实例只能时一对一的关系
new Vue({
el:"#root",//通常为ucss选择器
data:{
name:"Vue"
}
})
//root已经被第一个vue接管了,因此这个vue实例是无效的
// new Vue({
// el:"#root",//通常为ucss选择器
// data:{
// name:"Vue1"
// }
// })
</script>
</body>
Vue模板语法分为2大类:
插值语法:
功能:用于解析标签体内容。
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。
举例:v-bind:href='xxx’或简写为:href=‘xxx’,xxx同样要写js表达式,且可以直接读取到data中的所有属性。
备注:Vue中有很多的指令,且形式都是:v-???。
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="root">
<h1>Hello {{name}}</h1>
<a v-bind:href="url">点我</a>//v-bind是数据单向绑定的
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//容器与vue实例只能时一对一的关系
new Vue({
el:"#root",//通常为ucss选择器
data:{
name:"Vue",
url:"https://www.baidu.com"
}
})
</script>
</body>
数据绑定分为双向数据绑定与单项数据绑定。这点与Android中的jetpack组件databinding一致。毕竟Vue也是采用了MVVM模型。
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="root">
单向数据绑定:<input type="text" v-bind:value="name"/><br/>//input组件里的内容改变不会导致vue里面的存储的数据改变
//v-model只能用于表单类元素中(输入类元素)
双向数据绑定:<input type="text" v-model:value="name"/><br/>//input组件里的内容改变会导致vue里面的存储的数据改变
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//容器与vue实例只能时一对一的关系
new Vue({
el:"#root",//通常为ucss选择器
data:{
name:"Vue",
url:"https://www.baidu.com"
}
})
</script>
</body>
const v=new Vue({
//1.第一种写法
el:"#root",//通常为ucss选择器
data:{
name:"Vue",
url:"https://www.baidu.com"
}
})
//第二种写法
v.$mount("#root")
//第一种写法:
data:{
name:"Vue",
url:"https://www.baidu.com"
}
//第二种写法:
data:function(){
console.log('@@@',this)//此处的this是Vue实例
return{
name :"hello world"
}
}
//可以简写为:
data{
console.log('@@@',this)//此处的this是Vue实例
return{
name :"hello world"
}
}
一个重要原则:由Vue管理的函数,一定不要写箭头函数,因为箭头函数是没有自己的this对象的,只能往外找(箭头函数的this对象是window),一旦写了箭头函数,函数里面的this就不再是Vue实例了。
总结:
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//容器与vue实例只能时一对一的关系
let data={
name:"Vue",
url:"https://www.baidu.com"
};
const v= new Vue({
el:"#root",//通常为ucss选择器
data
})
console.log("====v._data==data ==>"+(v._data==data)) //true
//修改_data的属性也可以修改view中的值
// v._data.name = "Hello"
</script>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//容器与vue实例只能时一对一的关系
let age =10
let data={
name:"Vue",
url:"https://www.baidu.com"
};
const v= new Vue({
el:"#root",//通常为ucss选择器
data
})
//通过 Object.defineProperty方法为对象添加属性
Object.defineProperty(data,'age',{
enumerable :true, //控制属性是否可以被枚举,默认是false
writable:true,//控制属性是否可以被修改,默认是false
configurable:true ,//控制属性是否可以被删除,默认是false
get(){
console.log("有人读取了age属性")
return age
},
set(value){
console.log("有人修改了age属性,值是",value)
age = value
}
})
console.log(Object.keys(data))
</script>
事件的基本使用:
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="root">
<button ="showInfo($event,11)">点我</button>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//容器与vue实例只能时一对一的关系
let age =10
let data={
name:"Vue",
url:"https://www.baidu.com"
};
const v= new Vue({
el:"#root",//通常为ucss选择器
data,
methods:{
showInfo(event,num){
alert('num is '+num +"event is "+event);
}
}
})
</script>
</body>
<button .stop.prevent="showInfo($event,11)">点我</button>//事件修饰符可以链式调用
回车 | enter |
删除(包括“删除”和“退格”键) | delete |
退出 | esc |
空格 | space |
换行 | tab(需要配合keydown使用) |
上 | up |
下 | down |
左 | left |
右 | right |
Vue中未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为keytab-case(短横线命名)
系统修饰键(用法特殊):ctrl、alt、shift、meta
也可以使用keycode去指定具体的按键(不推荐,有些键盘的keycode不统一)
Vue.config.keyCodes.自定义键名=键码。可以定制按键别名
<input .caps-lock ='showInfo(12)' type="text" v-bind:value="name"/><br/>
<input .tab.y ='showInfo(12)' type="text" v-model:value="name"/><br/>
<input .ctrl.y ='showInfo(12)' type="text" v-model:value="name"/><br/>//点击ctrl+y才调用showInfo方法
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="root">
单向数据绑定:<input .caps-lock ='showInfo(12)' type="text" v-bind:value="name"/><br/>
双向数据绑定:<input .ctrl.y ='showInfo(12)' type="text" v-model:value="url"/><br/>
<button ="showInfo($event,11)">点我</button>
<h1>{{fullName}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//容器与vue实例只能时一对一的关系
let age =10
let data={
name:"Vue",
url:"https://www.baidu.com"
};
const v= new Vue({
el:"#root",//通常为ucss选择器
data,
//计算属性
computed:{
//1.完整写法
fullName:{
get(){
return this.name+'-'+this.url
},
//当fullName被修改时,set方法被调用
set(value){
console.log('set',value)
const arr = value.split('-')
this.name = arr[0]
this.url = arr[1]
}
}
//2.简写方法,只有读才能够使用简写方式
fullName[:function](){//:function也是可以省略的
return this.name+'-'+this.url
}
}
})
</script>
</body>
const v= new Vue({
el:"#root",//通常为ucss选择器
data,
computed:{
fullName(){
return this.name+'-'+this.url
}
},
//第1种写法
watch:{
info:{//监视info属性
immediate:true,//初始化让handler调用一下
//handler什么时候被调用?当info发生改变时
handler(newValue,oldValue){
console.log('info被修改了',newValue,oldValue)
}
}
}
})
//第2种写法
vm.$watch('info',{
deep:true,//监视多级结构种某个属性的变化
immediate:true,//初始化让handler调用一下
//handler什么时候被调用?当info发生改变时
handler(newValue,oldValue){
console.log('info被修改了',newValue,oldValue)
}
})
computed和watch之间的区别:
vue会监视data中所有层次的数据
如何监测对象中的数据?
通过setter实现监视,且要在new Vue时就传入要监视的数据。
(1)对象中后追加的属性,Vue默认不做响应式处理
(2)如需给后添加的属性做响应式,使用如下API:Vue.set()/vm.$set()
如何监测数组中的数据?
在Vue修改数组中的某个元素一定要用如下方法:
特别注意:Vue.set和vm.$set不能给vm或vm的跟数据对象添加属性!!!
在 Vue.js 中,我们可以使用 v-bind 指令来绑定 style 样式和 class 样式。主要有两种方式绑定 class 和 style,分别是对象语法和数组语法。以下是两种方式的使用:
在需要绑定 style,类名时可以使用 v-bind 绑定一个对象,对象中的 key 就是需要添加的样式名或类名,value 则是这个样式是否需要添加。
绑定class样式:
<div v-bind:class="{ active: isActive }">div>
在上面的代码中,只有在isActive为true时,才会给这个div添加一个名为active的类。
绑定style样式:
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">div>
在这里,activeColor和fontSize是定义在Vue实例或组件选项中的数据。
另一种方式就是将一个包含样式名或类名的数组 bind 到 class 或者 style。不管数组元素的个数是多少,数组元素可以是字符串或对象。
绑定class样式:
<div v-bind:class="[activeClass, errorClass]">div>
在这个例子中,activeClass和errorClass都应该是之前已经定义过的数据属性。
绑定style样式:
<div v-bind:style="[baseStyles, overridingStyles]">div>
在这个例子中,baseStyles和overridingStyles都是之前定义过的样式对象。
<template v-if="true">
<h1>Hello</h1>
<h2>sdsdsd</h2>
</template>
v-show
备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获取到
<!DOCTYPE html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>
<body>
<div id="root">
<h3>{{time|timeFormation('YYYY_MM_DD')|mySlice}}</h3>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
//全局过滤器
Vue.filter('mySlice',function(value){
return value.slice(0,4)
})
let age =10
let data={
name:"Vue",
url:"https://www.baidu.com",
time:1621685748334
};
const v= new Vue({
el:"#root",//通常为ucss选择器
data,
//局部过滤器
filters:{
timeFormation(value,str='YYYY年MM月DD日 HH:mm:ss'){
return dayjs(value).format(str)
},
mySlice(value){
return value.slice(0,4)
}
}
})
vm.$watch('info',{
immediate:true,//初始化让handler调用一下
//handler什么时候被调用?当info发生改变时
handler(newValue,oldValue){
console.log('info被修改了',newValue,oldValue)
}
})
</script>
</body>
在 Vue 中,除了内置指令 (v-model, v-show, v-else 等) 外,也可以自定义指令。自定义指令的语法和使用方式如下:
1.全局自定义指令:
Vue.directive('directiveName', {
bind: function (el, binding, vnode, oldVnode) {
// 这里写你的代码,比如操作 DOM
},
// 同样,你可以提供其他的钩子函数,如 inserted, update, componentUpdated, unbind 等
});
// 使用时,在元素上添加 v-directiveName
2.局部自定义指令 (在某个 Vue 实例或组件中定义):
new Vue({
el: '#app',
directives: {
'directiveName': {
bind: function (el, binding, vnode, oldVnode) {
// 这里写你的代码,比如操作 DOM
},
// 同样,你可以提供其他的钩子函数,如 inserted, update, componentUpdated, unbind 等
}
}
});
自定义指令提供了几个钩子函数如 bind、inserted、update、componentUpdated 和 unbind,它们的意义如下:
这些钩子函数的参数如下:
虚拟dom中key的作用:
key是虚拟dom对象的标识,当数据发生变化时 Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较。
对比规则:
用index作为key可能会引发的问题:
并发中如何选择key?