vue2的基本语法

2、模板语法 2.1 属性绑定 属性的绑定，下面先来看一下关于对属性的绑定

在上面的代码中，我们通过v-bind的方式给h2绑定了一个title属性。

当然，上面的代码我们也可以使用如下的方式来进行简化

<div id="app">
  <h2 :title="msg">
    {{msg}}
  </h2>
</div>

为了避免闪烁的问题，也就是最开始的时候，出现:{{msg}}的情况，可以使用如下的绑定方式。

3、 列表渲染 我们可以使用v-for指令基于一个数组来渲染一个列表.v-for指令需要使用item in items形式的语法。其中items 是源数组，而item则是被迭代的数组元素的别名。

基本实现的代码如下：

列表渲染 ​ 注意：为了能够保证列表渲染的性能，我们需要给v-for添加key属性。key值必须唯一，而且不能使用index与random作为key的值。

关于这一点是与虚拟DOM算法密切相关的。在后面的课程中会最为一个重点来探讨虚拟DOM的内容。这也是面试的时候经常被问到的问题。

4、v-model 在前面讲解vue简介的时候，我们说过，如果model中的数据发生了改变，会通过ViewModel通知View更新数据，这个效果前面我们也已经演示了，现在演示一下当view中的数据发生了变化后，怎样通过ViewModel来通知model来完成数据的更新。

其实这就是我们常说的，“双向数据绑定”

怎样实现这种效果呢？可以通过v-model来实现。

具体代码实现如下：

双向数据绑定 ​ ​ 怎样验证v-model实现了双向数据绑定呢？

可以打开控制台，然后输入：vm.userName 发现输出的值为"zhangsan", 取的是模型中的数据。

当在文本框中输入新的值后，在敲一下vm.userName发现对应的数据发生了变化，也就是视图中的数据发生了变化，模型中的数据也 会发生变化。

那么在控制台中直接给vm.userName="lisi",发现文本框中的值也发生了变化。

关于v-model 这个知识点，面试的时候经常会被问到的一个问题就是，自己能否模拟实现一个类似于v-model的双向数据绑定的效果。关于这个问题你可以先思考一下，在后面的课程中，我们会详细的讲解。

5、v-on 怎样监听dom的事件呢？可以通过v-on指令完成，具体的代码如下：

Document ​ 还可以通过简写的形式。建议以后都使用简写的形式

<button @click="changeName">更换姓名 带参数的形式如下：

<button @click="changeNameByArg('laowang')">带参数的情况 ​ ​

除了绑定鼠标的单击事件以外，也可以绑定键盘的实际。

例如，页面有有一个文本框，用户在该文本框中输入内容，按下回车键，获取到用户输入的内容。

在mehtods中定义changeUserName方法

// 通过methods完成函数或方法的定义 methods: { changeName() { // 在methods中要获取data中的属性，需要通过this来完成，this表示的是vue实例。 this.name = "itcast"; }, changeNameByArg(userName) { this.name = userName; }, //定义处理文本框键盘事件的方法。 changeUserName() { console.log(this.name); }, }, 在上面的案例中，我们使用了按键的修饰符：.enter,在官方文档中，还有其它的按键修饰符，如下所示：

cn.vuejs.org/v2/guide/ev… 与之相关的就是事件修饰符，如下所示：

cn.vuejs.org/v2/guide/ev… 以上内容，大家可以在课下的时候，仔细看一下。

6、Class与Style绑定 这块主要内容主要与样式设置有关。

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

下面先来看一下Class的绑定。

在"列表渲染"中给每个列表项添加对应的样式。

.actived { background-color: #dddddd; }

下面给li列表添加上面所定义的样式。

编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}

在上面的代码中，我们可以看到，给li标签绑定了class属性，同时actived的值为true,表示给li添加actived样式。

现在有一个需求，就是当鼠标移动到列表项上的时候，更改对应的背景色。

    <li
      v-for="(item,index) in users"
      :key="item.id"
      :class="{actived:selectItem===item}"
      @mousemove="selectItem=item"
    >

在对class进行绑定的时候，做了一个判断，判断一下selectItem是否与item相等，如果相等添加样式。

当鼠标移动到某个li 列表上的时候，触发mousemove事件，将item的值给selectItem.

在data中定义selectItem.

如下所示：

data: { selectItem: "", users: [ { id: 1, name: "张三", }, { id: 2, name: "李四", }, { id: 3, name: "老王", }, ], }, 完整 代码如下：

列表渲染 .actived { background-color: #dddddd; } ​ 下面，我们再来看一下Style的绑定。

​ <li v-for="(item,index) in users" :key="item.id" :style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}" @mousemove="selectItem=item" > 编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}} 通过上面的代码，可以看到通过绑定style的方式来处理样式是非常麻烦的。

7、条件渲染 v-if和v-show指令可以用来控制元素的显示和隐藏

下面，我们先来看一下v-if的应用。

这里还是对用户数据进行判断。

<div id="app">
  <p v-if="users.length===0">没有任何用户数据</p>

​

<!-- <li v-for="(item,index) in users" :key="item.id" :class="{actived:selectItem===item}" @mousemove="selectItem=item" > 编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}} --> ​ <li v-for="(item,index) in users" :key="item.id" :style="{backgroundColor:selectItem===item?'#dddddd':'transparent'}" @mousemove="selectItem=item" > 编号：{{item.id}} 姓名:{{item.name}}---索引:{{index}}

在上面的代码中，我们首先对users数组做了一个判断，如果没有数据，就在页面上展示：“没有任何用户数据”

否则渲染整个列表。

上面是关于v-if的使用，下面看一下v-show.

v-show 是通过css属性display控制元素显示，元素总是存在的。

v-if:通过控制dom来控制元素的显示和隐藏,如果一开始条件为false,元素是不存在的。

什么时候使用v-show,什么时候使用v-if呢？

如果需要频繁的控制元素的显示与隐藏，建议使用v-show. 从而避免大量DOM操作，提高性能。

而如果某个元素满足条件后，渲染到页面中，并且以后变化比较少，可以使用v-if