一些基础特性

minyulin

已于 2024-01-05 15:44:54 修改

阅读量340

点赞数 11

文章标签： vue.js javascript 前端

于 2024-01-05 15:31:54 首次发布

本文链接：https://blog.csdn.net/minyulin/article/details/135410489

版权

vue实例常用到的构造选项

1.el

唯一根标签，决定Vue实例会管理哪一个DOM节点

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

以下是一个简单的示例：

2. data（数据对象）

data概述：

data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1、对象（Object）的形式:

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

var app = new Vue({

el: "#app",

data: {

content: "Mustache表达式通过data为对象获取content的值"

}

})

</script>

2、函数（Function）的形式:

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

var app = new Vue({

el: "#app",

// 这是下面function的简写形式

data(){

return {

name:'张三',

age:18

}

// 另一种写法

// data:function() {

// return {

// name: '张三',

// age: 18,

// sex: '男'

// }

// },

})

</script>

以下是一个简单的使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="changeMessage">Change Message</button>
    </div>

    <script>
        // 创建 Vue 实例
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue!'
            },
            methods: {
                changeMessage: function() {
                    this.message = 'Hello, World!';
                }
            }
        });
    </script>
</body>
</html>

3.methods 方法

概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示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>

1、第一步引入vue.js

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

</head>

<body>

2、第二步

   <div id="app">

  <div>

{{msg}}

  <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>

  

  <button v-on:click="btnClick">点击</button>

  

  

  </div>

  </div>

  <script>

3、第三步

  var app = new Vue({

  el: "#app",

  data: {

  msg: "旧文本"

},

// 页面的点击事件都需要放到  methods 里面

  methods:{

  btnClick(){

  this.msg="新文本"

}

}

})

  </script>

</body>

</html>

4.computed(计算属性）

概述：为了让模板的语法看起来更加的简洁，同时不影响代码和内容的可用性，Vue.js框架提出了计算属性和监听属性。

一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：

下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。

以下是一个简单的示例：

<template>
  <div>
    <p>The sum of {{ number1 }} and {{ number2 }} is {{ sum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      number1: 3,
      number2: 5,
    };
  },

  computed: {
    sum() {
      return this.number1 + this.number2;
    },
  },
};
</script>

5.components

实现vue实例的子组件。

以下是一个简单的示例：

<div>

<h1>{{ message }}</h1> <MyComponent />

</div>

</template>

export default {

name: 'App',

components: {

MyComponent

data() {

return {

message: 'Hello Vue!'

};

}

};

</script>

6.filter（过滤器）

概述：在Vue.js中提供了一种过滤器，它可以对数据进行过滤处理，它的作用一般是用于一些常见的文本格式化，即修饰文本，并根据过滤的条件返回需要的结果，过滤器通常由管道符"|"进行标识。

过滤器一般可以用在两个地方：双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。

当全局过滤器和局部过滤器重名时，会采用局部过滤器。

过滤器函数必须接收表达式的值 (之前的操作链的结果) 作为第一个参数。

以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <title>Vue filters示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <input v-model="message" placeholder="输入文本">
    <p>原始文本：{{ message }}</p>
    <p>反转文本：{{ message | reverse }}</p>
    <p>大写文本：{{ message | uppercase }}</p>
  </div>

  <script>
    Vue.filter('reverse', function(value) {
      return value.split('').reverse().join('');
    });

    Vue.filter('uppercase', function(value) {
      return value.toUpperCase();
    });

    new Vue({
      el: '#app',
      data: {
        message: ''
      }
    });
  </script>
</body>
</html>

7.watch(监听属性)

监听数据变化，观察和响应 Vue 实例上的数据变动。

以下是一个简单的示例，演示了如何使用watch生成一个Vue实例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Vue Watch Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <p>Current Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        increment: function() {
          this.count++;
        }
      },
      watch: {
        count: function(newValue, oldValue) {
          console.log('Count changed from ' + oldValue + ' to ' + newValue);
          if (this.count >= 10) {
            alert('Count is now greater than or equal to 10');
          }
        }
      }
    });
  </script>
</body>

</html>