vue.js模块开发教程 vue.js app开发

原创

jacksky 2023-05-23 10:29:28 ©著作权

文章标签 APP Vue.js Vue html javascript 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者jacksky的原创作品，请联系作者获取转载授权，否则将追究法律责任

APP开发-Vue.js学习教程（一）

一、Vue.js是什么

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与[现代化的工具链以及各种[支持类库]结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、上手

我们通过一个最简单的“hello vue”例子来入手：

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

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

我是在hbuilderx上运行的，运行结果上页面出现'Hello Vue!'字样，那么让我们看看这段代码的核心：

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

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

每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下：

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

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为app，在 div 元素中：

<div id = "app"></div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。找到了id作为入口，就需要研究如何定义数据对象了。data 用于定义属性，实例中有一个属性为：message；让我们再看一个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="vue_det">
			<h1>site:{{site}}</h1>
			<h1>url:{{url}}</h1>
			<h1>{{details()}}</h1>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#vue_det',
				data: {
					site:"hello world!",
					url:"www.fishpad.com",
					alexa: '10000'
				},
				methods:{
					details:function(){
						return this.site + "-学的不仅是技术，更是梦想！";
					}
				}
			})
		</script>
	</body>
</html>

这里，data定义了三个属性，分别为：site、url、alexa，而methods则是一个新知识，用于定义函数，可以通过return来返回函数值，{{ }} 用于输出对象属性和函数返回值。因此运行结果为：

site:hello world!
url:www.fishpad.com
hello world!-学的不仅是技术，更是梦想！

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。再举一个不一样的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="vue_det">
			<h1>site:{{site}}</h1>
			<h1>url:{{url}}</h1>
			<h1>Alexa:{{alexa}}</h1>
		</div>
		<script type="text/javascript">
			var data = {site:"我是菜鸡",url:"www.fishpad.com",alexa:10000}
			var vm = new Vue({
				el:'#vue_det',
				data:data
			})
		</script>
	</body>
</html>

到这一步结果显示：

site:我是菜鸡
url:www.fishpad.com
Alexa:10000

下面对代码进行一定更改：

<script type="text/javascript">
			var data = {site:"我是菜鸡",url:"www.fishpad.com",alexa:10000}
			var vm = new Vue({
				el:'#vue_det',
				data:data
			})
			//它们引用相同的对象！
			document.write(vm.site==data.site)//true
			document.write("<br>")
			//设置属性也会影响到原始数据
			vm.site = "chicken"
			document.write('<br>')
			document.write(data.site + '<br>')//chicken
			data.alexa = 1234
			document.write('<br>')
			document.write(vm.alexa)//1234
		</script>

结果为：

site:chicken
url:www.fishpad.com
Alexa:1234
true

chicken

1234

这段代码应该很好理解，当属性的值发生改变时，html 视图将也会产生相应的变化。

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。举个例子：

<script type="text/javascript">
			var data = {site:"我是菜鸡",url:"www.fishpad.com",alexa:10000}
			var vm = new Vue({
				el:'#vue_det',
				data:data
			})
			document.write("<br>")
			document.write(vm.$data)
			document.write("<br>")
			document.write(vm.$data===data)//true
			document.write('<br>')
			document.write(vm.$el)
			document.write('<br>')
			document.write(vm.$el===document.getElementById('vue_det'))//ture
		</script>

将<script>中内容改为如上代码，显示的结果为：

site:我是菜鸡
url:www.fishpad.com
Alexa:10000

[object Object]
true
[object HTMLDivElement]
true

之所以出现：[object Object]和[object HTMLDivElement]的原因是vm.$data是一个对象，vm.$el也是一个对象，确切的说是一个HTMLDivElement对象，你直接输出它时，它只能输出这个对象的数据类型【】，这时候看到的是对象toString以后的结果。简单的说，你看到的是这个对象的数据类型，而不是你想像中的数据本身，这个对象有一些属性和方法可以让你使用的。

三、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

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

html

可以使用 v-html 指令用于输出 html 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<div v-html="message"></div>
		</div>
		<script>
			new Vue(
			{
				el:'#app',
				data:{
					message:'<h1>hello world!</h1>'
				}
			})
		</script>
	</body>
</html>

结果为：

hello world!

属性

HTML 属性中的值应使用 v-bind 指令，举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.class1{
			background: #444;
			color: #eee;
		}
	</style>	
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
			<br><br>
			<div v-bind:class="{'class1': use}">
				v-bind:class 指令
			</div>
		</div>
		<script>
			new Vue(
			{
				el:'#app',
				data:{
					use:false
				}
			})
		</script>
	</body>
</html>

当点击修改颜色后面的框时，下面的词条变颜色。

表达式

在body中写入如下代码：

<div id="app">
			{{1+2}}<br>
			{{ok ? 'yes' : 'no'}}<br>
			{{message.split('').reverse().join('')}}
			<div v-blind:id="'list-'+id">fishpad</div>
		</div>
		<script>
			new Vue(
			{
				el:'#app',
				data:{
					ok:true,
					message:'123456',
					id:2
				}
			})
		</script>

Vue.js 都提供了完全的 JavaScript 表达式支持。

指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：

<div id="app">
			<p v-if="seen">现在你可以看到我</p>
		</div>
		<script>
			new Vue(
			{
				el:'#app',
				data:{
					seen:true
				}
			})
		</script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
		    <pre><a v-bind:href="url">这是阿饼的博客，欢迎学技术的同学来访！</a></pre>
		</div>
		    
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    url: 'https://www.cnblogs.com/knight-errant-dr/'
		  }
		})
		</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件，在这里参数是监听的事件名。举个例子：

<div id="app">
			<p>{{message}}</p>
		    <button v-on:click="reverse_n">来来来，点击试一试</button>
		</div>
		<script>
		    new Vue({
		        el: '#app',
		        data: {
		            message: 'Hello'
		        },
		        methods: {
		            reverse_n: function () {
		                // 获取message变量值将其转换成数组，逆转后再链接，再赋值给message
		                this.message = this.message.split('').reverse().join('')
		            }
		        }
		    })
		</script>

通过v-on绑定click事件，点击button时就会触发事件，vue中的事件函数都卸载methods属性中。其中v-on:click可以缩写成@click，即使用@代替v-on。

修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()，阻止默认事件，什么叫默认事件，例如a标签的href跳转，浏览器的F5刷新。这些都是属于默认事件。我们可以通过.prevent阻止默认事件：

<form v-on:submit.prevent="onSubmit"></form>

举个例子：

<div id="app">
		    <form v-on:submit.prevent="onSubmit">
		      <input type="submit">
		    </form>
		    <!-- 也可以只有修饰符 
		    <form v-on:submit.prevent>
		      <input type="submit">
		    </form>
		  </div>-->
		  <script>
			  new Vue({
				  el:"#app",
				  methods:{
					  onSubmit:function(){
					  	console.log('submit');
					  }
				  }
			  })
		  </script>

用户输入

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定，举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<p>{{message}}</p>
			<input v-model="message">
		</div>
		<script>
			new Vue(
			{
				el:'#app',
				data:{
					message:"fishpad"
				}
			})
		</script>
	</body>
</html>

结果中，当input框中的'fishpad'改变时，{{message}}也随之改变。

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

同样的，按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应，举个例子，以下实例在用户点击按钮后对字符串进行反转操作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
		    <p>{{ message }}</p>
		    <button v-on:click="reverseMessage">反转字符串</button>
		</div>
		    
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    message: 'hello!'
		  },
		  methods: {
		    reverseMessage: function () {
		      this.message = this.message.split('').reverse().join('')
		    }
		  }
		})
		</script>
	</body>
</html>

过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。举个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
		    <p>{{ message|capitalize }}</p>
		</div>
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    message: 'hello!'
		  },
		  filters: {
		    capitalize: function (value) {
		      if(!value) return ''
			  value = value.toString()
			  return value.charAt(0).toUpperCase() + value.slice(1)
		    }
		  }
		})
		</script>
	</body>
</html>

该段代码实现了对输入的字符串第一个字母转为大写，这里对两个方法作出介绍：

value.charAt(0)//取字符串的第一个字符
value.slice(1)//从字符串第二个字符开始到最后

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

v-blind缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

四、Vue.js 条件语句

条件判断

v-if语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
		    <p v-if="seen">现在你看到我了</p>
		    <template v-if="ok">
		      <h1>hello world!</h1>
		      <p>阿饼最帅</p>
		      <p>哈哈哈</p>
		    </template>
		</div>
		    
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    seen: true,
		    ok: true
		  }
		})
		</script>
	</body>
</html>

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块，下面的例子随机生成一个数字，判断是否大于0.5，然后输出对应信息：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id='app'>
			<div v-if="Math.random()>0.5">
				123
			</div>
			<div v-else>
				456
			</div>
		</div>
		<script>
		new Vue({
		  el: '#app'
		})
		</script>
	</body>
</html>

v-else-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id='app'>
			<div v-if="message==='1'">
				1
			</div>
			<div v-else-if="message==='2'">
				2
			</div>
			<div v-else-if="message==='3'">
				3
			</div>
			<div v-else>
				no no no!
			</div>
		</div>
		<script>
		new Vue({
		  el: '#app',
		  data:{
			  message:'2'
		  }
		})
		</script>
	</body>
</html>

v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

五、Vue.js 循环语句

循环使用 v-for 指令。v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。v-for 可以绑定数据到数组来渲染一个列表：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
			<ol>
				<li v-for="site in sites">
					{{site.name}}
				</li>
			</ol>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					sites:[
						{name:'tom'},
						{name:'jerry'},
						{name:'lisa'}
					]
				}
			})
		</script>
	</body>
</html>

<ol>标签定义了一个有序列表，列表排序以数字来显示。使用<li>标签来定义列表选项。

模板中使用 v-for：

<div id="app">
		  <ul>
		    <template v-for="site in sites">
		      <li>{{ site.name }}</li>
		      <li>--------------</li>
		    </template>
		  </ul>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					sites:[
						{name:'tom'},
						{name:'jerry'},
						{name:'lisa'}
					]
				}
			})
		</script>

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据：

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'fishpad',
      url: 'https://www.cnblogs.com/knight-errant-dr/',
      slogan: 'hello world！'
    }
  }
})
</script>

也可以提供第二个的参数为键名：

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

结果显示为：

name : fishpad
url : https://www.cnblogs.com/knight-errant-dr/
slogan : hello world！

第三个参数为索引：

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

0.name : fishpad
1.url : https://www.cnblogs.com/knight-errant-dr/
2.slogan : hello world！

v-for 迭代整数

v-for 也可以循环整数，举个例子：

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

结果显示为：

六、Vue.js 计算属性

计算属性关键词: computed。计算属性在处理一些复杂逻辑时是很有用的。可以看下以下反转字符串的例子：

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

上面这个模板变的很复杂起来，也不容易看懂理解。接下来我们看看使用了计算属性的实例：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
		  <p>原始字符串：{{message}}</p>
		  <p>反转后字符串：{{reversemessage}}</p>
		</div>
		<script>
			new Vue({
				el:'#app',
				data:{
					message:'阿饼最帅'
				},
				computed: {
					reversemessage:function() {
						return this.message.split('').reverse().join('')
					}
				},
			})
		</script>
	</body>
</html>

声明了一个计算属性 reversemessage。提供的函数将用作属性 reversemessage 的 getter。reversemessage 依赖于 message，在 message发生改变时，reversemessage 也会更新。

computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

computed setter

computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app">
		  <p>{{site}}</p>
		</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					name:'阿饼',
					url:'https://www.cnblogs.com/knight-errant-dr/'
				},
				computed: {
					site:{
						get:function(){
							return this.name + ' ' + this.url
						},
						set:function(value){
							var names = value.split('')
							this.name = names[0]
							this.url = names[names.length - 1]
						}
					}
				},
			})
		</script>
	</body>
</html>

这段代码输出为：

阿饼 https://www.cnblogs.com/knight-errant-dr/

然而做简单的修改后：

<script>
			var vm = new Vue({
				el:'#app',
				data:{
					name:'阿饼',
					url:'https://www.cnblogs.com/knight-errant-dr/'
				},
				computed: {
					site:{
						get:function(){
							return this.name + ' ' + this.url
						},
						set:function(value){
							var names = value.split(' ')
							this.name = names[0]
							this.url = names[names.length - 1]
						}
					}
				}
			})
			vm.site = "阿饼最帅 https://www.cnblogs.com/";
			document.write('name:'+vm.name);
			document.write('<br>');
			document.write('url:'+vm.url);
		</script>

显示结果为：

阿饼最帅 https://www.cnblogs.com/

name:阿饼最帅
url:https://www.cnblogs.com/

从实例运行结果看在运行 vm.site = "阿饼最帅"时，setter 会被调用， vm.name 和 vm.url 也会被对应更新。

七、Vue.js 监听属性

我将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。下面举一个通过使用 watch 实现计数器：

<div id = "app">
		    <p style = "font-size:25px;">计数器: {{ counter }}</p>
		    <button @click = "counter++" style = "font-size:25px;">点我</button>
		</div>
		<script type = "text/javascript">
			var vm = new Vue({
			    el: '#app',
			    data: {
			        counter: 1
			    }
			});
			vm.$watch('counter', function(nval, oval) {
			    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
			});
		</script>

以下实例进行千米与米之间的换算：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id = "computed_props">
		    千米：<input type="text" v-model="kilometers">
			米：<input type="text" v-model="meters">
		</div>
		<p id="info"></p>
		<script type = "text/javascript">
			var vm = new Vue({
			    el: '#computed_props',
			    data: {
			        kilometers:0,
					meters:0
			    },
				methods:{
				},
				computed:{
				},
				watch:{
					kilometers:function(val){
						this.kilometers = val;
						this.meters = this.kilometers*1000; 
					},
					meters:function(val){
						this.kilometers = val/1000;
						this.meters = val;
					}
				}
			});
			vm.$watch('kilometers', function(newvalue, oldvalue) {
			    document.getElementById("info").innerHTML = "修改前值为：" + oldvalue + "修改后值为：" + newvalue;
			})
		</script>
	</body>
</html>

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。

当我们在输入框输入数据时，watch 会实时监听数据变化并改变自身的值。

有些同学可能对于vm.$watch('kilometers', function(newvalue, oldvalue) 中的新值和旧值有些疑惑，但是看完下面关于watch的介绍，相信大家就明白了：

//第一种方法：用于不需要配置项，只需一个handler
watch:{
key:function(newval,oldval){},
"obj.key":function(newval,oldval){}
}
//key为所要监视的属性名（名称要与data中的一致对应）
//newval与oldval为自动传过去参数，不需要手动传，newval为当前属性改变后的值，oldval为当前属性改变前的值
//第二种方法:需要配置项
watch:{
key:{
    deep:false,
    handler(newval,oldval){}
    },
"obj.key":{
    deep:false,
    handler(newval,oldval){}
    }
}
第一种是为data对象中普通的属性添加监视器时：
data:{
message:'i love china'
},
watch:{
message:function(){}
}
第二种则是为data中对象的属性添加监视器时：
data:{
    obj:{
        messgae:'i love china'
        }
}.//在想要监听的数据是一对象中的属性时则需要使用第二种方法
watch:{
    "obj.message":function{}
}

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Java json用api接口 jsonobject api

下一篇：java io输出所有文件内容 java 输出到文件

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯