文章目录
Vue基础
1-1 vue概念
一套用于**构建用户界面(数据驱动界面)的渐进式(自底向上逐层的应用)**javaScript框架
Vue可以自底向上逐层的应用
- 简单应用:只需一个轻量小巧的核心库
- 复杂应用: 可以引入各式各样的Vue插件
1-1-1 初识
-
-
采用组件化模式,提高代码复用率,且让代码更好维护
-
声明式编码,编码人员不需直接操作DOM,提高开发效率
-
使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
-
-
对比原生和vue实现虚拟DOM
- vue: Diff算法
-
- ES6语法规范
- 包管理器
- 原型、原型链
- 数组常用方法
- axios
- promise
-
<!-- 准备好一个容器 --> <!-- root容器理的代码被称为【Vue模板】 --> <div id="root"> <h1>Hello{{name}}。{{Date.now()}}</h1> </div> <script> Vue.config.productionTip = false // 组织vue在启动时生成 生产提示 // 创建Vue实例 const x = new Vue({ el: '#root', // el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串 data: { // data用于存储数据,数据供el所绑定的容器去使用 name: 'aaa' } }) // axios({ // url: 'http://localhost:8080' // }) </script>
-
- Vue实例和容器是一一对应的
- 只有一个Vue实例,并且会配合着组件一起使用
- {{xxx}}中的 xxx要写js表达式,且xxx可以读取到data中的所有属性
- js表达式 :
- a
- a+b
- demo(1)
- x==y?‘a’:‘b’
- js代码
- if(){}
- for(){}
- js表达式 :
- 一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新
1-1-2 模板语法
-
插值语法: {{}}
- XXXXXXXXXX
<a href="{{url}}"></a>
XXXXXXXXXXXX
- XXXXXXXXXX
-
指令语法【用于解析标签(标签属性、标签体内容、绑定事件…)】:
<a :href="url">点我去aaa学习</a>
- v-bind动态绑定值
-
- 插值语法: 用于解析标签体内容
- 指令语法: 解析标签
1-1-3 单双向数据绑定
-
<div id="root"> 单向数据绑定:<input type="text" v-bind:value="name"><br/> 双向数据绑定: <input type="text" v-model:value="name"> </div> <script> Vue.config.productionTip = false // 组织vue在启动时生成 生产提示 // 创建Vue实例 const x = new Vue({ el: '#root', // el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串 data: { // data用于存储数据,数据供el所绑定的容器去使用 name: 'aaa' } }) </script>
-
v-model只能应用在表单类元素(输入类元素)上-----> name
-
-
单项绑定: 数据只能从data流向页面
-
双线绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data
-
双向绑定一般都应用在表单类元素上(input、select)
-
v-model:value可以简写为v-model,因为v-model默认收集的就是value值
-
单项数据绑定:<input type="text" :value="name"><br/> 双项数据绑定:<input type="text" v-model="name"><br/>
-
-
1-1-4 el和data的两种写法
-
Vue管理的函数,不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了
-
el的两种写法
<div id="root"> <h1>你好{{name}}</h1> </div> </body> <script> Vue.config.productionTip = false // 阻止vue在启动时生成生产提示 const v = new Vue({ // el: '#root', data: { name: 'aaa' } }) console.log(v); v.$mount('#root') setTimeout(() => { v.$mount('#root') }, 1000) </script>
-
data的两种写法:
const v = new Vue({ el: '#root', // data的第一种写法: 对象式 data: { name: 'aaa', address: '北京', a: 1 } // data的第二种写法: 函数式 data: function() { console.log(this); return { name: 'aaa' } } })
1-1-5 MVVM模型
-
-
M:模型(Model):对应data中的数据
-
V:视图(View):模板
-
VM:视图模型(ViewModel):Vue实例对象
- 数据绑定
- DOM监听
-
-
- data中所有属性,最后都出现在vm身上
- vm身上所有属性,及Vue原型上所有属性,在Vue模板中都可以直接使用
1-2 数据代理–双向数据绑定
1-2-1 Object.defineProperty方法
-
<script type="text/javascript"> let number = 19 let person = { name: '张三', sex: '男', age: number } Object.defineProperty(person, 'age', { // value: 18, // enumerble: true, // 控制属性是否可以枚举,默认值是false // writable: true, // 控制属性是否可以被修改,默认值是false // configurable: true, // 控制属性是否可以被删除,默认false // 当有人读取person的age属性时,get函数(getter)会被调用,且返回值就是age的值 get: function() { console.log('有人读取age属性了'); return number }, //当有人修改person的age属性时,set函数(setter)就会被调用,且返回值就是age的值,且会收到修改的具体值 set(value) { console.log('有人修改了age属性,且值是:', value); number = value } }) console.log(person); </script>
1-2-2 数据代理概念
-
通过一个对象代理对另一个对象中属性的操作(读/写)
<body> <!-- 数据代理: 通过一个对象代理对另一个对象中属性的操作:读/写 --> <script> let obj = { x: 100 } let obj2 = { y: 200 } Object.defineProperty(obj2, 'x', { get() { return obj.x }, set(value) { obj.x = value } }) </script> </body>
1-2-3 Vue中的数据代理
vm._data = options.data = data
- new一个实例的时候 :传递的是一个配置对象
- 数据代理图示
-
Vue中的数据代理:
- 通过vm对象来代理data对象中属性的操作(读/写)
- 好处: 方便操作data中的数据
- 如果没有数据代理
<h2>学校名称: {{_data.name}}</h2>
-
基本原理: 通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个添加到vm上的属性,都指定一个getter/setter
- 在getter/setter内部去操作(读/写)data中对应的属性
1-3 事件处理
1-3-1 事件处理
-
所有被vue管理的函数最好写成普通函数,否则this就不是vm了
-
@click = "demo($event)"
可以传参 -
事件的基本使用:
1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;
2.事件的回调需要配置在methods对象中,最终会在vm上;
3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;
4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;
5.@click=“demo” 和 @click=“demo($event)” 效果一致,但后者可以传参;
1-3-2 事件修饰符
只有配置在data中的对象才会数据劫持+代理
1-3-2-1 阻止事件的默认行为
-
<!-- 准备好一个容器 --> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <a href="" @click.prevent="showInfo">点我提示信息</a> </div> <script type="text/javascript"> new Vue({ el: '#root', data: { name: 'aaa' }, methods: { showInfo(e) { e.preventDefault(); alert('同学你好') } } }) </script>
-
@click.prevent = "showInfo()"
e.preventDefault()
1-3-2-2 事件修饰符
-
- prevent: 阻止默认事件(常用)
- e.preventDefault()
- stop: 阻止事件冒泡
- e.stopPropagation()
- once: 事件只触发一次
- capture: 使用事件的捕获模式
- self : 只有event.target是当前操作的元素是才触发事件
- 阻止冒泡
- passive : 事件的默认行为立即执行,无需等待事件回调执行完毕
- 移动端
- prevent: 阻止默认事件(常用)
-
<!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="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <style> .box1 { height: 400px; width: 300px; background-color: red; } .box2 { height: 100px; width: 200px; background-color: blue; } </style> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- 阻止默认事件() --> <a href="" @click.prevent="showInfo">点我提示信息</a> <!-- 阻止事件冒泡 --> <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息2</button> </div> <!-- 事件只触发一次 --> <button @click.once="showInfo">事件之触发一次</button> <!-- 事件的捕获信息 --> <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件 --> <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息2</button> </div> </div> <script type="text/javascript"> new Vue({ el: '#root', data: { name: 'aaa' }, methods: { showInfo(e) { e.preventDefault(); // 阻止默认事件 e.stopPropagation(); // 阻止冒泡 alert('同学你好') }, showMsg(msg) { console.log(msg); } } }) </script> </body> </html>
1-3-3 键盘事件
-
Vue中常用的按键别名:
- 回车:enter
- 删除:delete(捕获“删除”和“退格”键)
- 退出: esc
- 空格: space
- 上: up
- 下: down
- 左: left
- 右: right
-
Vue未提供别名的按键,使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
@keyup.caps-lock = "showInfo"
-
系统修饰键: ctrl/alt/shift/meta
- 配合keyup使用: 按下修饰键的同时,再按下其他键,随后释放其他键,时间才被触发
- 配合keydown使用:正常触发事件
-
<div id="root"> <h2>欢迎来到{{name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 Vue.config.keyCodes.huiche = 13 //定义了一个别名按键 new Vue({ el: '#root', data: { name: 'aaa' }, methods: { showInfo(e) { // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </script>