目录
一、Vue是什么？
套用于构建用户界面的渐进式JavaScript框架
?
渐进式：
Vue可以自底向.上逐层的应用
简单应用:只需一个轻量小巧的核心库
复杂应用:可以引入各式各样的Vue插件
?
后起之秀，生态完善，已然成为国内前端工程师必备技能。
?
二、Vue的特点
1.采用组件化模式，提高代码复用率、且让代码更好维护。
2.声明式编码，让编码人员无需直接操作DOM,提高开发效率。
?
?3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
三、Vue安装
1.官方网站：https://cn.vuejs.org/
2.下载vue.js
3.打开VSCode?
VSCode插件：open on browser 在浏览器打开html网页
live server 可以在vscode中打开一个5500端口的服务器来访问页面
4.编写html
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>5. 安装vue_dev_tools
6.打开F12，验证vue是否存在
输入vue.config
初识Vue:
1.想让Vue工作，就必须创建一 个Vue实例，且要传入一个配置对 象;
2. root容器里的代码依然符合html规范，只不过混入了一些特 殊的Vue语法;
3. root容器里的代码被称为[Vue模板] ;
4.Vue实例和容器是一对应的;
5↓真实开发中只有一个Vue实例，并且会配合祥组件起使用:?
6.{{xx}}中的xxx要写js表达式，且xxx可 以自动读取到data中的所有属性;
7.一旦data中的数据发生改变， 那么模板中用到该数据的地方也会自动更新;
入门案例：
<!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>初识Vue</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello {{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
// 创建vue实例
const x = new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //'data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'尚硅谷'
}
})
</script>
</body>
</html>?分析Hello案例：
1.容器与vue实例的关系是一对一，不能有多个vue实例接管一个容器
?
模板语法
Vue模板语法有2大类:?
1.插值语法
????????功能:用于解析标签体内容。
????????写法: {{xxx}}, xxx是js表达式， 且可以直接读取到data中的所有属性。
2.指令语法:
????????功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
????????举例: v-bind:href="xx" 或简写为 :href="xx", xxx同样要写js表达式，且可以直接读取到data中的所有属性。
????????备注: Vue中有很多的指令，且形式都是: v-????, 此处我们只是拿v-bind举个例子。
代码：
<!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>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url" v-bind:x="hello">点我去其他网站</a>
<a :href="Date.now()" :x="hello">点我去其他网站2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时生成生产提示
// 创建vue实例
new Vue({
el:'#root', //e1用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
data:{ //'data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
name:'atguigu',
url:'http://www.baidu.com',
hello:'你好'
}
})
</script>
</html>数据绑定
比v-bind的高级的数据绑定
Vue中有2种数据绑定的方式:
1，单向绑定(v-bind):数据只能从data流向页面。
2.? 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data.
备注:
????????1.双向绑定一般都应用在表单类元素上(如: input、select等 )
????????2.v-model:value可以简写为v-model, 因为v -mode1默认收集的就是value值。
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name"><br>
双向数据绑定：<input type="text" v-model:value="name">
</div>v-model：只能用于表单类，这种需要交互的元素
两种简写方式：
单向数据绑定：<input type="text" :value="name"><br>
双向数据绑定：<input type="text" v-model="name">el与data的两种写法
1.el的两种写法
(1)?new Vue时候配置e1属性。
(2)先创建Vue实例，随后再通过vm.$mount(”#root ')指定e1的值。
<script type="text/javascript">
const v = new Vue({
//el:"#root", //第一种
data:{
name:'尚硅谷'
}
})
console.log(v);
v.$mount('#root'); //new完后再绑定
</script>2.data的两种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
全写：data:function(){....}
缩写:? ?data(){....}
new Vue({
el:'#root',
data() {
return {
name: '尚硅谷',
};
},
})3.一个重要的原则:
由Vue管理的函数，一定不要写箭头函数，一且写了箭头函数，this就不再是Vue实例了。
?
MVVM模型
MVVM模型
????????1. M:模型(Model) : ????????data中的数据
????????2. V:视图(View) :????????模板代码
????????3. VM: 视图模型(ViewModel): ????????Vue实例
观察发现:
1.data中所有的属性，最后都出现在了vm身上。
2.vm身上所有的属性及Vue原型上所有属性，在Vue 模板中都可以直接使用。
数据代理
复习Object.defineProperty方法
什么是数据代理？
通过一个对象代理对另一个对象中属性的操作（读/写）
事件处理?
事件的基本使用:
1.使用v-on:xx或@xx绑定事件，其中xxx是 事件名:
2.事件的回调需要能置在Emethods对象中，最终会在vm上;
3. methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4。methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象;
5. @click="demo"和@click= ”demo($event)"效果一致， 但后者可以传参;
?
<button @click="showInfo($event,99999)">点击弹出信息</button>showInfo 函数 可以传参，包括event鼠标事件和一个数值99999
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'school'
},
methods:{
showInfo(a,number){
alert("你好")
alert(number)
alert(a)
}
}
})
</script>可以用a来接收鼠标事件，number来接收99999
采用mehtods:{..} 配置项，属于vue里面的配置项。
事件修饰符
Vue中的事件修饰符:?
1.prevent:阻止默认事件(常用）
2.stop: 阻止事件冒泡(常用)
3.once: 事件只触发-次 (常用);
4.capture:使用事件的捕获模式;
5.self:只有event. target是当前操作的元素是才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
?
1. Vue中常用的按键别名:
回车=>enter
删除=>delete(捕获"删除”和“退格”键)
退出=> esc
空格=> space
换行=> tab
上=> up
下=> down
左=> left
右=> right
2.Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case (短横线命名)
3.系统修饰键(用法特殊) : ctrl、 alt、 shift、 meta
(1).配合keyup使用:按下修饰键的同时，再按下F 其他键，随后释放其他键，事件才 被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keyCode去指定具体的按键( 不推荐)
5. Vue . config . keyCodes.自定义键名=键码，可以去定制按键别名
?
演示：
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
methods:{
showInfo(e){
console.log(e.target.value)
}
}特殊：tab 必须是keydown才行
事件总结
1.修饰符可以连续写
@click.prevent.stop
先阻止默认行为，再阻止冒泡2.可以连续案件事件
@keyup.ctrl.y连续按下ctrl + y 触发事件
