vue学习总结
引进库文件：三种方式引入
-
CDN方法导入（国内） <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
-
unpkg方式导入 <script src="https://unpkg.com/vue@next"></script>
-
离线本地导入js库文件（要注意自己的路径名称） <script src="../../js/Vue.js"></scrip
简单实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
{{mess}}
<h2>
{{mess}}
</h2>
</div>
<script>
new new Vue({
el: '#app',
data() {
return {
mess: 'demo123'
}
},
methods: {
}
})
</script>
</body>
</html>
简单解释
el:通过id选择器绑定DOM，在vue中，只需要el中对DOM的id进行挂载，也相当于一个钩子，el通过id的特征勾住了id所在标签内的所有
内容，这样我们就可以实现在vue中实现对DOM中的操作
el: 通过id选择器绑定DOM，在Vue中，只需要对DOM的id进行挂载，也相当于一个钩子，el通过id的特征勾住了id所在标签内的所有内容，这样我们就可以实现在vue中对DOM的操作。
data: 这里的data是声明我们要使用的数据，这里有利于我们后面的维护
methods: 这里面包含的是我们对整个页面的逻辑以及页面中的触发事件
模板语法
- 插值语法:
- 功能:用于解析标签体内容
- 写法：{{xxx}},xxx是js表达式，是可以直接读取到data中所有的数据属性
- 指令语法：
- 功能:用于解析标签，如
- 举例:v-bing：href="xxx"或简写:href=“xxx”,xxx同样要写js表达式，且可以直接读取到data中所有的属性
数据绑定
- 单向绑定(v-bind):数据只能从data流向页面
- 双向绑定(v-modl):数据不仅能 从data流向页面，还可以从页面流向data
- 注意：双向绑定一般都应用在表单类的元素上，如input,select等等
el的两种写法
-
写法一： 在new Vue的时候配置el属性 <script type="text/javascript">
new Vue({
el:"#app",
data() {
return {
name: '李明'
}
},
})
</script>
-
写法二： 先创建vue实例，然后通过mount方法绑定 <script type="text/javascript">
const vm=new Vue({
data() {
return {
name: '李明'
}
},
})
vm..$mount('#app')
</script>
data属性的两种写法
- 对象式： data:{ 属性名：属性，… }
- 函数式：data(){ return { 属性名：属性，… } }
MVVM模型
- M：即模型model，表示data中的数据
- V: 即视图view，表示模板代码
- VM：即视图模型viewModel,表示Vue实例
备注：data中所有的属性，最后都会出现在vm身上，在vue模板中可以直接使用。
Object.defineproperity
给对象追加属性，相关配置属性如下：
- value:给属性设置值
- enumerable：设置属性是否可以枚举，默认false,不可以枚举的属性在遍历中看不到
- writable:设置属性是否可以被修改，默认为false
- configurable:设置属性是否可以被删除，默认是false
- get函数：当该属性被读取时，get函数就会被调用，返回值为value的值
- Set函数：当该属性被修改的时候，Set函数就会被调用，可以收到被修改的具体值。
什么是数据代理？
通过一个对象代理对另一个对象中属性的操作，举例：
<script type="text/javascript" >
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x = value
}
})
</script>
vue中数据代理
- 概念：通过vm对象来代理data来代理对象中属性的操作
- 好处：更加方便的操作data中的数据
- 原理：通过Object.defineProperty()把data对象中的所有属性都添加vm上；并为每一个添加到vm的属性都指定一个getter和setter方法
- 在getter和setter的内部去操作data中对应的属性。
事件的基本使用
- 使用V-on:事件名或@事件名绑定事件；
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中配置的函数，不要用箭头函数，一旦用了箭头函数，那么this的指向就不是vm了，而是window
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或者组件的实例对象。
- 注意:@click="demo"和@click="demo($event)"效果一致，但是后者可以传递参数。
事件修饰符
- prevent:阻止默认事件
- stop：阻止事件冒泡
- once:让事件只触发一次
- capture:使用事件的捕获形式
- self:只有event.target是当前操作的元素才触发事件
- passsive:事件的默认行为是立即执行，无需等待事件的回调执行完毕.
自定义快捷键
Vue.config.keyCodes.自定义键名=键码，可以订制按键别名
系统修饰键
有ctrl,shift,alt,win
- 配合keyup使用，按下修饰键的同时，在按下其他键，随后释放其他键，事件才能出发
- 配合keydown使用，正常触发事件
计算属性
- 定义：要使用的属性不在，要通过已有的属性计算得来
- 原理：底层借助了object.defineproperty()方法提供的get方法和set方法
- set方法执行时机：
- 初次读取时执行一次
- 当依赖的数据发生改变时会再次调用
- 优势：与methods实现相比，内存有缓存机制，表现出效率效率更高，调试方便
- 注意：计算属性最终会出现在vm上，直接读取使用即可；如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时所依赖的数据改变。
监视属性
-
当被监视的属性变化时，回调函数会自动调用，进行相关的操作 -
监视属性必须存在，才能进行配置 -
监视的写法：
- 写法1：在new vue时传入Watch配置
- 写法2：通过$watch监视
-
举栗子： const vm=new Vue({
el:'#app',
data() {
return {
name:''
,age:''
}
},
watch: {
name:{
immediate:true,
handler(newVal,oldVal){
console.log('name属性值被修改了'+oldVal+'=>'+newVal)
}
}
},
})
vm.$watch('age',(newVal,oldVal)=>{
console.log('hello')
console.log(oldVal+'=>'+newVal)
})
补充：computer和watch之间的区别
- computer能完成的功能，watch都可以完成
- watch能完成的功能，computer不一定能完成，列如：watch可以进行异步操作。
- 注意：箭头函数中this指的是window，而不是vm实例，故所被vue管理的函数最好写成普通函数式，这样this.的指向才是vm或者实例对象。
样式绑定
-
class样式
- 写法：class=“xxx” xxx可以是字符串，数组或者对象
- 注意：
- ? 字符串适用于类名不确定，要动态获取
- ? 数组写法适用于要绑定多个样式，个数确定，名字确定的情况
- ? 对象写法适用于要绑定多个样式，个数不确定
-
style样式
-
写法
：style="{样式}",样式是动态值
-
style="[a,b]"，其中的a,b是样式对象
举栗子： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式绑定练习</title>
<script src="../../js/vue.js"></script>
<style>
.s1{
color: rgb(236, 173, 37);
}
.s2{
background-color: red;
}
.s3{
font-size: larger;
}
</style>
</head>
<body>
<div id="app">
<h2 :class='style1'>{{name}}</h2>
<h2 :class='style2'>{{name}}</h2>
<h2 :class='style3'>{{name}}</h2>
<h2 :style='style4'>{{name}}</h2>
</div>
<script>
new Vue({
el:'#app',
data() {
return {
name:'liming',
style1:'s1',
style2:['s1','s2','s3'],
style3:{
s1:true,
s2:false,
s3:true
},
style4:{
color:'blue'
}
}
},
})
</script>
</body>
</html>
后续更新。。。。。。。。。。。。。
|