vue基础知识点总结

vue基础知识点总结

实例化vue

var vue =new vue({
    el:"#app",
	data: {
	message:"你好啊"
	}
})

• 创建Vue对象的时候，传入了一些options：{}
• {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上 ，很明显，我们这里是挂载到了id为app的元素上
• {}中包含了data属性：该属性中通常会存储一些数据
• 这些数据可以是我们直接定义出来的，比如像上面这样。
• 也可能是来自网络，从服务器加载的。

Vue基本语法

插值

文本插值

数据绑定最常见的形式就是使用Mustache语法(也就是双大括号)

<div id="app">
  <p>{{ message }}</p>
</div>
<script>
	el:"#app",
	data: {
	message:"你好啊"
	}
</script> 

v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码
如果我们直接通过{{}}来输出，会将HTML代码也一起输出。
但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
如果我们希望解析出HTML展示

• 可以使用v-html指令
• 该指令后面往往会跟上一个string类型
• 会将string的html解析出来并且进行渲染

<div id= "app">
    <h2>{{Llink} }< /h2>
    <h2 v-htmL="tink"></h2>
</diV>
<script src="../js/vue. js"></script> 
<script>
    let app = new Vue({
        el: ' #app'，
        data: {
        Link: '<a href="http: / /www. baidu. com">百度一下</a>'
        }
})
</script>

条件语句

v-if 指令将根据表达式 参数的值(true 或 false )来决定是否插入 元素。

例

<div id="app">
 <div v-if="isShow"> </div>  
 <script>
 	let app=new Vue({
	el:"#app",
	data: {
	message:"你好啊"
	}
})
</script> 

v-else 衔接v-if使用与如果v-if值为false则插入v-else
isShow绑定下边的data中的属性isShow

<div id="app">
   <div v-if="isShow">我是v-if</div>
   <div v-else>我是v-else</div>
</div>
<script>
let app=new Vue({
   el:"#app",
   data: {
   isShow:false
   }
})
</script> 
//v-else-if 与普通if else else if用法类似不再过多论述

条件渲染案例

我们来做一个简单的小案例：

用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。
类似如下情景：

<div id="app">
    <span v-if="type=== 'username ">
        <label>用户账号:</label>
        <input placeholder="用户账号"> 
    </span> 
    <span v-else>
        < label>邮箱地址:</label>
        <input placeholder= "邮箱地址"> 
    </ span>
    <button @click="handleToggle">切换类型< /button>
</div>
<script src=". ./js/vue.js"></script>
<script>
    Let app =new Vue({
        el :'#app '，
        data: {
        type :'usename'，
        },
    methods: {
        handleToggle() {
        this. type = this. type 
        ==='email'?'username':'emaiL'
        }
    }
    })
</script>

案例小问题

**小问题： **
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？
问题解答：
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。
**解决方案： **
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同

<div id="app">
    <span v-if="type=== 'username ">
        <label>用户账号:</ label>
        < input placeholder="用户账号" key= "username-input">
    </ span>
    <span v-else>
        < label>邮箱地址:</ label> 
        < input placeholder=”邮箱地址" key= " email- input">
    </span> 
    <button @cli ck="handleToggle">切换类型< /button>
</div>


##### v-show语句
v-show 与v-if相似 其区别是 v-if参数为true则创建元素而v-show的本质是将元素的dislay属性改为none 如果参数为true则不加该属性，改元素已经在页面上创建出来
例

<div id="app">
    <h2 v-text="message ></h2>
    <h2>{ {message} }</h2> 
</div>
<script src="../js/vue. js"></script>
<script>
    let Vm = new Vue({
    el: ' #app',
    data: {
    message: ' 你好啊，李银河!'
    })
</script>
##### v-pre
v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。  
比如下面的代码：  
第一个h2元素中的内容会被编译解析出来对应的内容  
第二个h2元素中会直接显示{{message}}

<div id="app">
    <h2 v-text="message"></h2>
    <h2>{ {message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm = new Vue({
    el :'#app '
    data: {
    message: ' 你好啊，李银河! '
    }
})
</script>

v-once

该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

v-bind

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值
在开发中，有哪些属性需要动态进行绑定呢？
还是有很多的，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
比如通过Vue实例中的data绑定元素的src和href，代码如下：

v-bind 绑定class

绑定方式：对象语法

用法一：直接通过{}绑定一个类

<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值

<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类

<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

绑定方式:数组语法

数组语法的含义是:class后面跟的是一个数组。
用法一：直接通过{}绑定一个类

<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值

<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类

<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性

<h2 class="title" :class="classes">Hello World</h2>

v-bind绑定style

绑定方式一：对象语法

:style="{color: currentColor, fontSize: fontSize + 'px'}"

style后面跟的是一个对象类型
对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二：数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

style后面跟的是一个数组类型
多个值以，分割即可

计算属性

• 我们知道，在模板中可以直接通过插值语法显示一些data中的数据 。
• 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
• 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
• 但是如果多个地方都需要显示完整的名称，我们就需要写多个{{firstName}} {{lastName}}
• 用计算属性就可以把完成这项工作
• 计算属性是写在实例的computed选项中的

<div id="app">
    <h2>{{fullName}}</h2>
</div> 
<script src="../js/vue. js"></script>
G<script>
constym=newVue({
    el: ' #app
    data: {
    firstName: ' Kobe'，
    lastName: ' Bryant '
    }，
computed :
    fullName() {
    return this. firstName + ' ' + this. las tName
    }
    })
</script>

计算属性的setter和getter

• 每个计算属性都包含一个getter和一个setter
• 在上面的例子中，我们只是使用getter来读取。
• 在某些情况下，你也可以提供一个setter方法（不常用） 。
• 在需要写setter的时候，代码如下：
  

计算属性的缓存

我们可能会考虑这样的一个问题：
methods和computed看起来都可以实现我们的功能，
那么为什么还要多一个计算属性这个东西呢？
原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

监听属性

v-on介绍

作用：绑定事件监听器
缩写：@
与js的事件监听类似 也有一个event参数 -----

v-on基础运用

<div id="app">
    <h2>点击次数:
    { {counter}}</h2>
    <button v-on: click=" counter++">按钮点击1< /button>
    <button v-on:click= "btnCl ick">按钮点击2< /button>
< /div>
<script>
let app=newVue({
    el: '#app',
    data: {
    counter: 0 
    }，
methods: {
    btnClick() {
    this. counter++
    }
})
</script>

v-on:click可以写成@click
在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调 。
• .native - 监听组件根元素的原生事件。
• .once - 只触发一次回调。

Es6语法补充

let/var

事实上var的设计可以看成JavaScript语言设计上的错误. 但是这种错误多半不能修复和移除, 以为需要向后兼容.
大概十年前, Brendan Eich就决定修复这个问题, 于是他添加了一个新的关键字: let.
我们可以将let看成更完美的var
块级作用域
JS中使用var来声明一个变量时, 变量的作用域主要是和函数的定义有关.
针对于其他块定义来说是没有作用域的，比如if/for等，这在我们开发中往往会引起一些问题。

const的使用

const关键字
在很多语言中已经存在, 比如C/C++中, 主要的作用是将某个变量修饰为常量.

在JavaScript中也是如此, 使用const修饰的标识符为常量, 不可以再次赋值.

**什么时候使用const呢? **

当我们修饰的标识符不会被再次赋值时, 就可以使用const来保证数据的安全性.

** 建议: 在ES6开发中,优先使用const,** **只有需要改变某一个标识符的时候才使用let. **

const的注意

const注意一:

const a =20;
a=30; //错误:不可以修改，

const注意二:

const name;//错误：const修饰符的标识符必须赋值

对象增强写法

// 1.属性的简写
// ES6之前
1et name = 'why'
1et age = 18
let obj1 = {
	name: name ，
	age: age
	console.1og(obj1) ;
}
// ES6之后
let obj2 = {
name, age
}
console. 1og(obj2) ;

v-for遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。

格式如下：item in items的形式。

例：

<div id="app">
    <ul>
        <li v-for="(value, key, index) in info"> 
            {{value}}-{{key}}-{{index}}
        </li>
    </ul>
</div> 
<script src="../js/vue . js"></script> 
<script>
    Let app. = new Vue({
    el :' #app',
    data: {
        info: {
            name :
            why' ，
            age: 18,
            height: 1 .88
        }
    }
})
</script>

v-for遍历对象

组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。

为什么需要这个key属性呢（了解）？

这个其实和Vue的虚拟DOM的Diff算法有关系。

这里我们借用React’s diff algorithm中的一张图来简单说明一下：

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点]

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。

即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识

Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。

检测数据更新·

因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WSPLpyFz-1581212743557)(5F4BA5394A3B42A1BDB338BAC6B0A6CC)]

表单绑定v-model

Vue中使用v-model指令来实现表单元素和数据的双向绑定。
当我们在输入框输入内容时

因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G4uStvtJ-1581212743559)(9AC019B5D07D422C968649D47E4560B6)]

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件

也就是说下面的代码：等同于下面的代码：

<input type="text" v-model="message">
//等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model：radio

当存在多个单选框时

<div id="app">
    <label for="male">
        <input type="radio" :value="abc" v-model="gender" id="male">男
    </label>
    <label for="female">
        <input type="radio" value=" female" v- model="gender" id=" female">女
    </label>
    <p>您的选择: {{gender}}</p>
< /div>
<script src="../js/vue. js"></script>
<script>
    let app = new Vue({
        el :' #app'，
        data: {
            gender :
            abc: ' male '
        }
    })
</script>

v-model：checkbox

复选框分为两种情况：单个勾选框和多个勾选框

单个勾选框：

v-model即为布尔值。

此时input的value并不影响v-model的值。

多个复选框：

当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。

当选中某一个时，就会将input的value添加到数组中。

<div id="app">
    <!--单个复选框-->
    <label for="check">
        <input type=" checkbox" v-model="checked" id=" check">同意协议
    </label>
    <p>是否选中: {{checked}}</p>
<!--多个复选框-->
    < label>
        < input type=" checkbox" v-mode l= "hobbies" value="篮球">篮球
    </ label>
    < label>
        <input type= "checkbox" v -model= "hobbies" value=" 足球">足球
    </label>
    < label>
        <input type="checkbox" v -model="hobbies" value="台球">台球
    </label>
    <p>您选中的爱好: { {hobbies}}</p>
</div> 
<script>
    let app =new Vue({
    el :' #app',
    data:{
        checked: false,
        hobbies: []
    }
</script>

v-model：select

和checkbox一样，select也分单选和多选两种情况。

单选：只能选中一个值。

v-model绑定的是一个值。

当我们选中option中的一个时，会将它对应的value赋值到mySelect中

多选：可以选中多个值。

v-model绑定的是一个数组。

当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

v-model 修饰符

lazy修饰符：

• 默认情况下，v-model默认是在input事件中同步输入框的数据的。
• 也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。
• lazy修饰符可以让数据在失去焦点或者回车时才会更新：

number修饰符：

• 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。
• 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。
• number修饰符可以让在输入框中输入的内容自动转成数字类型：

trim修饰符：

• 如果输入的内容首尾有很多空格，通常我们希望将其去除
• trim修饰符可以过滤内容左右两边的空格