vue style 三元_Vue学习笔记

一、Vue是什么

Vue是用于构建用户界面的渐进式JS框架，所谓渐进式可以理解为由浅入深的意思，你做简单的项目可以用vue的简单的功能，做复杂的项目也可以用vue的复杂的功能。

Vue的优点：

1. 体积小，轻量级框架，压缩后大小为33k。
2. 运行效率高，提高开发效率：基于虚拟dom，通过JavaScript进行各种计算形成最终dom的预处理操作。可以大大提高开发效率和运行效率。
3. 双向数据绑定：开发者无需再操作dom对象，更多精力集中在逻辑上。
4. 应用广泛，资料丰富：有很多的组件基于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的绑定可以使用数组和三元表达式。

十、条件渲染：

1. v-if， v-else-if, v-else ：逻辑使用和if， else if， 和 else一致，为true则展示标签内容，为false则不渲染标签内容。注意：v-else-if 和 v-else 必须跟在v-if 后面。
2. v-show ：为false则在标签上加入display：none样式，为true则移除该样式，适用于频繁切换。

十一、事件处理

1. v-on : bind = "方法名" 绑定事件处理方法，并在Vue下的methods中声明方法名和方法内容。

2. $event 原始dom对象可以传入方法内。

3. 事件修饰符：作为后缀加在事件后。

常用后缀：

对应方法：

十二、表单输入绑定：

表单输入绑定可以使用v-model实现一个双向绑定，非常好用！

十三、组件基础

vue的组件就是封装好的vue对象。vue.component(组件名称, {对象})来创建组件。

vue的组件命名有短横线连接，和驼峰命名（开头大写）。

vue组件有全局注册和局部注册。Vue.component为全局注册，在对象内部或在外部创建组件对象在内部调用都为局部注册。