Vue基础语法

输出hello world

首先在一个标准html中创建一个vue.js，然后引入，最终代码如下：




    
    Vue学习
    

  {{ content }}

挂载点：这里的{{ content }}指的就是vue实例挂载点，因为el中的#id元素是和上面的id是对应的，vue实例只会处理挂载点里面的内容，如果把{{ content }}放在挂载点外，则是无效的。
模版：在挂载点内部的内容叫做模版，也可以把模版也在实例中：

实例:用new Vue可以创建一个实例，而vue就会根据你的挂载点el和template来最终最终的内容，然后把内容放在挂载点上

另外，data中的content是随便定义的，你也可以叫number、msg，都是可以的，然后用{{对应的结果值}}就可以输出了，这种表达式叫插值表达式

vue指令

数据展示

接下来说下vue中的指令，上面的hello world我们可以用指令输出：

v-text是

中的内容由content这个变量和指定，他告诉div你显示这个content这个变量，也可以用v-html来写，那他们俩有何区别呢？

这个例子中你可以将v-text替换成v-html测试下，会发现v-text会直接输出content中的内容

`hello world`

,进行了转译，而v-html不会将其转译，也就有了

标签的效果

绑定指令

如果我想在页面上点击hello，然后让hello变成world，应该如何做呢？这就要用的vue中的v-on指令，代码如下:


  {{ content }}

首先是在
标签上绑定了click事件，当这个事件被触发的时候，就会调用你定义的handleClick事件，这个方法定义在vue实例中的methods这个对象里，只要把handleClick写在methods，就会自动执行这个方法
因为改变vue中的数据跟我们之前的直接操作Dom不同，这里是直接改变数据的：this.content = "world"，因为vue会自动帮你去更新Dom
this.content是你在data下定义的content
v-on:click可以简写为@click

属性和双向数据绑定

属性绑定

上可以增加title属性，这样就可以在触碰hello world的时候，就会有一个title提示，提示语如何可变呢，我们可以在data中定义一个title，然后用v-bind来和data的数据项(title)进行绑定：

hello world

v-bind可以简写成:

双向数据绑定


  hello world
  
  {{ content }}

这里先说下单项绑定，单项绑定的意思，也就是这里的content里的数据是由data 下定义的数据(content)来决定的，但是div这里的内容并不可以改变，也就是数据决定页面的显示，但是页面无法决定你数据里的内容，这里想通过的值来去改变data下content的值，这就需要用到双向绑定的语法:v-model了


  hello world
  
  {{ content }}

vue中的计算属性和侦听器

计算属性

如果我想实现通过在两个文本框中分别输入姓和名，然后在下面的div中显示完整的姓名，因为我学过双向绑定了，我可能会用v-model来去解决这个问题，代码如下：


  姓：
  名：
  {{ firstName }}{{ lastName }}

但是这样写，太复杂了，因为我会用两个插值表达式：{{ firstName }}和{{ lastName }}，那有没有好的方法吗？代码如下：


  姓：
  名：
  {{ fullName }}

这里用到了vue中的computed计算属性，会把两个值(firstName和lastName)来计算一个新值(fullName)，computed有一个好处，就是当你(firstName和lastName)的值如果没发生变化，不会重新计算，那会取上一次计算的缓存值，只有当firstName和lastName其中一个值发生改变的时候，才会重新计算，所以说computed的性能还是很高的

侦听器

如果我有一个需求，当你firstName或者lastName发生改变的时候，在页面下方的一个count值会加1，这要如何做呢，这要用到vue中的侦听器watch，代码如下：


  姓：
  名：
  {{ fullName }}
  {{ count }}

侦听器是我去针对某一个数据的变化，一旦这个数据发生改变，我就可以去watch中去加上我的业务逻辑，但是这样写还是有点复杂，可以这样优化，代码如下：


  姓：
  名：
  {{ fullName }}
  {{ count }}

我去监听一个计算属性的变化

其他一些重要的指令

需求：我有一个div，div中内容是hello world，下方有一个button，button名字叫toggle，我可以通过这个button来控制hello world的显示和隐藏，也就是当有hello world的时候，我点击toggle隐藏，再次点击，就会隐藏

v-if


  hello world

这里会根据show属性为true或者false来进行显示和隐藏，在页面查看元素也就是当为true就删除dom，为false就新增dom

v-show


  hello world

在页面查看元素会发现，v-show是控制了hello world的这个div的显示和隐藏(display属性会变成none)，如果频繁点击，推荐用v-show，因为不会频繁操作dom

v-for

而v-for是当我有一个数据进行循环展示的时候用到的，比如一个数组[1, 2, 3]：


  hello world
  
  
    {{item}}

这里的v-for="item in list"换成v-for="item of list"是一样的效果，都是可以的

更多文档

1小时入门Vue