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

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>

结果显示

posted on 2022-05-12 21:37 运维开发玄德公阅读(34) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue.js基础-05-Vue的常用选项-01-计算选项（computed）、方法选项（methods）、过滤器（filters）

· Vue.js基础-05-Vue的常用选项-02-监听选项（watch）

· 01_初识Vue

· VUE学习笔记

· 01Vue简介

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律

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（过滤器）

- watch

2.3 实例属性

2.3.1 用户自定义属性

说明

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

2.3.2 实例选项的属性

说明

完整示例

3. Vue 表达式

导航

统计

合集

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

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（过滤器）

- watch

2.3 实例属性

2.3.1 用户自定义属性

说明

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

2.3.2 实例选项的属性

说明

完整示例

3. Vue 表达式

导航

统计

合集

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