Vue.js

20220310004

已于 2024-01-06 12:47:15 修改

阅读量919

点赞数 18

文章标签： vue.js 前端 javascript

于 2024-01-03 23:42:01 首次发布

本文链接：https://blog.csdn.net/2301_77163313/article/details/135261599

版权

一、介绍与特点

（1）由尤雨溪2014年开发出来的基于前后端分离模式、用于构建用户界面的渐进式框架。

（2）特点：轻量级：简单、直接；双向数据绑定，即数据驱动视图，视图驱动数据；vue.js提供了方便且高效的组件管理来进行加载公用的模块等等。

Vue.js的开发模式：MVVM

MVVM(Model-View-ViewModel)模式包括3个核心部分：

1.Model(模型）：数据层，主要是从数据库取出经过特定出来后的数据；

2.View（视图）：视图层，即HTML文档的DOM元素，也就是所看到的页面；

3.ViewModel（视图模型）：用于连接视图与数据模型的，负责监听Model或者View的修改。

Vue.js常用开发工具：

1.谷歌浏览器：用于浏览效果、调试代码

2.VS Code:编写代码

3.命令行控制台：执行命令行，学到脚手架项目需要，通过Win+R键，输入cmd可弄

二、vue.js的基础语法

Vue.js入门：

1.下载独立版本“直接引入”Vue.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>Document</title>

    // 第一步：引入vue.js

    <script src="../js/vue.js"></script>

  </head>

  <body>

    // 第二步：创建根节点

    <div id="app">

    </div>

    <script>

       // 第三步：初始化该vue实例，绑定根节点

      var app= new Vue({

        el: "#app",

        data: {

          msg: "第一个vue实例",

        },

      })

    </script>

  </body>

</html>

2.不下载.js文件直接使用CDN引入Vue.js

Vue.js在CDN上有多个可用的选项，你可以选择其中一个来引入Vue.js。以下是一些常见的Vue.js CDN选项：

unpkg CDN：

<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>

cdnjs CDN：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>

jsDelivr CDN：
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
```
以上CDN链接中的版本号是2.6.14，你可以根据需要选择不同的版本。同时，确保将这个<script>标签放在你的HTML文件中<body>标签的末尾，以确保Vue.js在加载时可用。

基础语法：

1.data数据对象：在Vue.js中，`data`是一个数据对象，用于存储组件/实例中的数据。当这些数据发生变化时，Vue.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>data数据对象</title>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">{{content}}</div>

    <script>

        var app = new Vue({
            el: "#app",
  data() {
                return {
                    content: "Mustache表达式通过data为对象获取content的值"
                }
            },

       

        })

    </script>

</body>

</html>

2.vue.js的{{}}文本插值符中表达式的使用：

Vue.js中的文本插值符{{}}可以用于将表达式渲染到视图中。这些表达式可以是任何有效的JavaScript表达式，包括变量、运算符和函数调用等。

以下是一些在Vue.js中使用文本插值符时的示例：

渲染变量：
```
<div id="app">
  {{ message }}
</div>
```

var vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  }
})

在这个例子中，我们使用了{{}}文本插值符来渲染一个变量message。我们定义了一个Vue实例，并在其data对象中定义了一个名为message的属性。这个属性可以通过{{}}插值符访问并渲染到视图中。

2.运算符：

<div id="app">
  {{ message + ' World!' }}
</div>

var vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  }
})

我们使用了{{}}文本插值符来渲染一个表达式，该表达式将变量message与字符串' World!'连接起来。由于这是一个有效的JavaScript表达式，因此Vue.js能够将其正确解析和渲染。

3.函数调用：

<div id="app">
  {{ formatMessage(message) }}
</div>

var vm = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    formatMessage: function (message) {
      return message.toUpperCase()
    }
  }
})

这个例子中，我们使用了{{}}文本插值符来渲染一个表达式，该表达式调用了一个Vue实例中定义的函数。在这种情况下，我们定义了一个名为formatMessage的方法，它将传递给它的字符串message转换为大写字母，并返回结果。

3.methods方法：

直接调用methods方法，在Vue.js中，可以通过methods对象定义一组方法。这些方法可以在组件/实例中直接调用。例如：
```
<div id="app">
  <button @click="sayHello">Say Hello</button>
</div>
```
```
var vm = new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue!')
    }
  }
})
```
我们定义了一个名为sayHello()的方法，并将其添加到Vue实例的methods对象中。然后我们在视图中使用@click指令将该方法绑定到一个按钮上。

当用户单击按钮时，Vue.js会自动调用sayHello()方法，并显示一个警告框。
在js事件中调用methods方法你可以在JavaScript事件处理程序中调用Vue实例中的方法。例如：

<div id="app">
  <button onclick="vm.sayHello()">Say Hello</button>
</div>

var vm = new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue!')
    }
  }
})

3.在这个例子中，我们使用原始的JavaScript onclick 事件处理程序来调用 sayHello() 方法。我们只需要将 vm 对象传递给全局作用域即可。

在Vue事件中调用methods方法

你也可以使用Vue.js提供的事件系统来调用Vue实例中的方法。例如：

<div id="app">
  <button @click="sayHello">Say Hello</button>
</div>

var vm = new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue!')
    }
  }
})

我们使用Vue.js的事件系统来调用sayHello()方法。我们只需要在视图中使用@click指令将该方法绑定到一个按钮上即可。

当用户单击按钮时，Vue.js会自动调用sayHello()方法，并显示一个警告框。

4.增加减少按钮实例，以下是一个使用增加/减少按钮控制数字的简单示例：

<div id="app">
  <p>Number: {{ number }}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    number: 0
  },
  methods: {
    increment: function() {
      this.number++
    },
    decrement: function() {
      this.number--
    }
  }
})

在这个例子中，我们定义了一个名为number的数据属性，并将其初始化为0。然后我们定义了两个方法：increment()和decrement()，分别用于将number属性增加1或减少1。

最后，我们在视图中使用两个按钮来调用这两个方法。当用户单击“+”按钮时，Vue.js会自动调用increment()方法，并将number属性增加1。当用户单击“-”按钮时，Vue.js会自动调用decrement()方法，并将number属性减少1。

4. v-text、v-html：

使用v-text指令进行文本插值

v-text指令用于将数据绑定到元素的文本内容上。它会替换元素原有的文本内容，并将其替换为绑定的数据。

例如，假设有以下HTML代码片段：

<div id="app">
  <p v-text="message"></p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

我们使用v-text指令将message属性绑定到<p>元素的文本内容上。当Vue实例初始化时，message属性的初始值为'Hello, Vue!'。因此，<p>元素的文本内容将被替换为'Hello, Vue!'。

使用v-html指令进行HTML插值

v-html指令用于将数据绑定到元素的HTML内容上。它会将绑定的数据作为HTML解析并替换元素的原始HTML内容。

例如，假设有以下HTML代码片段：

<div id="app">
  <div v-html="htmlContent"></div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    htmlContent: '<strong>Hello, Vue!</strong>'
  }
})

我们使用v-html指令将htmlContent属性绑定到<div>元素的HTML内容上。当Vue实例初始化时，htmlContent属性的初始值为'<strong>Hello, Vue!</strong>'。因此，<div>元素的内容将被解析为<strong>Hello, Vue!</strong>，并以加粗形式显示。

需要注意的是，使用v-html指令时要谨慎，因为它会将绑定的数据作为HTML解析，并且可能导致跨站脚本攻击（XSS）的安全问题。请确保只信任可信任的数据，并进行适当的输入验证和转义，以防止潜在的安全风险。

5. v-bind：

1.动态绑定属性（单向）：

用v-bind指令来动态绑定属性。v-bind指令用于将数据绑定到元素的属性上，实现属性的动态更新。

<div id="app">
  <img :src="imageUrl" alt="Image">
</div>

var vm = new Vue({
  el: '#app',
  data: {
    imageUrl: 'https://example.com/image.jpg'
  }
})

我们使用v-bind指令将imageUrl属性绑定到<img>元素的src属性上。当Vue实例初始化时，imageUrl属性的初始值为'https://example.com/image.jpg'。因此，<img>元素的src属性将被设置为'https://example.com/image.jpg'。

通过使用v-bind指令，我们可以将任何数据绑定到元素的属性上，实现属性的动态更新。这样可以方便地根据数据的变化来更新元素的属性，使其能够及时反映数据的最新状态。

需要注意的是，v-bind指令是单向绑定，即数据的变化会反映到元素的属性上，但元素属性的变化不会反过来修改数据。如果需要实现双向绑定，可以使用v-model指令。

2.动态绑定class--绑定到单个动态类名：

可以使用v-bind指令来动态绑定类名。通过v-bind:class指令，你可以将一个单个的动态类名绑定到元素上。以下是一个示例：

<div id="app">
  <p :class="className">This paragraph has dynamic class</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    className: 'red'
  }
})

使用v-bind:class指令将className属性绑定到<p>元素的类名上。当Vue实例初始化时，className属性的初始值为'red'。因此，<p>元素将拥有red这个类名，样式会被应用。

如果我们想要改变类名，只需要更新className属性的值即可，例如：

vm.className = 'blue';

当className属性的值变为'blue'时，<p>元素的类名也会相应地更新为'blue'，样式会随之改变。

需要注意的是，当你使用v-bind:class指令绑定一个单个的动态类名时，这个类名可以是一个表达式或者计算属性，以便根据不同的条件动态地生成类名。

3.动态绑定class--使用逻辑判断：

使用逻辑判断来动态绑定类名。通过v-bind:class指令的对象语法，你可以根据条件来动态决定元素是否应用某个类名。以下是一个示例：

<div id="app">
  <p :class="{ 'red': isRed, 'blue': isBlue }">This paragraph has dynamic class</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    isRed: true,
    isBlue: false
  }
})

通过v-bind:class指令的对象语法将一个对象传递给class属性。这个对象有两个属性：'red'和'blue'。这两个属性的值分别由isRed和isBlue变量决定。

当isRed为true时，<p>元素会应用red这个类名，样式会被应用。当isBlue为true时，<p>元素会应用blue这个类名，样式会被应用。

你可以根据需要更改isRed和isBlue的值来动态地改变元素的类名和样式。

除了使用布尔值的方式，你还可以使用其他的逻辑判断来动态决定类名的应用。例如，你可以使用三元表达式：

<p :class="{ 'active': isActive }">This paragraph has dynamic class</p>

var vm = new Vue({
  el: '#app',
  data: {
    isActive: true
  }
})

当isActive为true时，<p>元素会应用active这个类名，样式会被应用。

6.v-on事件的绑定：

使用v-on指令来绑定事件。通过v-on指令，你可以监听DOM事件，并在事件触发时执行相应的方法。以下是一个示例：

<div id="app">
  <button v-on:click="handleClick">Click me</button>
</div>

var vm = new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      alert('Button clicked!');
    }
  }
})

使用v-on:click指令将handleClick方法绑定到按钮的点击事件上。当按钮被点击时，handleClick方法会被调用，弹出一个提示框显示"Button clicked!"。

7.v-for基本语法：

<!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="vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- 遍历普通数组 -->
    <ul>
       <!-- item:元素, index:元素索引     -->
      <li v-for="(item,index) of fruit" :key="index">
        {{index+1}} -{{item}} 
      </li>
    </ul>

    <!-- 遍历对象数组 -->
    <ul>
        <!-- item:元素(对象), index:元素(对象)索引     -->
      <li v-for="(item,index) of fruitList" :key="item.Id">
        {{index}}--{{item.name}}--{{item.color}}
      </li>
    </ul>

    <!-- 遍历对象 -->
    <ul>
      <!-- value:属性值,key:属性名,index:属性索引 -->
      <li v-for="(value,key,index) of apple" :key="index">
        {{key}}:{{value}}
      </li>
    </ul>

    <!-- 遍历整数 -->
    <ul>
      <li v-for="count of 10">
        {{count}}
      </li>
    </ul>
  </div>

  <script>
    var vm = new Vue(
      {
        el: '#app',        
        data:{
          //普通数组
           fruit: ['苹果','梨子','香蕉','橘子'],      

           //对象数组        
          fruitList: [
            {Id:1, name: '苹果', color: '红色' },
            {Id:2, name: '梨子', color: '青色' },
            {Id:3, name: '香蕉', color: '黄色' },
            {Id:4, name: '橘子', color: '橘色' },
          ],
          //对象
          apple: { name: "苹果", color:'红色' }
        }
      }
    );  
  </script>
</body>




</html>

7.v-for:

用于在模板中循环渲染数据。它的基础语法为：

<div v-for="(item, index) in items" :key="index">
  {{ item }}
</div>

其中，items是要循环的数组，item表示每个数组元素的值，index表示每个数组元素的索引。:key是必须的，它用于给每个循环渲染的元素添加唯一的标识，以便Vue.js能够更好地追踪它们的状态。

下面是一个简单的示例，演示如何使用v-for循环渲染一个数组中的数据：

<template>
  <div>
    <h2>我的任务清单</h2>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        {{ task }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        '学习Vue.js',
        '学习React',
        '学习Angular',
        '写一个Vue.js组件库'
      ]
    }
  }
}
</script>

我们使用了v-for指令来循环渲染tasks数组中的每个任务。每个任务都显示为一个列表项。注意，我们为每个列表项设置了唯一的:key属性

8.v-model:

双向绑定原理:用于实现表单元素的双向数据绑定。它能够将表单元素的值与Vue实例中的数据进行关联，当表单元素的值发生变化时，Vue实例中的数据也会跟着更新，反之亦然。

<template>
  <div>
    <h2>登录表单</h2>
    <form>
      <label for="username">用户名：</label>
      <input type="text" id="username" v-model="username">

      <label for="password">密码：</label>
      <input type="password" id="password" v-model="password">

      <button @click="login">登录</button>
    </form>

    <p>用户名：{{ username }}</p>
    <p>密码：{{ password }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // 在这里可以使用this.username和this.password进行登录操作
      // 示例中只是简单地打印出来
      console.log('用户名：', this.username);
      console.log('密码：', this.password);
    }
  }
}
</script>

在这个示例中，我们通过v-model指令将表单元素的值与Vue实例中的username和password数据进行了双向绑定。当用户在输入框中输入内容时，表单元素的值会更新到Vue实例的数据中；同时，当Vue实例的数据发生变化时，输入框的值也会被更新。在点击登录按钮后，我们通过this.username和this.password来获取用户输入的用户名和密码，可以进行后续的登录操作。

修饰符:用于对v-model指令进行特定的修饰，以满足不同的需求。下面是几个常用的v-model修饰符及其示例。

.lazy修饰符：默认情况下，v-model会在输入框的input事件触发时立即更新数据。但有时我们希望在失去焦点后再更新数据，可以使用.lazy修饰符。
```
<template>
  <div>
    <h2>延迟更新</h2>
    <input v-model.lazy="message" placeholder="请输入内容">
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>
```
使用了.lazy修饰符来延迟更新数据。当用户输入内容后，数据不会立即更新，而是在输入框失去焦点时才更新到Vue实例的message属性中。
.number修饰符：有时我们需要确保绑定的值是一个数字类型，可以使用.number修饰符。
```
<template>
  <div>
    <h2>数字输入</h2>
    <input v-model.number="count" type="number">
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>
```
使用了.number修饰符来确保绑定的值是一个数字类型。无论用户输入的内容是字符串还是其他类型，最终绑定的值都会被转换为数字。
.trim修饰符：有时我们需要去除输入框前后的空白字符，可以使用.trim修饰符。
```
<template>
  <div>
    <h2>去除空白字符</h2>
    <input v-model.trim="text" type="text">
    <p>{{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    }
  }
}
</script>
```
使用了.trim修饰符来去除输入框前后的空白字符。这样，用户输入的内容将会被自动去除前后的空格。等等

20220310004

关注

18
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

（1）由尤雨溪2014年开发出来的基于前后端分离模式、用于构建用户界面的渐进式框架。（2）特点：轻量级：简单、直接；双向数据绑定，即数据驱动视图，视图驱动数据；vue.js提供了方便且高效的组件管理来进行加载公用的模块等等。Vue.js的开发模式：MVVMMVVM(Model-View-ViewModel)模式包括3个核心部分：1.Model(模型）：数据层，主要是从数据库取出经过特定出来后的数据；2.View（视图）：视图层，即HTML文档的DOM元素，也就是所看到的页面；
复制链接

扫一扫