通过创建第一个Vue应用,初步了解Vue.js的数据与方法


Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。它有两大重要的组成部分:一个是视图,一个是脚本。

一、第一个Vue应用

下面我们来创建第一个Vue应用:

<!--视图-->
<div id="app">
    {{message}}
</div>
//脚本
<script type="text/javascript">
    var app = new Vue({
        el:'#app',
        data:{
            message:'Hello Vue!'
        }
    });
</script>

以下是对这段代码的说明:

  • {{message}}是Vue.js最常见的文本插值的方式
  • var app = new Vue()声明了一个Vue.js的应用对象
  • el:即element,元素属性,通过选择器的方式选定div
  • data:数据属性,视图层中声明了哪些变量,就要在data中注册哪些变量并且赋初值

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:

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

虽然没有完全遵循 MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。

二、数据与方法

当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。举个例子:

<!--视图-->
<div id="app">
    {{a}}
</div>
//脚本
<script type="text/javascript">
    var data = {a:1};
    var vm = new Vue({
        el:"#app",
        data:data
    });
</script>

以下是对这段代码的说明:

  • 属性data和变量data是不一样的,变量data用对象形式来表示的

  • 分几种情况来讨论这段代码:

    • 如何在后面用data.a = "text"来修改a的值,可以达到响应式的效果。当这些数据改变时,视图会进行重渲染。

    • 如果用vm.a = "text"来修改b的值,也可以达到响应式的效果,而且data.a==vm.a

    • 值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。如果需要响应式的效果,必须先声明变量。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:

      data: {
        newTodoText: '',
        visitCount: 0,
        hideCompletedTodos: false,
        todos: [],
        error: null
      }
      
  • 如果使用Object.freeze(),会阻止修改现有的属性,也意味着响应系统无法再追踪变化。

<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。比如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data 
vm.$el === document.getElementById('example') 

三、常用的实例属性和实例数据方法
1、实例属性
属性描述
vm.$data获取属性
vm.$el获取实例挂载的元素
vm.$options获取自定义选项/属性/函数
vm.$refs获取通过ref属性注册的DOM对象

代码实例:

<div>
			<h1>{{msg}}</h1>
			<h2 ref='hello'>Hello</h2>
			<h2 ref='vue'>Vue</h2>
</div>
<script>
		let vm = new Vue({
				el : 'div',
				data : {
					msg : 'sikiedu'
				},
				username : 'joey',
				password : '123',
				login(){
					console.log("login");
				}
			});
			
			/*$.data*/
  		    console.log(vm.$data.msg);
			console.log(vm.msg);
			
			/*$el*/
			console.log(vm.$el);
			vm.$el.style.color = 'red';
 
			/*$options*/
			console.log(vm.$options.username);
			console.log(vm.$options.password);
			vm.$options.login();
			
			/*$refs*/
			console.log(vm.$refs);
			vm.$refs.hello.style.backgroundColor = 'yellow';
			
	</script>
2、实例数据方法
方法描述
vm.$watch观测数据变化
vm.$delete删除属性值
vm.$set设置属性值

delete和set方法的代码实例:

<div>
			Id:<span>{{user.id}}</span><br />
			用户名:<span>{{user.username}}</span><br />
			<button @click="changeUsername">changeUsername</button><br />
			<button @click="addId">addId</button><br />
			<button @click="delId">delId</button>
</div>
<script>
		let vm = new Vue({
				el : 'div',
				data : {
					user : {
						username : 'Joey'
					}
				},
				methods : {
					changeUsername(){
						this.user.username = 'sikiedu-Joey';
					},
					addId(){
						//this.$set(this.user, 'id', 1);  局部的
						//Vue.set(this.user, 'id', 1);   全局的
						
						if(this.user.id){
							this.user.id++;
						}else{
							Vue.set(this.user, 'id', 1);
						}
						console.log(this.user.id);
					},
					delId(){
						if(this.user.id){
							//this.$delete(this.user, 'id');
							Vue.delete(this.user, 'id');
						}
					}
				}
			});
			
	</script>

watch方法代码实例:

<div>
			<input type="text" v-model="msg" /><br />
			msg : <span>{{msg}}</span><br />
			
			<input type="text" v-model="num" /><br />
			num : <span>{{num}}</span><br />
			
			<button οnclick="unWatch()">unWatch</button>
			
</div>
<script>
		let vm = new Vue({
				el : 'div',
				data : {
					msg : 'Joey',
					num : 1,
					user : {
						id : '01',
						username : 'sikiedu'
					}
				},
				watch : {
					num : function(newValue, oldValue){
						console.log("修改了num 旧值= " + oldValue + "   新值= " + newValue);
					}
				}
			});
			
			let unwatch = vm.$watch('msg', function(newValue, oldValue){
					console.log("修改了msg 旧值= " + oldValue + "   新值= " + newValue);
			});
			
			function unWatch(){
				unwatch();
				console.log("点击了unwatch按钮")
			}
			
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值