1. 技术文章
  2. 第1章-初识Vue.js

第1章-初识Vue.js

由 烈酒焚心 提交于 2020-02-08 13:45:11

一、初识Vue

1.1、本次我们学习的内容

　　常用指令：vue中最基础的内容

　　交互： 网络请求

　　组件： 是vue.js 这个框架 最核心，最精华的内容，因为vue呐，它在所有的框架中是把组件化做到了极致。项目开发中的每一个页面都在使用组件，是我们重中之重。

　　路由配置：在实际开发中，需要借助路由去完成的。

　　项目实践：在项目开发的过程中，如何实现框架的搭建。

1.2、内容：

　　了解 Vue.js 的概念

　　理解MVC 思想

　　能够使用Vue.js 模板和表达式进行数据关联展示 *****

　　掌握Vue.js 模板的组成和使用方法 ********

1.3、vue的前端框架

  1. 基于react后台框架- : https://ant-design.gitee.io/docs/react/use-in-typescript-cn
  2. vue-admin：https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/chart.html#demo
  3. 更多框架：https://www.cnblogs.com/zhangqigao/p/10564988.html

二、Vue简介

2.1、Vue.js概念

  • 概念：Vue.js是目前最流行的前端MVC框架
  • 作者：尤雨溪(华人)   前Google员工

2.2、Vue.js官网

  • 官方入门：https://cn.vuejs.org/
  • API文档：https://cn.vuejs.org/v2/api/
  • github库：https://github.com/vuejs/vue
  • Vue.js 发布版本/下载地址：https://cn.vuejs.org/v2/guide/installation.html

2.3、 Vue.js优势

  • 简洁： HTML模板 + Vue实例  + Json数据
  • 轻量：17kb，性能好
  • 设计思想： 视图与数据分离，无需操作DOM
  • 社区：大量的中文资料和开源案例

三、MVC框架

3.1、什么是框架

  • 封装与业务无关的重复代码，形成框架，使用框架提升开发效率

3.2、MVC框架组成

　MVC-表示软件可分成三部分

  • 模型（Model）：就是我们的数据层，也就是data
  • 视图（View）：指的是具体的某个标签
  • 控制器（Controller）:  在js代码里面，定义一个实例  var vm = new({ele,data})，在这个实例里面去去处理数据源

3.3、vue.js的定义

　1.创建视图，就是创建一个标签(div)，里面包裹view函数

　2.创建创建controller,在vue中 controller 就是 vue实例(对象),通常我们管这个实例 叫 vm，但是这个不是固定写法(var vm = new Vue({定义element，和 data })

　3.通过在data中定义数据源，然后通过表达式语法：{{ 变量名 }}，来获取数据

    4.创建好的vue的页面，可以通过 浏览器上的控制台去

vue.js在浏览器控制台调试如下：

>>>vm.msg
"hello vue.js"
>>>vm.msg = "hello"
"hello"

 Vue.js定义如下：

<body>
    <!--创建view函数,view视图包裹一个容器-->
    <div id="box">
        <!--页面显示部分写在box里面-->
        <!--将vue实例中定义的数据，展示在页面上-->
        <!--将数据展示在页面上，需要借助表达式
            表达式语法：{{ 变量名 }} -->
        <h1>{{ msg }}</h1>
    </div>
    <!--导入vue.js-->
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        // 创建controller,在vue中 controller 就是 vue实例(对象),通常我们管这个实例 叫 vm，但是这个不是固定写法
        var vm = new Vue({   //{} 中填写vue实例的配置项
            el: '#box',//element元素，el配置项是用来设置与页面的关联,el：选择器
            // data 数据(model)
            data: {
                msg: 'hello vue.js'
            }
        });
    </script>
</body>

四、表达式的概述和使用

4.1、表达式的概述

1、什么是表达式，表达式用来做什么？

　　使用双大括号来包裹 js 代码构成表达式，将双大括号中的数据替换成对应属性值进行展示。

2、表达式的语法

　　表达式语法，双大括号的语法，也叫模板语法，Mustache语法，语法如下：

<div id="app">
    <span>Message:{{ msg }}</span>  //{{ msg }}引用vue 对象中的 data下的msg变量
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: 'hello' //改变msg的值，花括号里面的msg也会改变
        }
    });
</script>

3、表达式中可以写入哪些内容

  • JSON数据
  • 数字
  • 字符串
  • 表达式
  • js代码

①JSON数据

说明：直接用 {{ 变量名 }} 去获取数据。

<div id="box">
    <!--1) json 数据-->
    <h1>{{ msg }}</h1>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            msg: 'hello vue.js'
        }
    });
</script>
JSON数据

②数字

说明：直接写入数字，但是前提需要创建 Vue对象。

<div id="box">
    <!--2) 数字-->
    <h1>{{ 10 }}</h1>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#box'
    });
</script>
数字

③字符串

说明: 直接写入字符串，注意了，写字符串需要在字符串前后加 引号，不然 会被当做一个变量的。

<div id="box">
    <!--3) 字符串-->
    <h1>{{ 'string' }}</h1>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#box'
    });
</script>
字符串

注意：区分变量和字符串：引用包裹的为字符串。只要没有引号包裹的，就会被系统解析成变量或者是方法名。

④表达式

说明：可以写一些简单的表达式，可以写入js代码，但是不推荐些复杂的代码。常用的写法：三木运算符(问号冒号表达式，三元运算符)(能够代替if....else....)。之所以不推荐写负责的代码，原因是因为：mvc 设计思想 ，就是为了使页面和数据进行很好的分离，如果在表达式中写入过多的逻辑代码，那么久违背了最初的设计思想，这样也就使代码看起来很复杂，难以维护。

<div id="box">
    <!--4) 表达式-->
    <h1>{{ 1+1 }}</h1>
    <h1>{{ 2>3?'true':'false' }}</h1>
    <h1>{{ 'hello' + name }}</h1>
    <h1>{{ {name:'张其高'} }}</h1>

</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            msg: 'hello vue.js',
            name: '张其高'
        }
    });
</script>
表达式

注意：if..else... 不能写入到表达式中

⑤js代码

说明：表达式不仅可以写代码，还可以写js代码

<body>
    <div id="box">
        <!--fn()就是js代码-->
        <span>{{ fn() }}</span>
    </div>
    <script src="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#box",
            data : {
                num: 1
            },
            method: {
                fn : function(){
                    return this.num;
                }
            }
        });
    </script>
</body>
js代码

4.2、事件绑定

说明：我们知道如果给一个button按钮绑定一个时间的话，如果用vue.js，则需要 在 button 按钮上 v-on:click: 'fn(参数)'，fn(事件处理函数)定义

<div id="box">
    <h1>{{ arr }}</h1>
    <!--为添加按钮，绑定点击事件
        v-on:click: 'fn()'
        fn(事件处理函数)定义
    -->
    <button v-on:click='fn("shopping")'>添加</button> 
    <button v-on:click='fn2(0)'>删除</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
    // 控制器
    var vm = new Vue({
        el: "#box",
        data: {
            //数据
            arr: ['吃饭','睡觉','打豆豆','coding'],
        },
        methods: {  //声明绑定事件函数fn,fn2
            //函数名：function(){代码块}
            fn:function(str){
                //body....
                console.log(this);
                alert(this);
                this.arr.push(str);
            },
            fn2: function(index){
                //body....
                this.arr.splice(index,1);

        }
    });
</script>
绑定事件

注意了：this 关键字，它代表着Vue的实例，我们可以 在代码中用console.log(this);测试一下，在谷歌浏览器的Console控制台去看一下。引用数据的原因：this(vue实例)代理了所有data中的所有属性和函数

引用数据的方法：this.数据名(this.arr)，引用函数的方法：this.函数名(this.fn2(参数))。

4.2、todolist练习

需求：1、展示数据  2、删除数据  3、添加数据

<body>
    <div id="box">
        <h1>{{ arr }}</h1>
        <!--为添加按钮，绑定点击事件
            v-on:click: 'fn()'
            fn(事件处理函数)定义
        -->
        <button v-on:click='fn("shopping")'>添加</button>
        <button v-on:click='fn2(0)'>删除</button>
        <h1>{{ name }}</h1>
        <h1>{{ num + 1 }}</h1>
        <h1>{{ obj.name }}</h1>
        <h1>{{ arr2[0].id }}</h1>
    </div>    
    <script type="text/javascript" src="js/vue.js"></script>
    <script>
        // 控制器
        var vm = new Vue({
            el: "#box",
            data: {
                //数据
                arr: ['吃饭','睡觉','打豆豆','coding'], //普通数组  {{ arr }}
                name: '帅高高',  //字符串 {{ name }} 
                num: 1,   //数字  {{ num + 1 }}
                obj: {    //对象  {{ obj.name }}
                    name: '傻逼鸿',
                    age: '38',
                    tel: '7417417474741'
                },
                arr2: [   //负杂的数组 + 对象   arr2[0].id
                    {id:'01',price:10},
                    {id:'02',price:30},
                    {id:'03',price:50}
                ]
            },
            methods: {
                fn:function(str){
                    //console.log(this);
                    //alert(this);
                    this.arr.push(str);
                },
                fn2: function(index){
                    //body....
                    this.arr.splice(index,1);
                }
            }
        });
    </script>
</body>
tolist

这边需要注意的是：很多同学对 原生js 有些不太熟悉，包括数组自带的一些方法，比如 push,splice等，可以去菜鸟教程，或者W3Cschool去学习一下。

标签
vue
js
js代码
虚拟机
fn
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!