[JavaScript知识库]2022-9-11 vue课时1

vue实例

const vm = new Vue({});

1、data数据

• data用于保存当前Vue实例中所有需要用到的数据；
• data属性的值只有两种情况：对象、返回对象的函数；

const vm = new Vue({
		data: {
				//数据
		}
});

const vm = new Vue({
		data ()  {
				return {
						//数据
				}
		}
});

注意：在后续学习完组件以后，组件中的data就只能使用返回对象的函数了；

el

*对象里面的属性没有先后顺序；

• el：指定Vue实例的作用范围；
• el的属性值是一个字符串，用户设置挂载目标的选择器 ；
• 注意：不要将body设置为挂载目标，因为Vue最终挂载成功后会将挂载目标给替换掉；

模板语法 （数据渲染）

在挂载目标范围内，通过{{}}双大括号的语法，可以将Vue实例中的数据渲染到页面上。

<div id="app">
	<h1>{{msg + student.name}}</h1>
	<h3>{{flag ? 'hello' : 'world' ;}}</h3>
</div>

const vm = new Vue({
     el: '#app',
     data: function () {
         return {
             msg: 'hello world',
             num: 100,
             student: {
                 name: 'zhangsan',
                 age: 20
             },
             flag : true
         };
     }
}); 

事件处理

事件监听

Vue中提供了一个v-on指令；用来设置事件监听

<button v-on:click="handleClick">按钮</button>

事件处理函数

Vue中提供了一个methods属性，用来设置Vue中所有需要用到的方法；

		const vm = new Vue({
            el: '#app',
            data: function () {
                return {
                    msg: 'hello world'
                };
            },
            methods: {
                handleClick(){
                    console.log('123');
                }
            }
        }); 

响应式

当一个Vue实例被创建是，它将data对象中的所有的属性 （数据）加入到Vue的响应式系统中。当data中的数据值发生改变时，视图（页面）会自动去“响应”数据的变化，立即更新为最新的数据。