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

介绍

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 项目环境的步骤:

  1. 全局安装 vue-cli:npm install --global vue-cli

  2. 进入你的项目目录,创建一个基于 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 回车;

  3. 进入项目:cd vue-demo,安装依赖:npm install

    安装成功后,项目文件夹中会多出一个目录: node_modules

  4. npm run dev,启动项目。



🔗:

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值