vue2基础知识--第1节
Vue 目录结构
目录解析
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。A==pp.vue: 项目入口文件，==我们也可以直接将组件写这里，而不使用 components 目录。main.js: 项目的核心文件。 |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
声明式编码
⚡️⚡️学习vue之前要掌握JavaScript基础知识！
🚀🚀🚀🚀具体教程见：JavaScript基础&高级教程🚀🚀🚀🚀
一、初识Vue
1、想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2、root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3、root容器里的代码被称为【Vue模板】；
4、Vue实例和容器是一一对应的； 数据是动态的，不用再次更新
5、真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6、{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7、一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；
注意区分：js表达式 和 js代码(语句)
1.表达式
一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1) 函数调用表达式
(4). x === y ? 'a' : 'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
二、Vue模板语法有2大类
1、插值语法
功能：用于解析标签体内容。
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。
2、指令语法
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）。
举例：v-bind:href="xxx" 或 简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性。
备注：Vue中有很多的指令，且形式都是：v-xxxx，此处我们只是拿v-bind举个例子。
学过的指令：
v-bind : 单向绑定解析表达式, 可简写为 :xxx
v-model : 双向数据绑定
v-for : 遍历数组/对象/字符串
v-on : 绑定事件监听, 可简写为@
v-if : 条件渲染（动态控制节点是否存存在）
v-else : 条件渲染（动态控制节点是否存存在）
v-show : 条件渲染 (动态控制节点是否展示)
v-text指令：
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
v-html指令：
1.作用：向指定节点中渲染包含html结构的内容。
2.与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。
3.严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
(2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
三、Vue中有2种数据绑定的方式
1、单向绑定(v-bind)
数据只能从data流向页面。
2、双向绑定(v-model)
数据不仅能从data流向页面，还可以从页面流向data。
备注：
1.双向绑定一般都应用在表单类元素【输入类元素，和用户产生交互】上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
四、data与el的2种写法
1、el有2种写法
(1). new Vue时候配置el属性。
(2). 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2、data有2种写法
(1). 对象式
(2). 函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3、一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
五、MVVM模型
-
M：模型(Model) ：data中的数据
-
V：视图(View) ：模板代码
-
VM：视图模型(ViewModel)：Vue实例
观察发现：
-
data中所有的属性，最后都出现在了vm身上。
-
vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处：
更加方便的操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。
1、Html
使用 v-html 指令用于输出 html 代码：
用在标签中，而不是标签的值中
<div id="app">
<div v-html="message"></div>
</div>
2、属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
3、表达式
Vue.js 都提供了完全的 JavaScript 表达式支持。
4、指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
指令都是写在标签中，而不是作为标签的内容
5、参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
6、修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用event.preventDefault()
<form v-on:submit.prevent="onSubmit"></form>
7、用户输入
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。
<body>
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
console.log(this)
// this是vue对象，其中包含vue对象的所有数据和方法
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
8、过滤器
Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
这里，message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。
9、缩写
v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
10、条件语句
<!-- Handlebars 模板 -->
{{#if ok}}
<h1>Yes</h1>
{{/if}}
v-if
v-else
v-else-if
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
也可以使用 v-show 指令来根据条件展示元素：
- 文本
- html
- 属性
- 表达式
六、路由
路由嵌套很少到七层的；
多页面应用
单页面应用——体验更好
七、事件处理
Vue中的事件修饰符：【记住前三个】
1.prevent：阻止默认事件（常用）；
2.stop：阻止事件冒泡（常用）；
3.once：事件只触发一次（常用）；
4.capture：使用事件的捕获模式；
5.self：只有event.target是当前操作的元素时才触发事件；
6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
滚动
- @scroll 滚动条触发，不是滚轮
- @whell 鼠标滚轮触发，不是滚动条
键盘事件
1、Vue中常用的按键别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3、系统修饰键（用法特殊）：ctrl、alt、shift、meta
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
4、也可以使用keyCode去指定具体的按键（不推荐） 【编码不推荐】
5、Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
tab键可以改变焦点，失去对当前元素的焦点
八、计算属性
1、定义：要用的属性不存在，要通过已有属性计算得来。
2、原理：底层借助了Objcet.defineproperty方法提供的getter和setter。
3、get函数什么时候执行？
(1).初次读取时会执行一次。
(2).当依赖的数据发生改变时会被再次调用。
4、优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
5、备注：
-
计算属性最终会出现在vm上，直接读取使用即可。
-
如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变。【真正进行改变】
data：是属性
computed：是计算属性
computed:{
fullName:{
//get有什么作用？当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
//get什么时候调用？1.初次读取fullName时。2.所依赖的数据发生变化时。
get(){
console.log('get被调用了')
// console.log(this) //此处的this是vm
return this.firstName + '-' + this.lastName
},
//set什么时候调用? 当fullName被修改时。
set(value){
console.log('set',value)
const arr = value.split('-')
this.firstName = arr[0]
this.lastName = arr[1]
}
}
只读不改
//简写
fullName(){
console.log('get被调用了')
return this.firstName + '-' + this.lastName
}
九、监视属性
监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
1、深度监视
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
computed和watch之间的区别：
-
computed能完成的功能，watch都可以完成。
-
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
// 已经明确监视对象
watch:{
isHot:{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
}
}
// 创建vue对象时不知道监视对象
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
//handler什么时候调用？当isHot发生改变时。
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了')
}
}
watch:{
isHot:{
// immediate:true, //初始化时让handler调用一下
// deep:true,//深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)}
},
//简写
isHot(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue,this)}
//正常写法
vm.$watch('isHot',{
immediate:true, //初始化时让handler调用一下
deep:true,//深度监视
handler(newValue,oldValue){
console.log('isHot被修改了',newValue,oldValue)
}
})
//简写
vm.$watch('isHot',(newValue,oldValue)=>{
console.log('isHot被修改了',newValue,oldValue,this)
})
2、computed和watch之间的区别
-
computed能完成的功能，watch都可以完成。 【计算属性更加简单】
-
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
3、两个重要的小原则
-
所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
-
所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
这样this的指向才是vm 或 组件实例对象。
watch:{
firstName(val){
// 定时器，不是vue不是管理的，而是系统管理的
setTimeout(()=>{
console.log(this)
this.fullName = val + '-' + this.lastName
},1000);
},
lastName(val){
this.fullName = this.firstName + '-' + val}
十、绑定样式
【vue管理动态内容】
1、class样式
写法：class="xxx" xxx可以是字符串、对象、数组。
字符串写法：
- 适用于：类名不确定，要动态获取。
- 适用于：样式的类名不确定，需要动态指定
对象写法：
- 适用于：要绑定多个样式，个数不确定，名字也不确定。
- 适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用
数组写法：
- 适用于：要绑定的样式个数不确定、名字也不确定
- 适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
2、style样式
对象写法
:style="{==fontSize==: xxx}"- 其中xxx是动态值。【其中的key不能乱写，要写style中的样式对象】
数组写法
:style="[a,b]"- 其中a、b是样式对象。
整理不易，关注和收藏后拿走！欢迎留言~
欢迎专注我的公众号：AdaCoding 和 Github：AdaCoding123
1906
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
