Vue学习笔记（篇二）——Vue基础语法

布满荆棘的人生 2023-10-08 12:55 59阅读 0赞

### Vue 基础语法 ###

#### 1、Mustache语法 ####

> 形如"< h2 >\{ \{message\}\}< h2 >"的语法格式，称之为Mustache语法
> 
> 注：mustache（胡子/胡须）

#### 2、v-once ####

> 该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
> 
> 该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。

举例代码（练习）：

<div id="app">
        <h2>{
       {message}}</h2>
        <h2 v-once>{
       {message}}</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            message: '呵呵呵'
          },
          methods: {
         }
        });
      </script>

#### 3、v-html ####

> 如果我们直接通过\{ \{\}\}来输出，会将HTML代码也一起输出。
> 
> 但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。
> 
> 如果我们希望解析出HTML展示
> 
> 可以使用v-html指令
> 
> 该指令后面往往会跟上一个string类型
> 
> 会将string的html解析出来并且进行渲染

<div id="app">
        <h2>{
       {url}}</h2>
        <h2 v-html="url"></h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            url: '<a href="http://www.baidu.com">百度一下</a>',
          },
          methods: {
         }
        });
      </script>

#### 4、v-text ####

> v-text作用和Mustache比较相似：都是用于将数据显示在界面中
> 
> v-text通常情况下，接受一个string类型

<div id="app">
        <h2>{
       {message}}</h2>
        <h2 v-text="message">,刘大山！</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            message: 'Hello',
          },
          methods: {
         }
        });
      </script>

#### 5、v-pre ####

> v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
> 
> 比如下面的代码：
> 
> 第一个h2元素中的内容会被编译解析出来对应的内容
> 
> 第二个h2元素中会直接显示\{ \{message\}\}

<div id="app">
        <h1>{
       {message}}</h1>
        <h1 v-pre>{
       {message}}</h1>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            message: 'Hello'
          },
          methods: {
         }
        });
      </script>

#### 6、v-cloak ####

> 在某些情况下，我们浏览器可能会直接显示出未编译的Mustache标签。
> 
> 为了让为编译的mustache显示出来，可使用v-cloak.
> 
> 这个感念不太容易理解，具体通过代码体现：

<head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
        [v-cloak]{
         
          display: none;
        }
      </style>
    </head>
    
    <body>
    
      <div id="app" v-cloak>
        <h1>{
       {message}}</h1>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        //在vue解析之前，div中又一个属性 v-vloak
        //在vue解析之后，div中没有一个属性 v-vloak
        setTimeout(() => {
         
          const app = new Vue({
         
            el: '#app',
            data: {
         
              message: 'Hello',
            },
            methods: {
         }
          });
        }, 2000);
      </script>
    
    </body>

#### 7、v-bind ####

> v-bind 用于绑定一个或多个属性值，或者向另一个组件传递props值
> 
> 在开发中，需要动态绑定的属性例如：图片的链接src、网站的链接href、动态绑定一些类、样式等

例，通过vue实例中的data绑定元素的src和href：

<div id="app">
        
        
        
        <img v-bind:src="imgUrl" alt="">
        <h1><a v-bind:href="baiduUrl">百度一下</a></h1>
        
        <img :src="imgUrl" alt="">
        <h1><a :href="baiduUrl">百度一下</a></h1>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            imgUrl: 'https://img14.360buyimg.com/seckillcms/s250x250_jfs/t1/184564/27/10546/72131/60d137c4Ecbe5e45f/30bcc8ad97d26ab4.jpg',
            baiduUrl: 'https://www.baidu.com'
          },
          methods: {
         
          }
        });
      </script>

##### (1)v-bind绑定class #####

> 很多时候我们希望动态的来切换class，比如：
> 
> 当数据为某个状态时，字体显示红色。
> 
> 当数据另一个状态时，字体显示黑色。
> 
> 绑定class有两种方式：
> 
> 对象语法
> 
> 数组语法

绑定方式：对象语法，对象向语法的含义是class后面跟的是一个对象

例：

> 用法一：直接通过\{\}绑定一个类  
> < h2 :class="\{‘active’: isActive\}">Hello World</ h2>  
> 用法二：也可以通过判断，传入多个值  
> < h2 :class="\{‘active’: isActive, ‘line’: isLine\}">Hello World</ h2>  
> 用法三：和普通的类同时存在，并不冲突
> 
> 注：如果isActive和isLine都为true，那么会有title/active/line三个类  
> < h2 class=“title” :class="\{‘active’: isActive, ‘line’: isLine\}">Hello World</ h2>  
> 用法四：如果过于复杂，可以放在一个methods或者computed中
> 
> 注：classes是一个计算属性  
> < h2 class=“title” :class=“classes”>Hello World< /h2>

绑定方式：数组语法，数组语法的含义是class后面跟的是一个数组

例：

> 用法一：直接通过\{\}绑定一个类
> 
> < h2 :class="\[‘active’\]">Hello World< /h2>
> 
> 用法二：也可以传入多个值
> 
> <h 2 :class=“\[‘active’, ‘line’\]">Hello World</ h2>
> 
> 用法三：和普通的类同时存在，并不冲突
> 
> 注：会有title/active/line三个类
> 
> < h2 class=“title” :class=“\[‘active’, ‘line’\]">Hello World</ h2>
> 
> 用法四：如果过于复杂，可以放在一个methods或者computed中
> 
> 注：classes是一个计算属性
> 
> < h2 class=“title” :class=“classes”>Hello World</ h2>

##### (2)v-bind绑定style #####

> 我们可以利用v-bind:style来绑定一些CSS内联样式。
> 
> 在写CSS属性名的时候，比如font-size
> 
> 我们可以使用驼峰式 (camelCase) fontSize
> 
> 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’
> 
> 绑定stylle有两种方式：
> 
> 对象语法
> 
> 数组语法

绑定方式：数组语法

> :style="\{color: currentColor, fontSize: fontSize + ‘px’\}"
> 
> style后面跟的是一个对象类型
> 
> 对象的key是CSS属性名称
> 
> 对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二：数组语法

> < div v-bind:style="\[baseStyles, overridingStyles\]"></ div>
> 
> style后面跟的是一个数组类型  
> 多个值以，分割即可

#### 8、计算属性 ####

> 我们知道，在模板中可以直接通过插值语法显示一些data中的数据。
> 
> 但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示
> 
> 比如我们有firstName和lastName两个变量，我们需要显示完整的名称。
> 
> 但是如果多个地方都需要显示完整的名称，我们就需要写多个\{ \{firstName\}\} \{ \{lastName\}\}
> 
> 我们可以将上面的代码换成计算属性：
> 
> OK，我们发现计算属性是写在实例的computed选项中的。

例举：

<div id="app">
        <h2 :style='{
           backgroundColor: "wheat"}'>{
       {firstName+'  '+lastName}}</h2>
        <h2 :style='{
           backgroundColor: "pink"}'>{
       {getFullName()}}</h2>
        <h2 :style='{
           backgroundColor: "tomato"}'>{
       {fullName}}</h2>
      </div>
    
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            firstName: 'Jim',
            lastName: 'Join',
          },
          //计算属性
          computed:{
         
            fullName: function(){
         
              return this.firstName+" "+this.lastName;
            }
          },
          methods: {
         
            getFullName: function(){
         
              return this.firstName+ " " +this.lastName;
            }
          }
        });
      </script>

> 计算属性中也可以进行一些更加复杂的操作，比如：

*  \{ \{show(index)\}\}

### 总价为：\{ \{totalPrice\}\}元 ###

###### 计算属性的setter和getter ######

> 每个计算属性都包含一个getter和一个setter
> 
> 在上面的例子中，我们只是使用getter来读取。
> 
> 在某些情况下，你也可以提供一个setter方法（不常用）。
> 
> 在需要写setter的时候，代码如下：

<div id="app">
        <h2>{
       {fullName}}</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            firstName: 'Join',
            lastName: 'Jim'
          },
          methods: {
         
          },
          computed: {
         
            // 原来的形式
            // fullName: function(){
         
            //   return this.firstName+' '+lastName;
            // }
            // 标准型形式
            // 计算属性一般是没有set方法，只读属性
            fullName: {
         
              set: function(value){
         
                console.log("我被重新赋值了！！！", value);
                let names = value.split(' ');
                this.firstName = names[0];
                this.lastName = names[names.length - 1];
              },
              get: function(){
         
                return this.firstName+" "+this.lastName;
              }
            }
          }
        });
      </script>

###### 计算属性的缓存 ######

> 我们可能会考虑这样的一个问题：
> 
> methods和computed看起来都可以实现我们的功能，
> 
> 那么为什么还要多一个计算属性这个东西呢？
> 
> 原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。
> 
> 我们来看下面的代码：

<div id="app">
        
        <h2 :style = '{backgroundColor: "pink"}'>{
       {firstName}} {
       {lastName}}</h2>
        
        <h2 :style = '{backgroundColor: "aqua"}'>{
       {getFullName()}}</h2>
        <h2 :style = '{backgroundColor: "aqua"}'>{
       {getFullName()}}</h2>
        <h2 :style = '{backgroundColor: "aqua"}'>{
       {getFullName()}}</h2>
        <h2 :style = '{backgroundColor: "aqua"}'>{
       {getFullName()}}</h2>
        
        <h2 :style = '{backgroundColor: "wheat"}'>{
       {fullName}}</h2>
        <h2 :style = '{backgroundColor: "wheat"}'>{
       {fullName}}</h2>
        <h2 :style = '{backgroundColor: "wheat"}'>{
       {fullName}}</h2>
        <h2 :style = '{backgroundColor: "wheat"}'>{
       {fullName}}</h2>
      </div>
      <script src="../js/vue.js"></script>
      <script>
        const app = new Vue({
         
          el: '#app',
          data: {
         
            firstName: 'Join',
            lastName: 'Marry'
          },
          methods: {
         
            getFullName: function(){
         
              // 被调用四次
              console.log("getFullName");
              return this.firstName+ ' ' +this.lastName; 
            }
          },
          computed: {
         
            fullName: {
         
              get: function(){
         
                // 被调用一次
                console.log("fullName");
                return this.firstName+ ' ' +this.lastName;
              }
            }
          }
        });
      </script>

#### 9、事件监听 ####

在前端开发中，我们需要经常和用于交互。

这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等

##### (1)v-on #####

> 这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用
> 
> 下面的代码中，我们使用了v-on:click="counter++”
> 
> 另外，我们可以将事件指向一个在methods中定义的函数