基础语法

Vue文件结构

一个Vue文件由三部分组成，模板<template>、业务代码<script>和样式<style>

<template>

template编写当前vue文件的html结构，template下只能有一个根节点。

<template>
    <div id=root>
        模板
    </div>
</template>

<script>

script用来编写业务逻辑，默认导出一个对象，该对象内部常见的属性和方法有： 方法：

data: 返回一个对象，里面是页面的数据存储的地方 各种生命周期函数（后面会讲解）

属性：

method: 用来保存页面上所有和方法相关的函数，由用户主动触发 watch: 监听属性，可以监听数据的变化 computed: 计算属性，同样可以监听数据变化，有缓存

<script>
    export default {
        data() {
            return {
                name: 'Vue',
            }
        },
        methods: {
            fn() {...},
        }
        ...
    }
</script>

<style>

style是当前vue文件下的CSS样式文件，可以选择CSS编译器，比如我常用的是scss，那么就可以这样写：

<style lang='scss'>

如果不对样式的作用范围进行约束的话，那么它会对全局造成样式污染，需要设置 scoped。

<style scoped>
#root {
    width: 50px;
    height: 50px
}
</style>

插值表达式

插值表达式是Vuejs中实现数据渲染到页面方式，不用进行dom操作可以直接将数据从模型到视图。 插值表达式就是，括号里面可以执行简单的js代码。将模型变量中的属性直接放到插值表达式中可以实现数据渲染到页面的效果。 内容只能是纯文本，不能为html标签。

在标签中添加插值表达式 {{}}，类似插槽。插值表达式支持简单的语法，可以对变量进行加、减、乘、除、取余、逻辑运算、三目运算等简单的操作。

vue中还有多种方便数据直接渲染到页面的API，较为常见有 v-text, v-html。

v-text 同插值表达式 **{{}}**类似，只能渲染纯文本，不过v-text会覆盖标签原本的内容，而插值表达式可以在内容的某些位置插入。

v-html 可以解析字符串中的html标签，可以将html标签渲染到页面上。

<template>
    <div>
        <div><span>插值表达式{{a}}</span></div>
        <div><span v-text="b">v-text</span></div>
        <div v-html="c">v-html</div>
    </div>
</template>

<script>
data() {
    return {
        a: '1',
        b: '2',
        c: '<span>3</span>',
    }
}
</script>

---

v-if

v-if可以决定元素/组件在页面上的渲染与否。

<div v-if="true">div1</div>

对应的有v-else，二者互斥，其中只能有一个元素可以在页面上渲染出来。

<!-- 此时div1渲染，而div2不渲染 -->
<div v-if="true">div1</div>
<div v-else>div2</div>

---

v-show

v-show通过操控节点的CSS样式来决定节点在页面的显示与否。

<div v-show="false">div1</div>	<!--渲染了，但是display为none，所以不显示，不占位置-->

v-if和v-show都是动态显示DOM元素，效果相似，但是原理却不同

• 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；

• 编译过程：v-if切换有首次条件是否为真都被编译，然后被缓存，而且DOM元素保留；

• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

• 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换。

---

v-for

当我们需要对一组数据进行渲染时，我们就可以使用v-for来完成

遍历数组

• 格式：

  <span v-for="(item, index) in items"></span>
  

  • 格式说明：index为可选参数，当不需要获取每一项的索引值时，可以省略index

v-for的key属性

• 在我们使用v-for时，建议给对应的元素或组件添加一个key属性

• 为何要添加一个key属性？主要目的就是为了高效的更新虚拟DOM

• 假设要在一个节点列表abcde的bc之间插入一个新节点f.在添加key属性前，diff算法默认是将c更新成f，d更新成c，e更新成d，最后再插入e

• 而在添加key属性后，key为每一个节点做了一个标识，diff算法可以准确高效的在要求的位置插入新节点

• 为key赋的值必须要与元素具有一一对应的关系

关于v-for的key值会在后续的diff算法中补充。

---

v-bind

动态地绑定一个或多个属性，或者绑定一个组件 prop 到表达式。

<img v-bind:src="path" />

v-bind在开发时可以简写为冒号:，如上述代码可以和以下代码相同：

<img :src="path" />

v-bind是单向的属性绑定，data中对应变量

---

v-model

实现表单元素和数据的双向绑定。

<input type="input" v-model="path" />

v-on

使用v-on实现事件对方法的绑定

<input type="input" v-on:change="ipt" />

v-on在开发中可以缩写为*@*

<input type="input" @change="ipt" />