vue 使用学习（-）基本概念和使用

1. vue 概念

1.1 MVVM 模式（数据双向绑定）

M: MODEL 数据模型，负责数据存储
V: VIEW 视图，负责页面显示
VM: view model，负责业务处理，对数据进行加工，之后交给视图

数据双向绑定：view端改变数据，会通过vm影响model端，model端改变数据，也会通过vm影响view端

1.2 vue挂载点、模板和实例

vue实例会结合template模板和实例中的数据，生成相应的模板放到body中指定的挂载点中

在vue使用中，无需进行原先的前端编程的dom操作，而是去面向数据编程，通过改变数据进行改变页面

2. vue 常用的语句

2.1 实例中的data参数构建的变量使用：

2.1.1 插值表达式{ {} }

2.1.2 v-text

将一个变量的值渲染到指定的元素中去

2.1.3 v-html

输出真正的html元素

2.2 实例中的methods参数定义的方法的使用，绑定事件：

2.2.1 v-on

对页面中的事件进行绑定，指向定义在methods中的function

语法：v-on:时间类型=”监听器”

可以直接简写为@

2.2.2 使用data中的变量

只要使用this.变量名 就能在变量中获取定义的变量值

2.3 双向绑定

2.3.1 双线绑定

上面的都是通过js单向绑定div中的元素的值，双向绑定指的是通过template中的值的修改（比如input框）来改变js中定义的值

2.3.2 v-model

可以添加在输入框input中，实现数据的双向绑定

2.4 绑定元素中的属性

2.4.1 v-bind

绑定元素中的属性，例如a标签，可以使用v-bind:href=”value”去控制href中的值

属性后面跟的是js的表达式，也就是说，可以如下使用：v-bind:title=”‘this is ‘+title”(定义了title=”test”)

可以简写为一个 :

2.5 实例中的computed参数定义了可变动的计算参数

2.5.1 使用

格式如同定义data一样，但是它构造了一种data中变量计算之后的结果，只有当使用到的变量变化时才会进行重新计算，并返回新的计算结果

2.6 实例中的watch参数 - 侦听器

2.6.1 使用

侦听某个量，给它定义变化时候运行的方法

作用其实就是当这个变量被使用到或者发生变化时，就调用这个方法

2.7 vue 常用逻辑

2.7.1 v-if v-show

共同点：效果相同：为true显示，false隐藏

不同点：v-if是将元素添加或者移除dom树模型，v-show只是给元素添加了display:none的属性

所以如果需要速度快的话可以使用v-show，如果需要稳定安全性高的话，使用v-if

2.7.2 v-for

控制html元素循环

语法：v-for:”item in 集合” 或者 v-for:”item in 集合”

也可以添加v-for=”index (item,index) of 集合”，这样列表中的每一项内容都会自动添加上一个类似于id的索引，可以绑定在li的key上面 :key=”index”

3. vue 常用组件使用

3.1 vue理解

1）每个vue页面都是有若干vue实例组成的，而vue实例都是包含模板template、方法methods、参数data或者props等组成的，而组件也是一个vue实例

2）在vue中，外部组件向内部组件传递值，是通过属性的形式传递的，申明属性名=变量名，然后在内部组件中通过props参数接收外部属性名，就能同步到外部的变量值了

3.2 局部组件和全局组件

局部组件就是定义一个组件变量，然后在new vue中使用components参数进行申明注册

全局组件使用Vue.component()方法进行创建：Vue.component('',{template:"",props:[]})，在prop中接收外部绑定的属性名称，用于外部传递值进入这个组件

3.3 内部组件传递值进入外部组件

内部组件通过定义自己的this.$emit("name",this.x)这个方法，定义了事件名称、内部组件希望传递出去的参数，然后外部组件通过绑定事件@name监听到这个事件，然后定义自己的函数进行接收并处理这个参数值

3.4 使用步骤：

1）创建<template>标签
  相当于一个前端的类，在template下去定义它的样式
2）定义和注册一个组件
  在js中去定义注册并且实例化某个template（相当于定义它实例化的变量名）
3）使用实例化的组件
  在body中任意地方可以使用通过template实例化的变量名的标签

本文的demo

4. vue-cli简介和使用

4.1 安装：

npm install --global vue-cli

4.2 初始化项目

vue init webpack 项目名
cd 项目
npm run dev

4.3 项目运行路径

1）根目录的index.html就是入口文件，里面的有个最大的挂载点app，用来挂载最外层的组件

2）src下包含着运行的内部组件的内容

4.4 vue注意

1）组件template下只能包含一个块，所以需要用一整个div包起来

2）vue-cli中组件的data应该是个函数而不是以前的对象

3）子组件的style标签上加上scoped关键词，表示这个style下定义的样式只在当前组件中影响，是独立的不会影响外界

项目demo