Vue.js(一)

45 阅读7分钟

一.在学习vue之前,我们需要知道什么是vue

“Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。”

如果说我们使用html,css,js去构建一个商业化的项目,我们可以把这个过程比喻成--修房子,那么我们用原生三剑客来作为我们的工具我们需要一砖一瓦,这栋房子里的每一块砖,需要我们自己去砌,灰需要自己去打,你不能说他不好,只是前端发展到目前阶段,对于商业项目来说我们需要的是快速开发,如果我们使用vue来作为工具,那么我们只需要有一张设计图,那么剩下的事情vue会帮我们搞定。

换句话说,我们不在需要去操作页面元素的dom,而只需要把精力放在处理业务逻辑上,大大减少了我们的工作量。

多提一嘴,我向来是觉得对初学者来说,在学习框架时,你不需要了解他的底层是怎么工作的,框架只是工具,我们只需要知道工具怎么用,而不需要知道他为什么要这么用。就好比汽车的发动机,可能大部分人一辈子都不会知道发动机的工作原理,可是他影响你开车吗,很显然不会。

首先我们在正式学习vue之前需要一些前置知识

  • html,css;能够使用html+css构建页面
  • javascript;了解dom与bom
  • 会使用百度搜索及解决问题

二.那么我们开始吧

  • 新建vue对象
  • 数据绑定
  • 事件绑定
  • 表单数据绑定

1.引入vue.js

新建html文件,并引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

添加一个div,id为myvue

<div id="myvue"></div>

新建vue实例,在js中书写

var myVue = new Vue({
  el:"#myvue"
})

做完以上步骤你的代码会是这样

<html>
<head>
  <title>Vue Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
  <div id="muvue">
  </div>
</body>
<script type="text/javascript">
  var myVue = new Vue({
      el: "#myvue"
  })
</script>
</html>

至此我们已经成功的在页面上引入了vue框架 代码解释: js变量 myVue 就是Vue创建的一个对象,可以理解成把<div id="firstVue></div>和这个标签里面包含的所有DOM都实例化成了一个JS对象, 这个对象就是myVue

el是Vue的保留字,用来指定实例化的DOM的ID号, #firstVue这句话就是标签选择器,告诉Vue要实例化ID=“firstVue”的这个标签。

至此,Vue.js框架在html页面的引入工作完成,但是如果我们访问这个页面并不能看到任何效果,一篇空白。

2.数据绑定

vue官方的说法是vue的数据流是单向的,也就是总是从vue实例 ---> dom对象。 那么现在我们想要在页面上显示hello!word!。 在id为myvue的div中写入{{message}}

这个双大括号的语法叫做mustache 语法,大括号里面的是作为变量形式出现的。

 <div id="myvue">{{message}}</div>

此时,浏览器会渲染这个变量到页面,并不是我们想要的hello!word!,此时我们就需要数据绑定,把massage这个变量与vue实例中的数据进行绑定

  var myVue = new Vue({
    el:"#myvue",
    data:{
      message:'hellow!word!',
    }
  })

data参数用来绑定VUE实例的数据变量,每个不同变量之间用逗号分隔,上面我们绑定了自定义变量message,并赋初值'hello!word!'

完成数据绑定工作,<div>标签里的{{message}}数据会随着myVue实例里的message数据的变动而变动,浏览器查看当前页面,会出现'hello!word!'字符串,说明数据绑定成功。

2.1属性绑定 同样的,我们不仅可以在data中绑定mustache中的变量,也可以在data中绑定html标签,中的属性的属性值,说人话就是,标签的属性值也可通过变量来绑定,如通过input标签的type属性,更改表单空间的类型

  <input v-bind:type="inputType">
  <button>点击显示密码</button>
  var myVue = new Vue({
    el:"#myvue",
    message:"hellow!word!",
    inputType:"password"
  })

image.png

v-bind:后面写想要绑定的属性,inputType也不需要用两个大括号括起来了,直接写就可以了,然后在VUE实例中声明这个绑定数据。 凡是标签拥有的属性都可以用v-bind进行绑定,简写为:type="inputType"

此时,页面审查元素可以看到inputtype类型已经变成了password

image.png

至此我们就完成了数据与属性绑定

3.事件绑定

为了实现我们的点击显示密码功能,那么我们就必须给按钮绑定点击事件,v-on就可以绑定事件

给按钮绑定点击事件

<button v-on:click="change">点击显示密码</button>

在method中定义点击事件的方法

  var myVue = new Vue({
    el:"#myvue",
    data:{
      message:'hellow!word!',
    },
    methods:{
      //这里放所有的方法
    }
  })
  methods:{
   change:function () {
     this.inputType="text" //修改data中的inputType变量为text
       }
     }

image.png

同上面的v-bind一样,v-on可以绑定任何的事件,如mouseover,doubleclick等等,v-on:可简写为@。

3.表单数据绑定

之前有说Vue这个框架是单向数据传输的,就是从vue实例传送数据到DOM ,那么我们如何从DOM中实时获取用户输入的数据赋值给vue实例呢

这用到了Vue.js提供给用户的一个语法糖 v-model ,这个语法糖通过两步实现了数据的反向传递,也就是从DOM传送给vue实例数据。

下面说的原理看不懂可以跳过,不会影响后续阅读

v-model 通过两步实现了数据反向传递:
第一步,绑定了DOM标签的input事件(比如叫tapInput())

第二步,当用户进行输入时候,触发tapInput()函数,tapInput()函数内部读取此DOM标签的Value值,赋值给vue实例

通过以上两步,v-model语法糖实现了vue数据的反向传输

通过给表单控件标签加v-model="变量名"来实现表单控件的数据绑定,那么绑定的既然也是一个变量,那么也是要在data中进行声明。

 <input v-bind:type="inputType" v-model="input_value" />
  data:{
    input_value:"",
  }

完整到吗如下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="input_value" />
            <div>{{input_value}}</div>
        </div>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    input_value: "555",
                },
            });
        </script>
    </body>
</html>

可以发现,我们增加了一个<input>标签,并且用v-model语法绑定了之前定义的变量input_value

这个时候,当我们在<input>输入框输入值的时候,v-model会实时将最新值(value)赋值给vue实例的input_value变量,而input_value变量又通过mustache语法将实时展现在<div>标签中

这样我们看起来实现了这么一个数据流:

DOM1(input标签)——>VUE——>DOM2(p标签)

先从用户输入的DOM1获取输入保存在VUE实例,用从VUE实例里拿到数据输出到DOM2

运行这个页面,发现<div>标签中的内容会随着<input>标签实时的变化,说明我们利用v-model语法变相实现了数据的双向传递

结语

1.引入vue.js

2.创建vue实例

  var app = new Vue({
    el:"#app" //将哪个标签挂在到Vue实例
    data:{
      //存放数据
    },
    methods:{
      //存放方法
    }
  })

3.数据绑定

  {{message}} //双大括号里面的变量为双向数据绑定的变量,会在页面上显示为对应的data中的同名变量
  v-bind:hidden
  data{
    message:'哈哈哈'
  }

4.事件绑定

    change: function () {
                    this.inputType = "text";
                },
     //v-on: || @click

5.表单控件双向数据绑定

input v-bind:type="inputType" v-model="input_value" />
//v-model

到此未知,其实我认为学会上诉的内容,已经能够说你会vue了,因为vue本来就是一个渐进式的框架,也就是说框架里的很多内容在你不需要使用的时候也不会影响我们页面的其他功能,而只需要在你需要用的时候加上就ok,前端的东西多且杂,东拼西凑总也不是进步的办法,我认为最好就是将主干的一支学明白用在实际项目中,其他的一些枝枝叉叉遇见了现看文档也是来得及的。