1小时入门Vue

时间  2019-12-05
标签 小时 入门 vue 繁體版
原文   原文链接

Vue基础语法

输出hello world

首先在一个标准html中建立一个vue.js，而后引入，最终代码以下：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script src="./vue.js"></script>
</head>
  <div id="root">{{ content }}</div>
  <script>
    new Vue({
      el: "#root",
      data: {
        content: "hello world"
      }
    })
  </script>
</html>
  • **挂载点：**这里的<div id="root">{{ content }}</div>指的就是vue实例挂载点，由于el中的#id元素是和上面的id是对应的，vue实例只会处理挂载点里面的内容，若是把{{ content }}放在挂载点外，则是无效的。
  • **模版：**在挂载点内部的内容叫作模版，也能够把模版也在实例中：
<div id="root"></div>
<script>
  new Vue({
    el: "#root",
    template: "<h1>{{ content }}</h1>",
    data: {
      content: "hello world"
    }
  })
</script>
  • **实例:**用new Vue能够建立一个实例，而vue就会根据你的挂载点el和template来最终最终的内容，而后把内容放在挂载点上

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

vue指令

数据展现

接下来讲下vue中的指令，上面的hello world咱们能够用指令输出：数组

<div id="root">
  <div v-text="content"></div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      content: "hello world"
    }
  })
</script>
</html>

v-text是<h1>中的内容由content这个变量和指定，他告诉div你显示这个content这个变量，也能够用v-html来写，那他们俩有何区别呢？缓存

<div id="root">
  <div v-text="content"></div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      content: "<h1>hello world</h1>"
    }
  })
</script>

这个例子中你能够将v-text替换成v-html测试下，会发现v-text会直接输出content中的内容<h1>hello world</h1>,进行了转译，而v-html不会将其转译，也就有了<h1>标签的效果dom

绑定指令

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

<div id="root">
  <div v-on:click="handleClick">{{ content }}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      content: "hello"
    },
    methods: {
      handleClick: function () {
        this.content = "world"
      }
    }
  })
</script>
  • 首先是在<div>标签上绑定了click事件，当这个事件被触发的时候，就会调用你定义的handleClick事件，这个方法定义在vue实例中的methods这个对象里，只要把handleClick写在methods，就会自动执行这个方法
  • 由于改变vue中的数据跟咱们以前的直接操做Dom不一样，这里是直接改变数据的：this.content = "world"，由于vue会自动帮你去更新Dom
  • this.content是你在data下定义的content
  • v-on:click能够简写为@click

属性和双向数据绑定

属性绑定

<div>上能够增长title属性，这样就能够在触碰hello world的时候，就会有一个title提示，提示语如何可变呢，咱们能够在data中定义一个title，而后用`v-bind`来和data的数据项(title)进行绑定： ``` <div id="root" v-bind:title="title">hello world</div> <script> new Vue({ el: "#root", data: { title: "i am a title" } }) </script> ``` * `v-bind`能够简写成`:` #### 双向数据绑定性能

<div id="root">
  <div :title="title">hello world</div>
  <input />
  <div>{{ content }}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      title: "i am a title",
      content: "this is a content"
    }
  })
</script>

这里先说下单项绑定，单项绑定的意思，也就是这里的content里的数据是由data 下定义的数据(content)来决定的，可是div这里的内容并不能够改变，也就是数据决定页面的显示，可是页面没法决定你数据里的内容，这里想经过<input>的值来去改变data下content的值，这就须要用到双向绑定的语法:v-model了学习

<div id="root">
  <div :title="title">hello world</div>
  <input v-model="content" />
  <div>{{ content }}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      title: "i am a title",
      content: "this is a content"
    }
  })
</script>

vue中的计算属性和侦听器

计算属性

若是我想实现经过在两个文本框中分别输入姓 和 名，而后在下面的div中显示完整的姓名，由于我学过双向绑定了，我可能会用v-model来去解决这个问题，代码以下：测试

<div id="root">
  姓：<input v-model="firstName" />
  名：<input v-model="lastName" />
  <div>{{ firstName }}{{ lastName }}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      firstName: '',
      lastName: ''
    }
  })
</script>

可是这样写，太复杂了，由于我会用两个插值表达式：{{ firstName }}和{{ lastName }}，那有没有好的方法吗？代码以下：优化

<div id="root">
  姓：<input v-model="firstName" />
  名：<input v-model="lastName" />
  <div>{{ fullName }}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      firstName: '',
      lastName: ''
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName
      }
    }
  })
</script>

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

侦听器

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

<div id="root">
  姓：<input v-model="firstName" />
  名：<input v-model="lastName" />
  <div>{{ fullName }}</div>
  <div>{{ count }}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      firstName: '',
      lastName: '',
      count: 0
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName
      }
    },
    watch: {
      firstName: function() {
        this.count ++
      },
      lastName: function() {
        this.count ++
      }
    }
  })
</script>

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

<div id="root">
  姓：<input v-model="firstName" />
  名：<input v-model="lastName" />
  <div>{{ fullName }}</div>
  <div>{{ count }}</div>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      firstName: '',
      lastName: '',
      count: 0
    },
    computed: {
      fullName: function() {
        return this.firstName + ' ' + this.lastName
      }
    },
    watch: {
      fullName: function() {
        this.count ++
      }
    }
  })
</script>

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

其余一些重要的指令

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

v-if

<div id="root">
  <div v-if="show">hello world</div>
  <button @click="handleCLick">toggle</button>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      show: true
    },
    methods: {
      handleCLick: function() {
        this.show = !this.show
      }
    }
  })
</script>

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

v-show

<div id="root">
  <div v-show="show">hello world</div>
  <button @click="handleCLick">toggle</button>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      show: true
    },
    methods: {
      handleCLick: function() {
        this.show = !this.show
      }
    }
  })
</script>

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

v-for

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

<div id="root">
  <div v-show="show">hello world</div>
  <button @click="handleCLick">toggle</button>
  <ul>
    <li v-for="item in list">{{item}}</li>
  </ul>
</div>
<script>
  new Vue({
    el: "#root",
    data: {
      show: true,
      list: [1, 2, 3]
    },
    methods: {
      handleCLick: function() {
        this.show = !this.show
      }
    }
  })
</script>
  • 这里的v-for="item in list"换成v-for="item of list"是同样的效果，都是能够的

更多文档

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程