Vue.js(一)：介绍 (附：Vue 实现简单 todo 应用)

最新推荐文章于 2022-10-27 17:23:49 发布

莫亓

最新推荐文章于 2022-10-27 17:23:49 发布

阅读量435

点赞数

分类专栏：阿哈哈哈大前端

本文链接：https://blog.csdn.net/Bule_daze/article/details/103762350

版权

阿哈哈哈大前端专栏收录该内容

66 篇文章 1 订阅

订阅专栏

介绍

Vue 是一个专注于前端 UI 的框架。

它的主要能力是：

声明式绑定。包括数据绑定、事件绑定。
基于组件的编程。让开发者可以把整个应用分为若干组件，从而达到分而治之的目的。

实例

🌰：counter

有一个标签显示数字 0，当点击按钮 “+”，数字会每次加 1。

<template>
  <div>
    <span>{{count}}</span>
    <button @click="inc">+</button>
  </div>
</template>
<script>
export default {
  name: "count",
  data() {
    return {
      count: 0
    };
  },
  mounted() {},
  methods: {
    inc() {
      this.count++;
    }
  }
};
</script>
<style scoped>
</style>

形如 {{key}} 的符号，是一种特殊的记号，表示的含义是：

从该标签所在的 Vue 实例内的 data 函数返回的对象内，查找名为 ‘key’ 的项目值，把这个值拿来填充 {{key}} 所占据的位置的内容。

这样 {{count}} 最终定位得到返回对象，{count: 0} ，从而得到值 0，并使用 0 填充到 <span> 标签的内容上。

然而 Vue.js 的数据绑定不仅仅意味着把 this.count 的值显示出来，也意味着当 this.count 被修改的时候，<span> 的内容会跟着更新。

这就是响应式编程，具体的魔法由Vue内部完成。开发者只要通过 {{}} 形式的声明，告诉 Vue 说，“我的这块内容应该显示 Vue 实例内的某个数据，并且当 Vue 实例数据更新时，这里的显示也要更新”即可。

Vue 实例做的另外一件事，是托管了 data() 返回的数据对象。数据对象的访问本来的做法应该是：

this.$data.count

因为 Vue 实例的托管，你可以通过：this.count 访问达到 data 对象的 count。

@click ，它其实是 v-on:click 的简写。

指令是带有 v- 前缀的特殊 HTML 标签属性。指令的职责就是，当其表达式的值改变时，相应地将某些行为应用到DOM上。以下是指令的更加具体的解释：

指令能接受参数，在指令后以“：”指明。
指令能接受修饰符，是以“.”指明的特殊后缀。
指令能接受属性值，预期是单一JavaScript表达式。

🌰：todo 应用

点击按钮 add，把 input 内的文字作为内容创建一个新的 todo 条目。
点击按钮 X，删除对应的条目。

<template>
  <div id="todo-app">
    <h1>todo app</h1>
    <input type="text" placeholder='new todo' v-model="todo" /><button @click="add">add</button>
    <ul>
      <li v-for="(item, index) in items" :key="item.index">
        {{item}}
        <button @click="rm(index)">X</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "count",
  data() {
    return {
      items: [],
      todo: ""
    };
  },
  mounted() {},
  methods: {
    add: function() {
      if (this.todo) {
        this.items.push(this.todo);
        this.todo = "";
      }
    },
    rm: function(i) {
      this.items.splice(i, 1);
    }
  }
};
</script>
<style scoped>
</style>

更多选项

参数 options 是一个对象，可以选择如下选项：

data 函数成员
methods 对象成员
模板 template
挂载元素 el
生命周期钩子
props 属性声明
computed 计算成员
watch 监视成员

选项：watch 监视

watch 监视是一个对象，键是需要观察的表达式，值可以是：

回调函数
方法名
包含选项的对象

可以使用 回调函数，来监视一个值的变化，像是这样：

<div id="demo">
  <button @click="change">change</button>
  <pre>{{ $data }}</pre>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    thing: 1
  },
  watch: {
    thing: function (val, oldVal) {
        alert('a thing changed')
      }
  },
  methods: {
    change: function () {
      this.thing  = 5
    }
  }
})
</script>

通过 方法名，可以把 watch 的函数移到 methods 内，像是这样：

<div id="demo">
  <button @click="change">change</button>
  <pre>{{ $data }}</pre>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    thing: 1
  },
  watch: {
    thing: 'changed'
  },
  methods: {
    changed:function (val, oldVal) {
        alert('a thing changed')
      },
    change: function () {
      this.thing  = 5
    }
  }
})
</script>

在 watch 成员内的监视代码，等同于执行了$watch 函数。因此以下代码其实和上一个案例等效：

<div id="demo">
  <button @click="change">change</button>
  <pre>{{ $data }}</pre>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    thing: 1
  },
  mounted(){
    this.$watch('thing',function(val, oldVal){
        alert('a thing changed')
    })
  },
  methods: {
    change: function () {
      this.thing  = 5 
    }
  }
})
</script>

采用 包含选项对象的模式，还可以监视数组内对象的变化，像是这样：

<div id="demo">
  <button @click="change">change</button>
  <pre>{{ $data }}</pre>
</div>
<script>
new Vue({
  el: '#demo',
  data: {
    things: [{foo:1}, {foo:2}]
  },
  watch: {
    things: {
      handler: function (val, oldVal) {
        alert('a thing changed')
      },
      deep: true
    }
  },
  methods: {
    change: function () {
      this.things[0].foo = 5
    }
  }
})
</script>

选项：computed 计算成员

计算属性内幕

🌰：
有一个 input 可以输入货币值，另外一个 span 会把货币加上一 ￥ 符号。当货币值变化时，span 会跟着变化：

<div id="app">
  <input v-model="money">
  <span>{{RMB}}</span>
</div>
<script>
  new Vue({
    el:'#app',
    data:{
      money:1.10
    },
    computed:{
      RMB:function(){
        return '￥'+this.money
      }
    }
  })
</script>

这里的 RMB 属性就是一个计算属性，依赖于 this.money，伴随后者的变化而变化。

✍️ 附录：

📖搭建 vue 项目环境的步骤：

全局安装 vue-cli：npm install --global vue-cli。
进入你的项目目录，创建一个基于 webpack 模板的新项目：vue init webpack vue-demo。

说明：
・Project name ⇒ 项目名称；
・Project description ⇒ 项目描述；
・Author ⇒ 作者；
・Vue build ⇒ 打包方式，回车即可；
・Install vue-router ⇒ 是否要安装 vue-router，所以 Y 回车；
・Use ESLint to lint your code ⇒ 是否需要 js 语法检测，目前我们不需要，所以 n 回车；
・Set up unit tests ⇒ 是否安装单元测试工具，目前我们不需要，所以 n 回车；
・Setup e2e tests with Nightwatch ⇒ 是否需要端到端测试工具，目前我们不需要，所以 n 回车；
进入项目：cd vue-demo，安装依赖：npm install。

安装成功后，项目文件夹中会多出一个目录：　node_modules
npm run dev，启动项目。

🔗：

莫亓

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue.js(一)：介绍 (附：Vue 实现简单 todo 应用)

介绍Vue 是一个专注于前端 UI 的框架。它的主要能力是：声明式绑定。包括数据绑定、事件绑定。基于组件的编程。让开发者可以把整个应用分为若干组件，从而达到分而治之的目的。实例????：counter有一个标签显示数字 0，当点击按钮 “+”，数字会每次加 1。<template> <div> <span>{{count}}</s...
复制链接

扫一扫