Vue——基础操做

选项数据

　　搭建环境和路由配置完成后，能够在新建的vue文件index.vue中写项目

　　添加一个模板标签template（这个template是无心义的），内部添加一个父级标签做为根标签，在内部再添加若干子标签

　　

　　以后就能够在script标签中添加数据和函数

data

　　data是一个方法，其中定义的是全局组件变量，返回值为一个对象

　　调用数据的时候，能够在template中用两对大括号包裹变量名（注意不能在根标签下引用）

　　

computed

　　computed，也叫计算属性，是一个对象，内部可添加函数，这些函数的this指向全局

　　调用时，一样也是用两对大括号包裹函数名来实现

　　

　　好处在于，虽然模板中容许写js语句，可是这样会致使样式和行为不分离，而在computed内部能够直接写变量的操做以及返回值，实现了行为和样式的解耦

　　

methods

　　methods相似于computed，也是个对象，内部可添加函数，不过这些函数是和事件相关的

　　

　　

filters

　　过滤器，也是一个对象，内部可添加函数，最终输出函数内部的返回值（也就是覆盖以前的值）

　　

 

模板语法

v-html

　　把一个元素变成当前元素的子元素，可是会把当前元素内部原有的子元素给覆盖

　　

v-bind

　　让元素属性和变量绑定，实现属性的实时更新（例如class）

　　能够用:简写代替v-bind:

　　

class

　　class的绑定有如下三种方法：

　　1.class后写一个对象，其中属性名为class名，属性值为data里的一个全局变量名，根据全局变量隐式类型转换结果，为true才给元素绑定该class

　　2.相似方法1，不过把对象挪到data内了，属性值依然为class名称，根据属性值的隐式类型转换看是否添加该class

　　3.直接在class后添加一个数组，其中每一项都是data中的一个变量，内部存储的是class名称

　　

style

　　style的绑定相似于class，也是三种方法，注意写具体style名称时，须要用驼峰形式

　　

v-on

　　绑定事件，其中事件的处理函数（句柄）写在methods里

　　能够用@简写代替v-on:

　　

　　具体绑定的时候，能够把处理的语句写在元素内部，也能够写在methods里，传参为可选项

　　若是须要防止事件冒泡，要在事件类型后加.stop

　　

v-once

　　通常使用插值表达式时，该变量能够被实时改变，同时DOM也会被从新渲染

　　但使用v-once指令，该数据仍能够改变，可是插值的数据不更新

　　

  

表单控件（v-model）

　　表单控件能够把表单元素和全局变量双向绑定，具体包括如下三种

input

　　能够用v-model绑定一个全局变量，该全局变量在最开始会起着placeholder的做用，以后就动态跟input输入框的内容保持一致

　　

checkbox

　　这里绑定的变量为数组，当选择某一项时，该项的value就添加到数组中，数组中值的顺序同添加顺序一致

　　

select

　　这里绑定的对象能够为字符串/数组/对象，当选择某个option时，该项的value就赋值给变量，若是没有value，把option里的内容赋值过去

　　

 

自定义组件

　　自定义的组件同以前的基本语法不一样，是写在components文件夹中的

　　其余写法同以前写pages基本相似，须要在template标签中写出该组件使用时的一个模板

　　

　　若是想在某个页面中引用，须要按照如下步骤：

　　1.在script中用import从components路径下引入这个自定义组件，引入的名字为自定义组件的名字

　　2.在copmonents中添加该组件的名字（注册），若是不想用以前的名称，用一个键来代替（以下图）

　　3.在template中调用该组件，标签名即为该组件名称（若是修改了，标签名为修改后的组件名称）

　　

props

　　若是须要组件能够在不一样页面中运用不一样的样式，则须要在组件中定义props，在模板中用v-bind绑定好这个属性

　　其中type表示传入的值的类型，default表示没有传值的时候的默认值

　　

　　

　　绑定以后就能够在引用该组件的时候，直接用这个属性（例如图中的col）传值，无需再用v-bind和变量

　　

$emit

　　若是想在组件中触发某个事件，须要用到$emit，内部传入的参数为触发的事件名称

　　

　　但具体调用的函数内容，须要在具体的页面中的methods里写

　　

　　

 

DOM操做

　　Vue里的DOM元素都是虚拟的，不可进行真实的DOM操做

　　只有在其生命周期的mounted里才能够进行DOM的操做（在这个周期里，全部的DOM真实生成）

　　Vue里提供了一个新方法，在标签中添加ref属性，用这个属性就能够访问到这个标签，并进行一系列原生JS的DOM操做

　　

 

过渡

　　Vue中的过渡添加了一种方法，在transition标签中添加须要添加过渡效果的元素，元素添加上name以便后续能够添加CSS

　　

　　整个过渡分为两类：leave（显示=>消失）、enter（消失=>显示）

　　每一类中分为三个状态：开始（leave/enter）、中间（leave-active/enter-active）、结束（leave-to/enter-to）

　　具体执行的时候会依次调用开始->中间->结束中的样式，实现过渡效果

　　

 

路由

　　vue-router包容许Vue在不一样页面之间跳转，在使用以前须要安装router这个包（指令为npm install vue-router）

　　路由都是在router-link标签里完成的，具体添加路由的方法有三种：

第一种方法

　　router-link标签里添加一个to属性，其中添加要转向的路径（path）

　　

第二种方法

　　to属性中添加一个对象，其中能够用name/path指向跳转的路径，若是须要传入参数，写在params里，用对象包裹起来

　　

　　对于传入的参数，须要在router的index.js里同步修改一下path

　　

　　这样一来，跳转以后的url就会收到咱们传入的参数

　　

　　固然，url地址中还能够传入其余内容，例如query，传入的参数会在url的?后显示

　　

　　

获取参数

　　第二种方法中提供了一种向目标页面url传递参数的方法，但若是想在跳转到的目标页面中获取参数呢？

　　能够在目标页面的mounted这个生命周期中写this.$route.params.参数名来获取params传入的参数

　　

　　对于query传入的参数，用this.$route.query.参数名来获取

第三种方法

　　也能够不用模板方法，直接给标签绑定事件，经过this.$router.push方法传入转向的url地址，地址能够用path/name

　　

　　

　　一样也能够往这个方法里传参数（params/query）

 

插槽

　　插槽经常使用在组件中，若是组件里没有插槽，则没法向组件添加内容

　　插槽建立很简单，只须要在组件中用slot标签便可，以后在网页中全部向组件中添加的内容都会进入slot中

　　

　　若是组件中有多个插槽，须要在slot标签中用name属性区分，使用时，在对应的标签中添加slot属性，属性值为须要插入的插槽的name值

　　

 

resource请求

　　相似ajax请求，当和后台交互数据时使用

配置方法

　　1.使用以前，用npm install vue-resource --save指令安装

　　2.在main.js中导入，并用vue.use指令，使其能够全局使用

　　

使用

　　（注意补充案例）

 

移动组件库Mint-UI

配置

　　1.在项目目录下，执行cnpm install mint-ui --save命令

　　2.（未完待续）