Vue基础-模板语法

methods方法绑定this

发了一个简单的大纲(Vue中的基础)

查看Vue的源码

什么是npm,提到webpack的时候会提到npm

通过克隆的方式来进行下载的

git checkout vue的版本

这里进行一个版本的切换,对于dev进行一个打包的操作

这里完成这样的一个东西是有好处的

在这里有一个methods 对象

如果在methods里面使用一个箭头函数的话,this就会指向window 对象

这个跟this的绑定规则有关

这里会在上层作用域中进行查找this

在箭头函数中不绑定this的

const foo = function() {

}

foo() // 这里进行调用的话就是window了

根据调用的位置判断this的指向

1 显示绑定 2 隐式绑定 3 call apply bind 绑定 4 构造函数

这里打印的是obj对象中的bar() 方法

这里是隐式的绑定

跟所在的位置没有关系,而是根据被谁调用来决定的

window 进行一个显示的绑定,这里的window是没有的

这里打印的就是obj的对象了

对于我们这里返回的数据进行一个数据的代理

其实绑定就是主键的代理对象了

遍历通过bind 来绑定this

methods中this的指向问题

这里底层是做了一个bind的操作用来改变this的指向

这里是使用ts进行了一个断言的操作

搞前端很大一部分的程序员没有掌握this的指向问题

! 是一个ts的语法,将这里的两个东西搞清楚就可以了

这里就是methods方法绑定this的一个问题

vscode创建代码的片段

snippet-generator.app/

使用这样的一个网站更加方便代码的生成

将想要生成代码块的代码填到左边,就会生成代码片段

这里是一个小的技巧(了解)

将jsx 这样的一个语法编译成 js 这样的一种语法

一般使用的是js的模板语法

DOM 和底层空间实例的数据绑定在一起

会使用@click的语法,统称为模板语法

Mustche 双大括号语法

如果我们希望将数据显示到模板(template) 中

使用最多的就是mustche这样的一种语法

如果在里面写上值的话,里面就会进行计算

如果在里面进行一个函数的调用

这里就是对我们这样的一个内容进行一个翻转

methods: {}

我们在里面进行一个调用的操作

我们也可以去执行这样的一个函数

computed 计算属性

这里还可以写三元运算符

? :

如果这里显示的话就会进行选择的操作

图片切换案例

图片1 :

图片2:

案例结果:

两个图片之间进行来回的切换

<!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>
  <style>
    .image {
      width: 100px;
      height: 100px;
      margin-top: 20px;
    }
    .button {
      margin-top: 40px;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@3"></script>
  <template id="ip">
    <div>选择图片:</div>
    <div class="button">
      <button @click="getButtonOne">选择1</button>
      <button @click="getButtonTwo">选择2</button>
    </div>
    <div class="button">
      您选择的图片的地址是:{{image}}
    </div>
    <img class="image" :src="image" alt="">
  </template>
  <script>
    Vue.createApp({
      template:'#ip',
      data()
      {
        return {
           image:'image/fw.jpg'
        }
      },
      methods:{
        getButtonOne()
        {
          this.image = 'image/fw.jpg'
        },
        getButtonTwo()
        {
          this.image = 'image/ganzhou.jpg'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

我们可以在多个项目中使用mustche语法

有一些用法是无法正常显示的

不能使用这样的操作

var name = 100 这个是一种赋值语句

这里并不是一个if语句,而是一个表达式了

这两种写法都是不可以的

这里的写法是非常的灵活的

模板里面的第一个语法,mustache语法

v-once的使用

v-text指令

一般使用mustache语法,会把内容覆盖掉

v-html

如果我们需要让Vue解析html的话,使用v-html指令

v-pre

跳过解析mustache的值,以最原始的方式进行解析

v-cloak

渲染到浏览器上面的时候还没有进行解析的操作,会先显示{{message}}

渲染后转变成xxx

属性选择器

如果渲染后会将css样式清除

通过组件的这样的一种方式,它是有兼容的

调用app.use,可以把user这样的api进行一个重构

componts 这样的api

浏览器会解析template 但是不会渲染

v-bind的绑定属性

某些时候我们想要动态的绑定属性

比如动态绑定a元素的href属性;

比如动态绑定img元素的src属性;

绑定属性使用v-bind

缩写使用 : (语法糖)

这里使用的非常多的

只要往属性里面加东西的话,就是使用v-bind进行绑定

动态绑定一个或者是多个值或者是组件

v-on & v-bind 的使用

在Vue2 中只能有一个根元素

在Vue3 中允许有多个根元素

可以使用变量进行展示,这样就可以动态的进行绑定了

这里为v-bind 有一个简写模式,前面使用:

Vue在模板中进行动态的解析 src 和 :src 是不一样的

动态绑定class

这里会动态的来绑定属性的,这里我们就可以动态绑定class 来进行改变

完成这样的一个功能

绑定class有两种方式:

1 对象语法

2 数组语法

第一个要讲的就是对象语法

点击按钮改变颜色案例

<!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>
  <style>
    .red {
      color:red;
    }

    .blue {
      color:blue;
    }

    .orange {
      color:orange;
    }
  </style>
</head>
<body>
  <div id="li">

  </div>
  <!--使用的模板 -->
  <template id="app">
    <div>点击一下按钮改变颜色</div>
    <div>
      <button @click="getButtonRed">红色</button>
      <button @click="getButtonBlue">蓝色</button>
      <button @click="getButtonOrange">橙色</button>
    </div>
    <div :class="color">
       {{message}}
    </div>
  </template>
  <!-- 通過CDN的方式導入 -->
  <script src="https://unpkg.com/vue@3">

  </script>

  <script>
    Vue.createApp({
      template:'#app',
      data()
      {
        return {
          message:'行和',
          color:''
        }
      },
      methods:{
        getButtonRed()
        {
          this.color = 'red';
        },
        getButtonBlue()
        {
          this.color = 'blue';
        },
        getButtonOrange()
        {
          this.color = 'orange'
        }
      }
    }).mount('#li')
  </script>
</body>
</html>

案例效果

class 和 :class是可以同时存在的

其实它们就是做了一个结合

这里也可以减掉

数组这里可以加上三元的有运算符

来进行判断

绑定style可以使用属性,也可以使用一个对象

可以使用驼峰命名法进行拼接

:style 绑定这样的一个obj对象

这里也可以绑定一个数组,绑定style这样的一个语法就讲完了

:class

:value

:style

当我们使用:style的时候

我们可以用驼峰命名法或者是将内容括起来

'font-size' : '30px'

'fontSize' : '30px'

也可以使用下面这样的一种

sizePage 是变量

'font-size' : 'sizePage' + 'px'

动态绑定属性

我们自定义属性名和属性值

key : value

我们使用到组件的时候,这里就有用了

绑定一个对象

通过v-bind 来绑定一个对象

将所有的值绑定在上面

v-bind = '对象'

后面要封装高阶组件的时候,使用到v-bind这样的东西

Element-Plus 这样的一个框架

v-bind 直接绑定一个对象是使用的非常的多的

:=对象,这样写可读性太差了...

前端的话对于用户的交互的一个事件

使用v-on 指令

具体用法就是绑定用户的一个监听

语法糖的用法

使用@来进行事件的监听

click 这里绑定一个表达式

在这里具体的绑定一个对象,(如果有多个事件的话)

v-on 的参数传递

只要在dom里面点击,拖拽,都会产生event对象

在调用对象的时候会返回两个参数

必须是 $event,'coderwhy',这里的$ 是一个固定的语法

并且$event需要写在最前面,只需要在后面传进参数就可以了

修饰符相当于对事件进行了一些特殊的处理

对于div的一个打印操作

这里会阻止事件的冒泡

默认情况下按下所有件都会在这里执行

如果在这里敲了一下enter键抬起的话

对于输入框的作用

v-on 传递参数 | v-on 修饰符

具体案例的演练

target 目标

Vue3的基础语法