文章目录
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>
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
