vue的基础概念和语法01
Posted jcdxh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue的基础概念和语法01相关的知识，希望对你有一定的参考价值。
vue的特点和web开发中的常见高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
- 数据响应式
不是所有元素操作都Vue都会监听并实现数据响应式
```js //push方法:追加 this.letters.push('aaa') //pop(): 删除数组中的最后一个元素 this.letters.pop(); //shift(): 删除数组中的第一个元素 this.letters.shift(); //unshift(): 在数组最前面添加元素 this.letters.unshift('aaa', 'bbb', 'ccc') //splice作用: 删除元素/插入元素/替换元素 //删除元素: 第二个参数传入你要删除几个元素(如果没有传,就删除后面所有的元素) //替换元素: 第二个参数, 表示我们要替换几个元素, 后面是用于替换前面的元素 //插入元素: 第二个参数, 传入0, 并且后面跟上要插入的元素 splice(start): this.letters.splice(1,3) this.letters.splice(1, 3, 'm', 'n', 'l', 'x') this.letters.splice(1, 0, 'x', 'y', 'z') //sort() 排序 this.letters.sort() //reverse() 反转 this.letters.reverse()```
Vue不会监听通过索引值修改数组中的元素： this.letters[0] = 'bbbbbb'; //这样修改的元素不会被监听和响应 //那如何修改索引为0的元素呢？ 方法一：this.letters.splice(0, 1, 'bbbbbb') //set(要修改的对象, 索引值, 修改后的值) 方法二： Vue.set(this.letters, 0, 'bbbbbb')
安装vue ：1.CDN 2.下载引入 3.npm
创建Vue实例
- 创建时传入了一个对象options
- 这哥option包含了（常用基础选项）
- el ：
string|htmlElement作用：决定之后Vue实例会管理哪个DOM - data ：
object|function(组件当中data必须是一个函数)作用：Vue实例对应的数据对象 - methods ：
{ [key:string]:function}作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用 - computed（计算属性）：与methods相似，但是调用函数时不用（），当作属性直接调用 ,计算属性会进行缓存，如果多次使用时，计算属性只会调用一次
- el ：
- computed和methods的区别
- computed会设置缓存，当多次调用时只执行一次，而methods会调用多次，一般当我们讲一些数据进行一些处理并展示出去的时候用computed，而不用methods
vue的生命周期
- 生命周期：一个事物的诞生到消亡的整个过程
- callHook钩子函数 （Hook：钩子）
vue中的基本指令
- Mustache语法 ：{{ }}
- mustache语法中,不仅仅可以直接写变量,也可以写简单的js表达式
- v-once指令：元素和组件只渲染一次，不会根据数据改变而改变
<h2 v-once> {{message}} </h2>
- v-html指令：可以插入html标签(会覆盖标签中文本)
url: '<a href="http://www.baidu.com">百度一下</a>' <h2 v-html="url"></h2>
- v-text指令：和html相似，但是不能识别html标签（会覆盖标签中文本）
- v-pre指令：跳过这个元素和他子元素的编译过程
message:"小明" <h2 v-pre>{{message}}</h2> //message
- v-cloak：cloak（斗篷），当js编译过慢时，遮挡Mustache语法让其不显示，这个指令在vue解析前存在，解析之后不再，所以通常配合css样式display：none来使用
- v-for：用于遍历数组或者枚举对象
<p v-for="item in list">{{item.name}}-------{{item.age}} </p>(遍历数组，如果in前面有两个参数，第二个参数代表索引)<p v-for="(val,key) in user">{{key}} ----- {{val}}</p>(对象是无序的，所以应该用value-key的形式)- 官方推荐我们在使用v-for的时候，给对应的元素或组件添加上一个:key
- 这和Vue的虚拟DOM的Diff算法有关，不添加标识的时候，插入元素是替换了所有从插入位置以后了元素，而加入了唯一标识key（不要使用index来做标识，因为index会随着元素位置改变而改变）他会识别后面已有的一样的元素，只插入一个元素在进行渲染
- v-bind：绑定属性，缩写 :
- 除了内容需要动态来决定以外，某些属性也希望动态来绑定（基本使用：a元素的href属性，img元素的src属性）
<a v-bind:href="aHref">百度一下</a>缩写<a :href="aHref">百度一下</a>
- v-bind动态绑定class的两种方法（对象和数组）
- 对象语法
CSS代码： .active { color: red; } HTML代码： <h2 class="title" v-bind:class="{active: isActive, line: isLine}">{{message}}</h2> <h2 class="title" v-bind:class="getClasses()">{{message}}</h2> JS代码（vue）： const app = new Vue({ el: '#app', data: { message: '你好啊', isActive: true, isLine: true }, methods: { btnClick: function () { this.isActive = !this.isActive }, getClasses: function () { return {active: this.isActive, line: this.isLine} } } })- 数组语法
HTML代码： <h2 class="title" :class="[active, line]">{{message}}</h2> <h2 class="title" :class="getClasses()">{{message}}</h2> JS代码： const app = new Vue({ el: '#app', data: { message: '你好啊', active: 'aaaaaa', line: 'bbbbbbb' }, methods: { getClasses: function () { return [this.active, this.line] } } }) - v-bind动态绑定style的两种方法
- 对象方法
js <h2 :style="{key(属性名): value(属性值)}">{{message}}</h2> // key：fontSize，font-size等属性名 value：属性如果不加字符串会被认定为变量（10px变量 "10px"属性值） - 数组方法（相当于放入多个对象 用的很少）
js HTML代码： <h2 :style="[baseStyle, baseStyle1]">{{message}}</h2> JS代码： const app = new Vue({ el: ‘#app‘, data: { message: ‘你好啊‘, baseStyle: {backgroundColor: ‘red‘}, baseStyle1: {fontSize: ‘100px‘}, } })
- v-on:事件监听，缩写@
- v-on的参数问题：
- 情况一：如果该方法不需要额外参数，那么方法后的（）课不添加，但是如果方法本身有一个参数，而调用时没有传值的话，会默认将原生的事件event参数传递进去
- 情况二：如果需要同时传入多个参数，同时需要event时，可以通过$event传入事件
- v-on修饰符：
js //1.stop（阻止冒泡，调用了event.stopPropagation() <button @click.stop="btnClick">按钮</button> //2.prevent（阻止默认行为，调用了event.preventDefault() <input type="submit" value="提交" @click.prevent="submitClick"> //3.{keyCode|keyAlias}监听某个键盘的键帽 <input type="text" @keyup.enter="keyUp"> //键别名（enter回车） <input type="text" @keyup.13="keyUp"> //键代码 //4.点击回调只会触发一次 <button @click.once="btn2Click">按钮2</button> //5.串联修饰符 <button @click.stop.prevent="doThis"></button>
v-if,v-else-if,v-else的使用
<div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号"> </span> <span v-else> <label for="email">用户邮箱</label> <input type="text" id="email" placeholder="用户邮箱" > </span> <button @click="isUser = !isUser">切换类型</button> </div> const app = new Vue({ el: '#app', data: { isUser: true } })问题：当我们在文本框中已经输入了内容在进行切换的时候，文本内容并不会被清空，而是会沿用切换前已有的文本，这是为什么？
原因：因为Vue在进行DOM渲染的时候，处于性能考虑，会尽可能复用已经存在的元素（input），而不是创建新元素，复用时有部分不同在进行替换（id，placeholder）
解决：如果不希望Vue出现类型重复利用的问题，可以给对应的input添加key并保证key的不同（ 如：key="username"，key="email"）v-show:和v-if的使用相似，但有些不同
```js
//v-if: 当条件为false时, 包含v-if指令的元素, 根本就不会存在dom中
{{message}}
```//v-show: 当条件为false时, v-show只是给我们的元素添加一个行内样式: display: none <h2 v-show="ture" id="bbb">{{message}}</h2>
使用场景：当需要在显示与隐藏之间切片很频繁的使用时，使用v-show，当只有一次切换的时候，使用v-if- v-model：表单绑定双向数据
- v-model双向数据绑定原理：(语法糖)
- v-bind绑定表单标签的value属性，实现从数据到页面的绑定
- v-on指令给当前元素绑定input事件（$event.target.value）实现从页面到数据的绑定
<input type="text" :value="message" @input="message = $event.target.value">- v-model可以结合radio，checkbox，select等标签一起使用
- radio : 多个radio标签用v-model绑定同一个属性
- checkbox： checkbox单选框，绑定的属性对应boolean值，checkbox多选框，绑定的属性对应的数组
select:
data：{
```js
fruit：‘香蕉‘
}
```v-model修饰符:
```js
//1.修饰符: lazy
//作用：让数据失去焦点或者回车的时候才会更新
<input type="text" v-model.lazy="message">//2.修饰符: number
//作用：让输入框中输入的内容自动转成数字类型
<input type="number" v-model.number="age">//3.修饰符: trim
//作用：可以过滤内容左右两边的空格
<input type="text" v-model.trim="name">
```深入理解计算属性(computed)
- v-model双向数据绑定原理：(语法糖)
- 调用计算属性的方法的时候为什么不用加（）？下面来看一下计算属性的本质
computed: { fullName: { set: function(newValue) { // console.log('-----', newValue); const names = newValue.split(' '); this.firstName = names[0]; this.lastName = names[1]; }, get: function () { return this.firstName + ' ' + this.lastName } },计算属性本质就 是对象属性，里面包含了setter和getter方法，但是我们通常不适用setter方法，让其成为只读属性，这样就有了另外一种缩写方式：
fullName: function () { return this.firstName + ' ' + this.lastName }其实这样就是只调用某个计算属性中的get方法
以上是关于vue的基础概念和语法01的主要内容，如果未能解决你的问题，请参考以下文章