一、初始Vue
1、给Vue准备一个容器
2、引入Vue.js文件
方式(1)引入本地vue.js文件
3、创建一个Vue对象
注意:初次使用,控制台会有两条提示
如果想去掉这两条信息,可以选择安装vue-devtools,引入生产版本的vue.js。
也可以使用以下代码消除:
创建一个Vue对象
二、Vue响应式原理
1、理解什么是代理对象
2、看Vue是如何使用代理对象
3.给对象添加属性
方法一:用.的方法
方法二:用[ ]的方法
方法三:通过object对象的defineProperty方法,给指定对象添加指定属性
4、Vue响应式原理
三、Vue常用命令
v-bind:用于绑定属性,通过v-bind:绑定过的属性,可以在属性值可以写表达式。v-bind:可以用:简写。
v-on:用于绑定事件,通过v-on:绑定过的事件,可以指定Vue实例定义的方法。v-on:可以用@简写。
v-model指令可以实现对数据的双向绑定。所谓双向绑定指的是:数据发生变化重新渲染页面,页面数据发生变化更新回数据。v-model指令是 v-bind:value 和 v-on:input 的简写。
实现数据改变时,文本框的值会随之改变;输入框文本改变时,数据也会随之更改。
四、条件渲染和列表渲染
1、条件渲染
v-if 和 v-show 如何选择
如果页面需要反复切换显示和隐藏,用v-show
如果有很多模块需要隐藏,用户可能只对其中的某个模块感兴趣,用v-if,所有的模块首屏加载时,全部都不渲染,当用户选择指定的模块后,在渲染指定的模块。
2、列表渲染
v-for指令,用于列表渲染,类型渲染时,通常都要绑定key,key的作用是提高渲染性能
注意:key必须是唯一,暂时可以将列表的索引作为key值去使用