Vue2.x学习一：基础入门

时间 2019-11-08

标签 vue2.x vue 学习基础入门繁體版

原文原文链接

基础简介

Vue属于数据驱动框架。
与jquery不一样 ( jquery是对dom的封装，属于模型驱动框架)。
数据驱动框架：即数据--驱动--模型。
也就是说，数据的改变会影响视图的改变，而这样的过程由框架来完成。javascript

Vue采用MVVM模式。
M------Modal----------数据模型-----表示在data属性中定义的内容
V-------View-----------视图-----------html标签显示的内容
VM----ViewModal----中间件--------将模型中的数据转换为视图css

兼容性

Vue 不支持 IE8 及如下版本，由于 Vue 使用了 IE8 没法模拟的 ECMAScript 5 特性。但它支持全部兼容 ECMAScript 5 的浏览器。
----事实上，在MVVM框架兴起以后，你们对兼容性的要求就不是这么高了。而如今兼容IE8 及如下版本的公司（技术更新比较慢的公司），不会用到vue框架，也不会招用vue框架的人。所以，咱们的市场是中小型公司和先进的公司。html

安装

①直接用 <script> 引入
将文件直接下载到本地，放到要引入文件的文件夹中，经过<script src=" "></script>引入。
此时，Vue 会被注册为一个全局变量。
通常在教学中使用。vue

②cdn 在线引入
连接到一个你能够手动更新的指定版本号，如：
<script src="https://cdn.jsdelivr.net/npm/...;></script>java

③npm
$ npm install vue
通常在开发项目时使用，须要用到vue-cli脚手架。jquery

Vue实例

1）在建立vue实例以前，咱们先建立一个html文档，而后引入vue.js文件。

须要注意的是：当咱们引入vue.js后，（就像引入jquery.js,它为咱们提供了一个全局变量$）,它并不并不影响全局变量。咱们使用了框架以后，它只会影响一个变量，那就是Vue变量，以供咱们的代码直接调用。vue-cli

咱们能够简单的测试一下：数据库

<script type="text/javascript">
    //vue框架提供的全局变量Vue,它是构建Vue对象的构造函数
    console.log(Vue);
    /*打印结果为：function mn(e){this._init(e)}*/    
</script>

若是你引入js文件了，而且成功地在控制台打印出告终果，那么你就能够进行接下来的操做了。npm

2）在<body></body>中编写视图代码

如下面代码为例：bootstrap

<div class="container">
    <div class="header">
        <h3>第一个Vue实例</h3>
    </div>
    <div class="content">
        <table class="table table-bordered table-hover">
            <caption class="text-center" style="caption-side: top;">
                <h4>学生信息</h4>
            </caption>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>            
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

须要注意的是：
在写代码的时候最好要用一个根标签包裹。例如：<div class="container"></div>
咱们要注意代码规范，而且在写代码的时候能够活用bootstrap框架，这样能够简化咱们的代码开发。

写完咱们要显示的内容以后，接下来就要，开始咱们的主要部分了。

3）构建Vue对象的构造函数

①经过用Vue函数建立一个新的Vue实例。

<script type="text/javascript">
    var vm = new Vue({ 传递对象/选项 });
</script>

②传递选项 el,data

在对象中，咱们能够传递如下选项：

el
提供一个在页面上已存在的DOM元素做为Vue实例的挂载目标(做用对象)。
例如：

<script type="text/javascript">
    var vm=new Vue({
        el:'.container'
    });
</script>

固然，若是Vue实例在实例化时没有收到el选项，则它处于“未挂载”状态。
此时，咱们能够经过vm.$mount()进行手动挂载。
例如：

<script type="text/javascript">
    var vm=new Vue({
        //选项
    });
    vm.$mount('.container');
</script>

或者直接这样写：

<script type="text/javascript">
    new Vue({
        //选项
    }).$mount('.container');
</script>

data
它是一个对象，页面中的全部数据都定义在data:{}中。
此时，咱们须要知道在vue中，数据绑定最多见的形式就是使用“Mustache”语法 (双大括号)，即{{}}。
咱们先进行一个测试：

<div class="container">
    {{msg}}
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'.container',
        data:{
            msg:'hello world'
        }
    });
</script>
<!-- 在页面中打印出的结果就是 hello world -->

由此，咱们可知双大括号中的语法可被vue解析，而这个被解析的值就是在data中寻找。

③遍历 v-for
咱们要遍历信息，要用到一个命令，v-for，它是根据一组数组的选项列表进行渲染。
它的语法形式是：v-for="item in items"
其中，item是数组元素迭代的别名，items 是源数据数组(也就是要放在data对象中，供item来寻找，每找到一次就要进行for-of循环)。
所以，以前写的代码实例，可以被修改为这样：

<tr v-for='student in studentList'>
    <td>{{student.name}}</td><!-- 将学生中的name取出 -->
    <td>{{student.age}}</td><!-- 将学生中的age取出 -->
</tr>

data:{
    //studentLsit是数组，所以用中括号
    //目前因为没有与后台数据库进行绑定，所以在这里为了学习，直接赋值
    studentList:[{
        name:'terry',
        age:'12'
    },{
        name:'larry',
        age:'13'
    }]
}

完整代码以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue实例</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="header"><h3>第一个Vue实例</h3></div>
        <div class="content">
            <table class="table table-bordered table-hover">
                <caption class="text-center" style="caption-side:top">
                    <h4>学生信息</h4>
                </caption>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for='student in studentList'>
                        <td>{{student.name}}</td>
                        <td>{{student.age}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        new Vue({
            el:'.container',
            data:{
                studentList:[{
                    name:'terry',
                    age:'12'
                },{
                    name:'larry',
                    age:'13'
                }]
            }
        });
    </script>
</body>
</html>

以上就是对Vue2.x的简单了解及学习，后续的学习内容会慢慢更新......