一、Vue是什么
Vue是用于构建用户界面的渐进式JS框架,所谓渐进式可以理解为由浅入深的意思,你做简单的项目可以用vue的简单的功能,做复杂的项目也可以用vue的复杂的功能。
Vue的优点:
- 体积小,轻量级框架,压缩后大小为33k。
- 运行效率高,提高开发效率:基于虚拟dom,通过JavaScript进行各种计算形成最终dom的预处理操作。可以大大提高开发效率和运行效率。
- 双向数据绑定:开发者无需再操作dom对象,更多精力集中在逻辑上。
- 应用广泛,资料丰富:有很多的组件基于vue,在开发的时候可以直接使用。资料丰富便于学习。
二、Vue安装
1.在官网下载vue.js文件复制进入项目包后,在html直接使用<script>标签引入vue。(适合初学者)
安装成功后可以在浏览器打开html看到控制台的两段警告内容,证明成功安装vue:
引入vue后会有一个全局函数Vue(),用于vue的后续操作。
2.CDN方式(感觉不常用)
3.NPM:常用于创建项目使用的方法。
三、声明式渲染
1.Vue的核心是可以采用简洁的模板语法通过声明式将数据渲染进DOM的系统。
2.Vue应用可以分为视图和脚本两个部分,
视图部分使用一个id命名为“app”的div,并在内容中使用双层大括号包裹内容,大括号里的内容是Vue函数中的data字典里的值。一个双括号包裹一个data属性!
脚本部分创建app对象为 Vue函数,el的值为视图div的id选择器,data中可以定义视图的内容。
四、Vue实例
每个vue应用都是通过vue函数创建的vue实例对象开始的。
虽然vue没有完全遵循MVVM(Model-View-ViewModel模型)模型,但vue也受到了它的启发,因此文档中常用vm变量名表示vue实例。
vue指令:例如v-bind:title="" 这样前面带v-前缀的为vue的特有指令。
五、数据与方法:
数据:可以改变data来重新渲染div的内容,也可以通过Object.freeze()方法阻止修改现有属性。(通常不使用)
"$"符号通常加在vue对象的特定属性前以区分其他属性或变量名。
六、生命周期
每个vue对象在被创建的时候需要一系列的初始化过程,例如:设置数据监听,编译模板,将实例挂载到dom对象等。在这个过程中会运行一个叫生命周期钩子的函数,给予用户不同阶段添加自己代码的机会。
注意:生命周期钩子的创建不能使用箭头函数。因为箭头函数没有this对象,而钩子需要频繁使用this对象。
1.beforeCreate : function() 在整个页面加载之前。
2.created : function() 在实例创建完成后被立即调用,但还未进行性挂载。
3.beforeMount : function() 在挂载开始之前调用,相关渲染函数首次被调用。
4.mounted : function() el被新的vm.$el替换,已挂载成功后调用。
5.beforeUpdate : function() 数据更新之前。
6.updated : function() DOM更新完毕后调用。
所有生命周期钩子需要放在Vue函数下。
七、模板语法
1.文本插入:也是最常用的方法{{ }}使用双大括号进行文本插值。使用v-once指令,可以让vue只进行一次性的插值,该结点上的所有vm文本只会进行一次插值,修改后不会更新。vm对象内的值会进行改变,但是结点下的内容不会改变。
2.html插入:双大括号引入的内容只是普通的字符串文本,非html代码。在标签上加入 v-html= ""属性可以引入html内容。
3.特性绑定:vue可以动态绑定html特性,指令名时v-bind。例如:v-bind:id="id", 格式为:v-bind: + 需要绑定的html特性特性名称(id , class, style)= "属性名"。
4.JavaScript支持:vue支持嵌套js表达式,注意只是支持单个表达式。
八、指令
1.v-if : v-if="seen" 取决于seen的布尔值,如果为true则渲染这个标签,反之则不会渲染。
2.v-href : v-href="http://www.zhihu.com" 用于给标签绑定跳转url。
3.指令后缀:例如在指令后面添加.stop这样的后缀可以起到需要的功能。例如@click绑定事件添加后缀 @click.stop="" 可以让click方法执行完后停止,不去执行父类点击事件。
4. methods : Vue方法属性,用于存放方法。
九、class与style的绑定
vue的class和style的绑定可以使用数组和三元表达式。
十、条件渲染:
- v-if, v-else-if, v-else :逻辑使用和if, else if, 和 else一致,为true则展示标签内容,为false则不渲染标签内容。注意:v-else-if 和 v-else 必须跟在v-if 后面。
- v-show :为false则在标签上加入display:none样式,为true则移除该样式,适用于频繁切换。
十一、事件处理
- v-on : bind = "方法名" 绑定事件处理方法,并在Vue下的methods中声明方法名和方法内容。
2. $event 原始dom对象可以传入方法内。
3. 事件修饰符:作为后缀加在事件后。
常用后缀:
对应方法:
十二、表单输入绑定:
表单输入绑定可以使用v-model实现一个双向绑定,非常好用!
十三、组件基础
vue的组件就是封装好的vue对象。vue.component(组件名称, {对象})来创建组件。
vue的组件命名有短横线连接,和驼峰命名(开头大写)。
vue组件有全局注册和局部注册。Vue.component为全局注册,在对象内部或在外部创建组件对象在内部调用都为局部注册。