Vue的基础入门和实例

一：认识vue

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

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

官网：

参考：

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

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

   2.1.下载node.js

        下载地址：　　

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

         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  

       下载地址：

        可以下载2.5.16版本

       下载解压，得到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进行渲染：

<div id="app">
    <h2>{{name}} 非常帅</h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 生成一个vue实例
    var app = new vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"虎哥"
        }
    })
</script>

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

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

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

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

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

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

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

<div id="app">
    <input type="text" v-model="num">
    <h2>
        {{name}} 非常帅,
        有{{num}}位女神为他着迷。
    </h2>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    // 生成一个vue实例
    var app = new vue({
        el:"#app", // el,即element。要渲染的的页面元素
        data:{ // 数据
            name:"虎哥",
            num:1
        }
    })
</script>

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

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

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

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

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

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

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

3.5.事件处理

我们在页面添加一个按钮：
<button v-on:click="num++">点我</button>

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

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

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

html：
<div id="app">
    <input type="text" v-model="name"/>
</div>

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

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

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

3.7.方法

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

html：
<div id="app">
    {{num}}
    <button v-on:click="add">加</button>
</div>

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实例中定义的数据或函数

示例：

<div id="app">{{name}}</div>

　　3.9.2：插值闪烁问题

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

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

说明：

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

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

示例：

<div id="app">
v-text:<span v-text="hello"></span> <br/>
v-html:<span v-html="hello"></span>
</div>

var vm = new vue({
el:"#app",
data:{
hello: "<h1>大家好，我是虎哥</h1>"
}
})

　　  3.9.3：v-model

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

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

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

<div id="app">
    <input type="checkbox" v-model="language" value="java" />java<br/>
    <input type="checkbox" v-model="language" value="php" />php<br/>
    <input type="checkbox" v-model="language" value="swift" />swift<br/>
    <h1>
        你选择了：{{language.join(',')}}
    </h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new vue({
        el:"#app",
        data:{
            language: []
        }
    })
</script>

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

• radio对应的值是input的value值

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

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

 　　 3.9.4：v-on

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

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

<div id="app">
    <!--事件中直接写js片段-->
    <button v-on:click="num++">增加</button><br/>
    <!--事件指定一个回调函数，必须是vue实例中定义的函数-->
    <button v-on:click="decrement">减少</button><br/>
    <h1>num: {{num}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new vue({
        el:"#app",
        data:{
            num:1
        },
        methods:{
            decrement(){
                this.num--;
            }
        }
    })
</script>

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

    　 3.9.5：v-for 

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

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

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

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

示例

<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} : {{user.gender}} : {{user.age}}
</li>
</ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var vm = new vue({
el:"#app",
data:{
users:[
{name:'柳岩', gender:'女', age: 21},
{name:'虎哥', gender:'男', age: 30},
{name:'范冰冰', gender:'女', age: 24},
{name:'刘亦菲', gender:'女', age: 18},
{name:'古力娜扎', gender:'女', age: 25}
]
}
})
</script>

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

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

语法：
v-if="布尔表达式"
示例：
    <div id="app">
        <!--事件中直接写js片段-->
        <button v-on:click="show = !show">点击切换</button><br/>
        <h1 v-if="show">
            你好
        </h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var app = new vue({
            el:"#app",
            data:{
                show:true
            }
        })
    </script>

 也可以与v-for结合使用

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

    <div id="app">
        <ul>
            <li v-for="(user,index) in users" v-if="user.gender === '女'">
                {{index}} - {{user.name}} : {{user.gender}} : {{user.age}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new vue({
            el:"#app",
            data:{
                users:[
                    {name:'柳岩', gender:'女', age: 21},
                    {name:'虎哥', gender:'男', age: 30},
                    {name:'范冰冰', gender:'女', age: 24},
                    {name:'刘亦菲', gender:'女', age: 18},
                    {name:'古力娜扎', gender:'女', age: 25}
                ]
            }
        })
    </script>

也可以使用 `v-else` 指令来表示 `v-if` 的“else 块”：
<div v-if="math.random() > 0.5">
  now you see me
</div>
<div v-else>
  now you don't
</div>
v-else` 元素必须紧跟在带 `v-if` 或者 `v-else-if` 的元素的后面，否则它将不会被识别。

　　 3.9.7：v-bind

　　绑定css样式

data属性：

data:{
    isactive:['active','haserror']
}
html：
<div v-bind:class="isactive"></div>

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

3.10。组件化

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

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