0
点赞
收藏
分享

微信扫一扫

Vue封装思想，插值语法，事件，参数等

微笑沉默 2022-01-20 阅读 67
vue.js前端javascript

Vue01

前端开发技术的发展过程

  • 最早期: 原生DOM 配合 JS 进行网页的操作
  • 发展: 利用封装技巧 把原生DOM封装成 jQuery 框架
    • 目前: 大量市场份额 被 vue 抢占 – 目前较少, 大多数旧项目维护
  • 现在:
    • 从2009年, 出现了第一款工程化框架 – Angular -- Google
    • 2013年, 出现了第二款框架 – React -- Facebook
    • 2014年, 国产的框架 – Vue -- 开源 作者 尤雨溪
      • 目前在国内占据 大份额市场

Vue

核心思想的对比:

  • jQuery思想: write less, do more 写的少做的多
    • 利用函数封装技巧, 简化DOM操作的代码
  • Vue思想: 不写DOM操作, 一样操作DOM

官方文档: https://cn.vuejs.org/v2/api/

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

  • vue1: 已经淘汰了
  • vue2: 目前主流版本 – 本阶段主要讲解
  • vue3: 未来的趋势 – 本阶段后续讲解

vue的开发方式有两种:

  1. 脚本方式, 类似于jQuery 通过引入脚本 – 适合新手入门
  2. 脚手架方式: 高度自动化/高度工程化的方式, 适合实际开发

脚本地址: https://cn.vuejs.org/v2/guide/installation.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OFg6uuya-1642606234405)(Vue01.assets/image-20220113144202609.png)]

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>Document</title>
  </head>
  <body>
    <div id="box"></div>

    <script>
      var data = { msg: null }
      // vue思想: 监听对象中属性的变化, 当属性发生修改时, 同步更新此属性相关的DOM元素
      Object.defineProperty(data, 'msg', {
        // 为 data 的msg属性, 添加赋值监听 set
        // data.msg = 值/value
        set(value) {
          console.log('msg被赋值为:', value)
          // 更新到 id=box 的元素里
          box.innerHTML = value
        },
      })

      //书写此代码, 就可以让自动更新文本到 id=box 元素里
      data.msg = 'Hello Vue!'
    </script>
  </body>
</html>

插值语法

<!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>
  </head>
  <body>
    <!-- id名称随意, 但是习惯写 app -->
    <div id="app">
      <!-- 之前模板字符串中, 用 ${} 代表JS代码范围 -->
      <!-- vue中使用 {{}} 代表JS代码范围 -->
      <div>{{ 8 * 9 }}</div>
      <!-- {{}} 中可以使用 data 中的数据项 -->
      <div>{{msg}}, {{name}}</div>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      // vue进行了更完善的封装, 自动化操作DOM
      // 写法都是固定格式, 必须 背!!!
      // 配置项: 都是固定配置, 各有各的含义
      const options = {
        // element的缩写el: 元素,  #app 代表 id='app'
        // vue管理 id='app' 的元素
        el: '#app',
        // 数据项: 固定属性,  只有存储在这个属性中的内容才能在HTML中显示
        data: { msg: 'Hello', name: '高达' },
      }
      // 创建vue对象, 参数是配置项
      new Vue(options)
    </script>
  </body>
</html>

插值语法

<!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>
  </head>
  <body>
    <div id="app">
      <!-- <h1>春节假期: 29~6</h1> -->
      <!-- 插值语法: {{}} -->
      <div>姓名: {{ename}}</div>
      <div>年龄: {{eage}}</div>
    </div>
    <script src="./vendor/vue.js"></script>
    <script>
      var a = new Vue({
        el: '#app', //要管理的元素
        // data: 数据项,  内部的值随便写
        data: { ename: '亮亮', eage: 22 },
      })
      // 通过打印输出可以看到:  data中的数据项, 会被自动添加 get/set 监听器,  实现数据变化  更新DOM的效果
      console.log(a)
    </script>
  </body>
</html>

事件

<!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>
  </head>
  <body>
    <div id="app">
      <!-- 原生语法: οnclick="函数名()" -->
      <!-- vue1.0版本: v-on:click="函数名" -->
      <!-- vue2.0版本: @click="函数名" -->
      <button @click="hit">打{{name}}</button>
      <button @click="hitGD">打高达</button>
      <button @click="hitGreen">绿小绿</button>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: { name: '亮亮' },
        //固定属性: methods 用于存放函数
        methods: {
          // 原格式  属性名: 函数
          // hit: function () {},
          // 语法糖:
          hit() {
            console.log('亮亮说: 好疼...')
          },
          hitGD() {
            console.log('打高达...')
          },
          hitGreen() {
            console.log('绿...绿...')
          },
        },
      })
    </script>
  </body>
</html>

事件的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>Document</title>
  </head>
  <body>
    <div id="app">
      <button @click="add1">{{num}}</button>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      var a = new Vue({
        el: '#app',
        data: { num: 5 },
        methods: {
          add1() {
            // 函数的this: 其执行时所在的对象
            // this指向 当前 new Vue() 得到的对象
            // Vue底层会把 methods中方法抽离出来, 放在自身
            console.log('this:', this)
            // !!!切记: 通过打印来看this的结构,才是真实的数据格式,  num书写在data中, 但是运行时并不在
            this.num++
          },
        },
      })

      console.log(a)
    </script>
  </body>
</html>

事件练习

<!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>
  </head>
  <body>
    <div id="app">
      <div>单价: ¥9999</div>
      <!-- disabled=true 代表不可用 -->
      <!-- 新语法: 属性的JS语法 -->
      <!-- vue1.0: v-bind:属性名="JS代码" -->
      <!-- vue2.0: :属性名="JS代码" -->
      <!-- 切记: 不写:,  属性名="值"  这个值是字符串类型 -->
      <!-- num是1 , 则num==1 是true,  不可用就是真 -->
      <!-- num不是1, num==1 是false, 不可用就是false, 代表可用 -->
      <button @click="jian1" :disabled="num==1">-</button>
      <b>{{num}}</b>
      <button @click="jia1">+</button>
      <div>小计: ¥ {{9999 * num}}</div>
      <!-- vue底层侦测到属性变化时, 会自动更新相关所有的DOM元素 -->
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: { num: 5 },
        methods: {
          // 不要用箭头函数: this指向不同, 会出现问题
          jian1() {
            this.num--
          },
          jia1() {
            this.num++
          },
        },
      })
    </script>
  </body>
</html>

属性

<!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>
  </head>
  <br>
    <div id="app">
      <!-- 不带: 是HTML代码, 引号中是普通字符串 -->
      <li title="title">{{title}}</li>
      <!-- vue1语法:  v-bind:属性名="JS代码" -->
      <!-- vue2语法:  :属性名="JS代码" -->
      <li :title="title">{{title}}</li>
      <hr />
      <li title="9*9">9*9</li>
      <li :title="9*9">9*9</li>
      <!-- !!!注意: {{}}是双标签内容中使用, 不支持在属性里书写, 属性需要用 :语法 -->
      <li title="{{9*9}}">9*9: {{9*9}}</li>

      <input :placeholder="title" />

    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: { title: '高达来了' },
      })
    </script>
  </body>
</html>

事件参数

<!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>
  </head>
  <body>
    <div id="app">
      <div>{{num}}</div>
      <!-- 不带参数的函数, 可以省略() -->
      <!-- 带参数: -->
      <button @click="add(1)">+1</button>
      <button @click="add(2)">+2</button>
      <button @click="add(3)">+3</button>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: { num: 5 },
        methods: {
          // 参数n 是要添加的数字
          add(n) {
            this.num += n
          },
        },
      })
    </script>
  </body>
</html>

参数练习

<!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>
  </head>
  <body>
    <div id="app">
      <p>高达的妻子是: {{name}}</p>
      <button @click="chooseWife('迪丽热巴')">迪丽热巴</button>
      <button @click="chooseWife('古力娜扎')">古力娜扎</button>
      <button @click="chooseWife('马尔扎哈')">马尔扎哈</button>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: { name: null },
        methods: {
          chooseWife(name) {
            this.name = name
          },
        },
      })
    </script>
  </body>
</html>

参数练习

<!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>
  </head>
  <body>
    <div id="app">
      <div>价格: {{price}}</div>
      <button @click="changePrice(100)">100</button>
      <button @click="changePrice(500)">500</button>
      <button @click="changePrice(1000)">1000</button>
      <div>数量: {{count}}</div>
      <!-- shift+字母 是大写 -->
      <button @click="changeCount(10)">10</button>
      <button @click="changeCount(20)">20</button>
      <button @click="changeCount(30)">30</button>
      <p>总价格: {{price * count}}</p>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: { price: 0, count: 0 },
        methods: {
          changePrice(value) {
            this.price = value
          },
          changeCount(value) {
            this.count = value
          },
        },
      })
    </script>
  </body>
</html>

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>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script>
      // 大概说明下: new Vue() 做了什么
      function Vue(options) {
        // 源代码中: 固定读取 options.el
        this.$el = document.querySelector(options.el)
        // 源代码中固定读取: data属性名
        for (let key in options.data) {
          // 遍历 data 对象的属性, 挨个保存到当前 vue对象里
          this[key] = options.data[key]
        }

        for (let key in options.methods) {
          this[key] = options.methods[key]
        }
      }

      var a = new Vue({
        // 为什么说是固定属性: el
        el: '#app',
        // 固定的data属性: 因为源代码中读取的是data
        data: { num: 4, name: '亮亮' },
        methods: {
          add1() {},
          add2() {},
        },
      })

      console.log(a)
    </script>
  </body>
</html>

作业

  • 点击 + 和 - 可以修改数量, 后方的 总价格要随着变化
  • 数量为1时, 减法按钮不可点击
  • 点击 -100 和 +100 可以修改单价, 注意最上方的单价不要随着变化
    • 所以: 你需要两个与价格有关的属性, 分别存储 上下 两个单价
  • 点击 修改价格 按钮, 可以把单价更新到 上方的价格里

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ucbAkFQV-1642606234407)(Vue01.assets/image-20220113180934379.png)]

为什么说是固定属性: el
el: ‘#app’,
// 固定的data属性: 因为源代码中读取的是data
data: { num: 4, name: ‘亮亮’ },
methods: {
add1() {},
add2() {},
},
})

  console.log(a)
</script>


## 作业

- 点击 + 和 - 可以修改数量,  后方的 总价格要随着变化
- 数量为1时, 减法按钮不可点击
- 点击 -100 和 +100 可以修改单价,  注意最上方的单价不要随着变化
  - 所以: 你需要两个与价格有关的属性,  分别存储 上下 两个单价
- 点击 修改价格 按钮, 可以把单价更新到 上方的价格里

[外链图片转存中...(img-ucbAkFQV-1642606234407)]
举报

相关推荐

【Vue】大悟！模板语法-插值语法&指令语法

Vue插值数据绑定Java后端开发yyds干货盘点

【Vue】基础系列（二）Vue模板语法-插值语法-指令语法

vue.js前端javascripthtml插值编程语言

Vue基础知识(一) - 插值语法

日记本vueVue前端开发那些事儿前端开发

09Vue - 模板语法（插值-文本）

插值数据html

mustache插值语法操作

vue.js前端javascript

姓名案例（插值语法）

html插值h5系统/运维

1.Vue模板语法有2大类（插值语法和指令语法）

vue.jsjavascript前端

vue插值操作（二）

vue.js

Vue 模板语法 插值操作 绑定属性 计算属性 事件监听 条件判断 循环遍历 阶段案例

vue.js前端javascriptVue声明式编程JavaScript前端开发

vue事件传递参数

前端javascript开发语言
0 条评论