Vue.js基础-01-Vue实例和Vue表达式（实例化，常用选项el/data/methods/computed/filter/watch，实例属性）

玄德公笔记

已于 2022-11-19 00:01:48 修改

阅读量755

点赞数 1

分类专栏： # vue框架学习文章标签： vue.js 前端 javascript Vue框架

于 2022-05-12 21:37:16 首次发布

本文链接：https://blog.csdn.net/xingzuo_1840/article/details/124729018

版权

vue框架学习专栏收录该内容

19 篇文章 5 订阅

订阅专栏

1. 从一段代码说起

1.1 第一段代码

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>crow_yuan</title>
  <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>{{ message }}</p>
  </div>

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

效果

Hello Vue.js!

1.2 Vue的使用说明

从示例中我们可以看到，Vue的使用有两部分：

Vue表达式
{{ }} 中即是Vue的表达式
Vue实例
new Vue({}) 是我们将Vue实例化。

2. Vue实例

2.1 Vue 实例化

语法示例

var vm = new Vue({
  // 选项
})

完整示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>crow song</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<div id="vue_det">
		<h1>name : {{name}}</h1>
		<h1>urla : {{url}}</h1>
		<h1>{{description()}}</h1>
	</div>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#vue_det',
			data: {
				name: "玄德公",
				url: "https://blog.csdn.net/xingzuo_1840?type=blog",
			},
			methods: {
				description: function() {
					return  this.name + "：开发+运维 的技术笔记";
				}
			}
		})
	</script>
</body>
</html>

{{ }} 用于输出对象属性和函数返回值。

2.2 常用选项

上例中我们可以找到 Vue实例中的属性，常用属性如下：

- el

指定了 DOM 元素中的 id，该Vue实例可以在指定id的DOM的元素中被使用

在上面实例中，el选项指明了该Vue实例可以在 id 为 vue_det的DOM元素中使用。

- data

用于定义属性

上例中有2个属性分别为：name、url。

- methods （方法）

用于定义的函数，可以通过 return 来返回函数值。

我们将在后边的文章中说明

- computed（计算属性）

主要是对原数据进行改造输出。

我们将在后边的文章中说明

- filter（过滤器）

用于过滤字符或传递数据

我们将在后边的文章中说明

- watch

主要用于监测data中的数据变化

我们将在后边的文章中说明

2.3 实例属性

2.3.1 用户自定义属性

说明

上文可知，我们可以在Vue实例中的data选项中定义属性和属性值

示例（修改对象属性/原始数据）

关羽初始设定，势力是魏，攻击力100。
修改Vue实例的 “势力属性”为蜀 ，原始值中势力的值也变为蜀
修改原始数据中攻击力值为 120，Vue对应属性值也变为120.

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CROW SONG</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>姓名 : {{name}}</h1>
        <h1>势力 : {{belong}}</h1>
        <h1>attack : {{attack}}</h1>
    </div>
    <script type="text/javascript">
    var data = { name: "关羽", belong: "魏", attack: 100}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 比较属性值vm.belong 和原始数据 data.belong
    document.write("比较属性和原始数据：",vm.belong === data.belong,"<br>","<br>")

    // 修改属性值，原始数据改变
    vm.belong = "蜀"
    document.write("千里走单骑，势力改变："+data.belong + "<br>"+"<br>") // Runoob

    // 修改原始数据，对象属性值改变。
    data.attack = 120
    document.write(vm.attack)
    </script>
</body>
</html

显示结果

不管从属性或者原始数据中修改，其结果都是一样的。

在这里插入图片描述

2.3.2 实例选项的属性

说明

Vue实例的选项也可以作为属性取值，
用前缀 $和用户定义的属性区分开来。

完整示例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CROW SONG</title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
    <div id="vue_det">
        <h1>姓名 : {{name}}</h1>
        <h1>势力 : {{belong}}</h1>
        <h1>attack : {{attack}}</h1>
    </div>
    <script type="text/javascript">
    var data = { name: "关羽", belong: "魏", attack: 100}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })

	document.write(vm.$data === data) // true
	document.write("<br>")
	document.write(vm.$el === document.getElementById('vue_det')) // true
	</script>
</body>
</html>

3. Vue 表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。我们写在DOM元素的{{}}中

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>CROW YUAN</title>
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<style>
  .class1 {
    background: #444;
    color: #eee;
  }
</style>

<body>
  <div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:class="'class' + id">{{message}}</div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        ok: false,
        message: '鸦啼正落花',
        id: 1
      }
    })
  </script>
</body>

</html>

结果显示

玄德公笔记

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue.js基础-01-Vue实例和Vue表达式（实例化，常用选项el/data/methods/computed/filter/watch，实例属性）

1. 从一段代码说起1.1 第一段代码1.2 Vue的使用说明2. Vue实例2.1 Vue 实例化语法示例完整示例2.2 常用选项- el- data- methods （方法）- computed（计算属性）- filter（过滤器）- watch2.3 实例属性2.3.1 用户自定义属性说明示例（修改对象属性/原始数据）2.3.2 实例选项的属性说明完整示例3. Vue 表达式.........
复制链接

扫一扫