Vue的基础入门和实例

一：认识Vue

     Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以期轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。

官网：https://cn.vuejs.org/

参考：https://cn.vuejs.org/v2/guide/

二：vue的底层是依赖node和npm工具

    NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

   2.1.下载Node.js

        下载地址：https://nodejs.org/en/download/　　

         完成下载安装以后，在控制台输入：

         node -v

   2.2.NPM

        安装完成Node应该自带了NPM了，在控制台输入npm -v查看：

        npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

       我们首先安装nrm，这里-g代表全局安装

  npm install nrm -g

       然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

       通过nrm use taobao来指定要使用的镜像源：

       然后通过nrm test npm来测试速度：

三：快速入门

    3.1：下载安装vue  

       下载地址：https://github.com/vuejs/vue

        可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip

       下载解压，得到vue.js文件。

   3.2：使用公共的CDN服务   

   
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

     或者：

   
   <script src="https://cdn.jsdelivr.net/npm/vue">script> 

3.3.vue渲染

然后我们通过Vue进行渲染：

    
{{name}} 非常帅

• 首先通过 new Vue()来创建Vue实例

• 然后构造函数接收一个对象，对象中有一些属性：

  • el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div

  • data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

    • name：这里我们指定了一个name属性

• 页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

3.4双向绑定
我们对刚才的案例进行简单修改：

    
    

        {{name}} 非常帅,
        有{{num}}位女神为他着迷。
    

• 我们在data添加了新的属性：num

• 在页面中有一个input元素，通过v-model与num进行绑定。

• 同时通过{{num}}在页面输出

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

• input与num绑定，input的value值变化，影响到了data中的num值

• 页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

3.5.事件处理

我们在页面添加一个按钮：
点我

• 这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num

• 普通click是无法直接操作num的。

3.6.数据
  当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，
这就是“响应式“系统。

html：

    


js:
var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

• name的变化会影响到input的值

• input中输入的值，也会导致vm中的name发生改变

3.7.方法

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue的作用范围内使用。

html：

    {{num}}
    加


js：

var vm = new Vue({
　　el:"#app",
　　data:{
　　　　num: 0
　　},
　　methods:{
　　　　add:function(){
　　　　// this代表的当前vue实例
　　　　this.num++;
　　　　}
　　}
})

3.8.Vue生命周期
   每个 Vue 实例在被创建时都要经过一系列的初始化过程 ：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。
每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

3.9.vue的相关指令
  3.9.1：插值表达式

格式：

{{表达式}}

说明：

• 该表达式支持JS语法，可以调用js内置函数（必须有返回值）

• 表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：var a = 1 + 1;

• 可以直接获取Vue实例中定义的数据或函数

示例：

{{name}}

　　3.9.2：插值闪烁问题

　　使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

使用v-text和v-html指令来替代{{}}

说明：

• v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出

• v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

示例：

v-text:

v-html:

var vm = new Vue({
el:"#app",
data:{
hello: "

大家好，我是虎哥

"
}
})

　　  3.9.3：v-model

　　刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

　　既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

- input
- select
- textarea
- checkbox
- radio
- components（Vue中的自定义组件）

    Java

    PHP

    Swift

    

        你选择了：{{language.join(',')}}
    

• 多个CheckBox对应一个model时，model的类型是一个数组，单个checkbox值是boolean类型

• radio对应的值是input的value值

• input 和textarea 默认对应的model是字符串

• select单选对应字符串，多选对应也是数组

 　　 3.9.4：v-on

　　v-on指令用于给页面元素绑定事件。

语法：
v-on:事件名="js片段或函数名"


    
    增加

    
    减少

    
num: {{num}}




另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

    　 3.9.5：v-for 

　　遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

语法：
v-for="item in items"

• items：要遍历的数组，需要在vue的data中定义好。

• item：迭代得到的数组元素的别名

示例

• 
  {{user.name}} : {{user.gender}} : {{user.age}}
  

　 　3.9.6：v-if ,v-else和v-show

　　v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：
v-if="布尔表达式"
示例：
    

        
        点击切换

        
if="show">
            你好
        
    
    
    

 也可以与v-for结合使用

当v-if和v-for出现在一起时，v-for优先级更高。也就是说，会先遍历，再判断条件。
示例：

    

        

            
for="(user,index) in users" v-if="user.gender === '女'">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            
        
    
    
    

也可以使用 `v-else` 指令来表示 `v-if` 的“else 块”：
if="Math.random() > 0.5">
  Now you see me

else>
  Now you don't

v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。

　　 3.9.7：v-bind

　　绑定css样式

data属性：

data:{
    isActive:['active','hasError']
}
HTML：


v-bind:class可以简写为:class

3.10。组件化

　　在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。