前言: 说起Vue我们先来了解一下前端的发展历史

WEB开发简介

WEB前端开发的发展历程

远古时代: HTML + CSS 静态页面
JS出现: 让页面可以动态变化, 带有一些逻辑操作 -- DOM
jQuery- 2006年: 利用封装技巧简化DOM的操作
Angular - 2009年: WEB前端三大框架之一 -- 占有率在国内很低
React - 2013年 : WEB前端三大框架之一 -- 目前极其活跃
Vue - 2014年: WEB前端三大框架之一 -- 目前国内占率第一

Vue

定位: 生产力工具

优点: 搬砖使用 -- 开发项目挣钱, 码农专属

缺点: 对个人的技术能力毫无提升

Vue发展到现在分三个版本:

Vue1: 淘汰
Vue2: 过渡期间
Vue3: 最新主推版本

Vue的学习和使用: 很简单但是又很难

简单: 固定的语法固定的作用很容易理解
难: 语法太多了

官方文档: Vue.js

当然, 这就是Vue的作者大大啦, 国人骄傲

Vue的开发方式分两种:

脚本模式: 类似jQuery, 通过引入脚本来完成开发 -- 适合入门阶
脚手架模式: 生产场景中使用, 专业的工程化开发模式

我们先来用脚本方式来了解简单的语法问题

插值语法

DOM操作分3种方案

原生方案: 类似笔算
jQuery: 类似计算器, 需要人工操作
Vue: 类似智能装甲, 人工智能辅助完成一切操作

Vue是一个智能助手, '自动化'完成一切DOM操作

而我们要学的新语法就是: { { }}两个花括号, 这就是我们接下来要说的插值语法, 类似模板字符串中的${ }的写法, 但是它允许在 HTML 的标签内容中, 书写 JS 代码;

我们先来看代码片段, 再来一个一个解释

<!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>插值语法</title>
</head>

<body>
  <div id="box">
    <div>9 + 9</div>
    <div>{
   
   {9 + 9}}</div>
    <div>name: {
   
   {name}}</div>
    <div>phone: {
   
   {phone}}</div>
    <div>address: {
   
   {address}}</div>
    <div>suibian: {
   
   {suibian}}</div>
    <div>时间: {
   
   {new Date()}}</div>
  </div>

  <script src="./vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#box', 
      data: {
        name: "小明",
        phone: '13593934444',
        address: "中国大陆",
        suibian: '相亲要求: 随便'
      }
    })
  </script>
</body>

</html>

这就是Vue中最简单的操作了, 我们来解释一下, 如果想要使用Vue, 那就要去官网下载一个Vue脚本来使用, 然后再来引入, 第二步就是要 new 出来一个Vue, 下方我来解释一下

new: 用于触发构造函数, 创建出对象;

Vue: 类似一个生产智能机器人的工厂;

new Vue(): 下订单, 生产一个机器人;

参数: 个性化配置 -- 固定选项, 需要查看官方api才能知道, https://v2.cn.vuejs.org/v2/api/, 选项: 可选的配置项;

可以去官方查看一些 API 的操作, 我们先来解释一下Vue里面的一些配置项

el: 指定当前vue对象服务的 DOM元素, 值是 id选择器;

所以要指定哪个盒子里面的东西, 就像上方代码中的 el: '#box',

data: 用于存储使用到的各种数据, 数据最终会存储在生成的 vue 对象中, 我们打印一下来看看

可以看到, 都是存储在_data里面, 我们要来说一下, 这个_data 和 data 是一回事, 作者写了一个大概这样的一个语法, var _data = data, 它们的值都是一样的

然后上方HTML代码中谁使用, 谁就用 { { }} 插值语法, 把data里面的数据呈现在页面就可以了, 我们来看页面内容:

可以看到都呈现在页面去了, 这就是插值语法

事件语法

vue1语法: v-on:事件名="JS代码" ;

vue2语法: @事件名="JS代码"

自动化数据驱动: 当数据变化时,自动更新相关的DOM元素

<!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>事件</title>
</head>

<body>
  <div id="box">
    <div>num:{
   
   {num}}</div>
    <button v-on:click="num++">+1</button>
    <button @click="num++">+1</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    new Vue({
      el: '#box',
      data: { num: 5, price: 99 }
    })
  </script>
</body>

</html>

上方代码给 button 按钮绑定了一个事件, 代码中写了两个 v-on:click 是Vue1中的写法, 而 @click 是Vue2的写法, 都可以使用的, 点击按钮让 num 的加1, 我们先把 num 中的值用 { { }} 来展现在页面上, 然后在绑定的事件中, 使用就可以了

methods

methods: 用于存放函数, 最终保存在 vue 对象里

创建vue对象就跟炒菜一样, 提前备料: 不同的盘子里放不同的食材, 最后放到一起炒制....

下面我们就先来看一下代码

<!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>事件</title>
  </head>

  <body>
    <div id="app">
      <button @click="show">Click Me</button>
      <button @click="show()">Click Me</button>
      <hr />
      <button @click="add(8,11)">8+11</button>
    </div>

    <script src="./vue.js"></script>
    <script>
      var v = new Vue({
        el: "#app",
        methods: {
          show() {
            alert("我是show");
          },
          // 带参数
          add(x, y) {
            alert(`${x} + ${y} = ${x + y}`);
          },
        },
        // 最终保存在 vue 对象里
        data: {
          num: 1,
        },
      });

      console.log(v);
    </script>
  </body>
</html>

在 Vue 中不推荐把复杂的JS代码书写在HTML中, 然而就可以起个名字, 把复杂的 JS代码书写在methods中就可以了, 如果不需要传参, 可以省略() -- 作者提供的语法糖福利, 带参数的不能省略(),methods 与 el 与 data 都是同一级的, 所以都在同一级书写, 而 methods 里面有一个语法糖, 那就是完整格式 show: function(){}, 可以简化为 show() {} 就可以了, 而带参数的, 直接写在小括号里面就可以了, 最终都会保存在 Vue 原型里的;

this

说到 Vue中的this, 我们先来看一下前面我们说的this

this的含义

- 函数()

- 非严格: window

- 严格: undefined

- 对象.函数() : 对象

- new 函数() : 实例对象

- 箭头函数 : 自身没有, 通过作用域链原则就近查找

而Vue中的this , 我们来看一下

<!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>this</title>
</head>

<body>
  <div id="app">
    <button @click="add1">{
   
   {num}}</button>
  </div>

  <script src="./vue.js"></script>
  <script>
    var v = new Vue({
      el: '#app',
      data: { num: 1 },
      methods: {
        add1() {
          console.log('this:', this)
          this.num++
        }
      }
    })

    console.log(v)
  </script>
</body>

</html>

上方代码, 点击按钮 num 的值+1, 而在事件触发后, add1函数最终存储在vue对象里, 所以add1使用时, 其this就是vue对象

通过打印可以看到, this就是当前Vue的示例对象

今天就先说到这里吧, 又开始发烧了感觉难受, 明天再来

Vue介绍Day01

WEB开发简介

Vue

插值语法

事件语法

methods

this

猜你喜欢