vue.js基础特性

pan135246

已于 2023-12-03 23:18:30 修改

阅读量378

点赞数 7

文章标签： vue.js

于 2023-12-03 22:43:48 首次发布

本文链接：https://blog.csdn.net/pan135246/article/details/134772017

版权

学习指南

本章将学习 Vue.is 的基础特性。Vue.is 不仅改善了前端的开发体验，还极大地提高了开发效率。为了更好地理解并掌握 Vue.js 的使用方法，本章将对 Vue.is 的基础特性进行介绍，主要包括 Vue 实例的创建、模板、data 初始数据的定义、methods 方法的定义、Vue 实例的生命周期、常用指令、事件修饰符、v-model 双向数据绑定以及计算属性与监听属性等内容，并通过几个实例进行案例演示。

本章的学习重点

Vue 实例
常用指令
事件修饰符

vue实例常用到的构造选项

常用的构造选项

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

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

使用el 绑定DOM元素

[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>

  <script>

  var app = new Vue({

  el: "#app",

  data: {

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

}

})

  </script>

2、函数（Function）的形式

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

  <script>

  var app = new Vue({

  el: "#app",

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

            data(){

              return {

                name:'张三',

                age:18

              }

          },

             // 另一种写法

// data:function() {

  // return {

  // name: '张三',

  // age: 18,

  // sex: '男'

  // }

  // },

})

  </script>

[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>

[常用指令]

概述：

指令(Directives)是Vue.js模板中最常用的一项功能，HTML元素仅仅是界面的呈现，若还需要和Vue实例进行交互，就需要用到Vue.js的指令。在Vue.js中，指令必须写在HTML元素中，以前缀v-开头，后缀用来区分指令的功能，前缀和后缀通过短横线连接，它是Vue实例数据与用户界面之间的纽带。

Vue.js内置了很多指令，帮助开发者快速完成常见的DOM操作，譬如显示与隐藏、循环渲染等等，需要先了解一些常用的指令，如v-text、v-html、v-cloak、v-bind、v-on等。