一,Vue核心
1.1 vue简介
- 采用组件化,提高代码复用率
- 声名式编码,无需操作DOM提高开发效率
- 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
原本是新增的东西一股脑的覆盖,现在是有个虚拟的DOM原本有的就给保留,然后插入新的东西
初识Vue:
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
1.2初识vue
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象;
2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5,真实开发中只有一个Vue实例并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性;(如果data里面的数据是字符串就可以在大括号里面使用字符串的属性)
7.一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新;
[!danger]
一个容器只能对应一个Vue实例
{{}}里面包裹的必须是js表达式
注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会生成一个值，可以放在任何一个需要值的地方:
(1). a
(2). a+b
(3). demo(1)
(4).x === y ? ‘a’ : ‘b’
目的:因为数据是动态的,为了一旦把动态数据交给vue实例,以后vue中的数据发生变化,整个页面的这个地方也一起发生变化
这个root代表的是根,是Vue实例
1.3vue模板语法
1.3.1 插值语法&指令语法
hello,{{name}}
<script type="text/javascript"> new Vue({ el: '#root', //el用于指定当前Vue实例为那个容器服务,值通常为css选择器字符串 data: { //data用于存储数据,数据供el所指定的容器使用 name: '哈哈哈' } }) </script> ``` ` <a href={{ url}}>11111</a>` 这种不能插入url ```vue <div id="root"> <!-- 插值语法 --> <h1>hello,{{name}}</h1> <a v-bind:href="url">11111</a> </div>
绑定:把表达式执行的结果绑定给href
这里就是把绿色框里面的url当初表达式来执行而不是字符串
v-bind: 可以简写成:
总结
插值语法往往用在标签体里面,指令语法往往用在标签属性,事件等
1.4 vue数据绑定
v-bind 只是单向的数据绑定
v-model双向绑定
[!danger]
v-model只能应用在表单类元素上面
总结:
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。
备注:
1.双向绑定一般都应用在表单类元素上（如: input、select等)
2.v-model:value 可以简写为v-model，因为v-model默认收集的就是value值.。
el和data的两种写法
l/el的两种写法
const v = new Vue({ el: " #root', //第一种写法 data:{ name:"尚硅谷' }) console.log(v) v.$mount('#root')//第二种写法*/
灵活使用容器
data
//data的第二种写法:函数式 data:function(){ return{ name:"尚硅谷 } }
这种function函数是由vue对象来调,但是箭头函数不行
另外可以简写成
data(){ return{ name:"尚硅谷 } }
1.5MVVM模型
1.M:模型(Model) :对应data中的数据
2.V:视图(View):模板
3.VM:视图模型(ViewModel) : Vue实例对象
[!理解]
view是html中我们设置的模板,model是数据,vm是实现模型和数据绑定的对象
观察发现:
1.data中所有的属性,最后都出现在vm身上。
2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
1.6 数据代理
defineProperty 让number与age产生了关联
我们可以把vue看成别人封装好的工具类，传入的参数是自身的自定义类，该自定义类继承了vue接口，可定义vue接口的属性值，也可以自行定义成员变量，成员属性，成员方法等，这些都可以被vue实例接管
1.7 事件处理
<div id="root"> <h2>欢迎来到{{name}}学习</h2> <!-- <button v-on:click="showInfo">点我提示信息</button> --><button @click="showInfo1">点我提示信息1</button> <button @click="showInfo2($event,66)">点我提示信息2</button></div> </body> <script type="text/javascript"> Vue.config.productionTip = false l/阻止 vue在启动时生成生产提示。 const vm = new Vue({ el: " #root', data:{ name:'尚硅谷'} methods:{ showInfo1(event){ … showInfo2(event, number)iconsole.log(event,number) // console.log(event.target.innerText)l / console.log(this)//此处的this是vmll alert( '同学你好!!')I F }}) /script>
1.7.2事件修饰符
1.prevent: P阻止队手件（滑用）;
2.stop:阻止事件冒泡（常用）;
3.once:事件只触发一次（常用）;
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
使用捕获模式,先捕获再冒泡
self:只有event.target是当前操作的元素时才触发事件;
1.7.3. 按键修饰符
- keycode : 操作的是某个 keycode 值的键
- .keyName : 操作的某个按键名的键(少部分)
1.Vue中常用的按键别名:
回车 => enter
删除=>delete(捕获“删除”和“退格”键)退出=>esc
空格=>space
换行=> tab(特殊，必须配合keydown去使那
上=> up
下=> down
左=>left
右=> right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键（用法特殊）: ctr1、alt、shift、meta
(1).配合keyup使用:按下修饰健的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键（不推荐)
5.Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
返回值插值进大括号
