目录

一、安装与部署二、实例化Vue对象三、数据与方法四、生命周期的钩子函数五、class与style绑定5.1 v-bind 指令缩写5.2 v-on 指令缩写 六、条件渲染与列表渲染6.1 条件渲染6.2 列表渲染

一、安装与部署

从vue官网下载开发版vue.js，下载网址： https://vuejs.org；以及在项目中使用script 标签引用vue.js。浏览器上安装 Vue Devtools，在使用 Vue 项目时，能够更好的界面中审查和调试 Vue 应用。vue必须引入开发版, 使用min压缩版是不能使用devtools进行调试。[*可以百度搜索Vue-Devtools安装配置教程即可安装哈~]

二、实例化Vue对象

一般使用vm(即View Model)变量名表示vue的实例。如图所示2-1 el：（即element ）需要获取的元素。 data： 用于数据储存。 methods: 用于定义的函数，可以通过 return 来返回函数值。 {{ }}：用于输出对象属性和函数返回值。

三、数据与方法

如图所示3-1

1.重新创建一个data变量，其中data:data两者不同，前者为是定义的一个属性，后者是定义一个变量，为对象的形式；使用vm.num1和data.num1的属性改变结果二者相同。 2.vm.$watch()为观察变量的变化以及获取变化前和变化后的值。方法中num1为观察的某个变量的变化，使用回调函数当中有newVal,oldVal另个参数。

四、生命周期的钩子函数

在vue官网中API的选项/生命周期钩子 ，了解到一些钩子的详细解释。如图所示4-1 在学习vue生命周期钩子的过程中，发现不能像js一样使用箭头函数，因为vue是自动绑定this。

按照学习过程中我所理解的基本钩子函数： beforeCreate:整个界面创建之前调用的一个生命周期。 created：实例创建之后被调用。 beforeMount：相当于一个准备挂载的状态。【创建的实例，需要显示出来，而放入HTML文档中即挂载】 mounted:：挂载成功。 beforeUpdate:数据变化之前被调用。 updated:组件，DOM结构已经更新完毕被调用。

五、class与style绑定

使用v-bind进行class与style进行属性绑定,如图所示5-1

v-model是一个指令，在表单控件或组件上创建双向绑定，限制在input标签、select标签、textarea标签、components中使用，修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。

1.绑定对象得多个class样式

<div v-bind:class="{ active:isActive,blue:isBlue }"></div>

2.也可使用数组形式静态绑定

<div v-bind:class="{ active,blue}"></div>

3.使用数组形式的进行三元运算动态绑定class

<div v-bind:class="{ isActive ?'active':'',isBlue?'blue':''}"></div>

5.1 v-bind 指令缩写

<!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>

5.2 v-on 指令缩写

<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>

六、条件渲染与列表渲染

6.1 条件渲染

v-if 和v-show只有在条件指令返回正确时，才被渲染。如图所示6-1

== 用于比较两者是否相等，忽略数据类型。 === 用于更严谨的比较，值和值的数据类型都需要同时比较。 v-if和v-else或v-else-if之间不能添加其他元素。【以下属于错误事例】

<div id="app"> <div v-if="type==='A'">A</div> <div v-else-if="type==='B'">B</div> <div v-else-if="type==='C'">C</div> <span>文乐</span> <div v-else>不返回ABC</div> </div>

注意：v-show是利用标签的display属性，通过visibility和none控制显隐。[在元素中添加display,隐藏DOM元素] v-if:直接删除DOM元素。DOM元素中有接口时，当v-if值为true时. 会请求接口。 v-show不支持元素，也不支持v-else。 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.2 列表渲染

数组列表渲染，v-for 使用的语法为：v-for=“item in items”，其中items是代表源数据数组，item代表数组元素别名。有以下两种形式：

<li v-for="item ,index in items":key="index"> {{index}}{{item.msg}} </li> <li v-for="value,key in object":key="key"> {{key}}{{value}} </li>

key="key"可省略,通过data获取数据信息,如图所示6-2

注意：必须要有唯一的key。当和v-if一起使用时，v-for的优先级比v-if更高，但，不建议在同一标签使用，避免产生不友好现象。

小编第一次在写文章,想记录自己学到的知识点,有不足之处还请各位大佬多多指教,十分感谢哈! ! !