一、初识Vue

1.1、本次我们学习的内容

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

　　交互：网络请求

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

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

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

1.2、内容：

　　了解 Vue.js 的概念

　　理解MVC 思想

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

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

1.3、vue的前端框架

基于react后台框架- : https://ant-design.gitee.io/docs/react/use-in-typescript-cn
vue-admin：https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/chart.html#demo
更多框架：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去学习一下。

第1章-初识Vue.js的更多相关文章

Vue.js 学习笔记第1章初识Vue.js
本篇目录: 1.1 Vue.js 是什么 1.2 如何使用Vue.js 本章主要介绍与Vue.js有关的一些概念与技术,并帮助你了解它们背后相关的工作原理. 通过对本章的学习,即使从未接触过Vue.j ...
通过Laravel 初识Vue.js
最近也在学习laravel的框, 因为之前学过tp框架, 都说laravel是最优雅的框架,所以开学后忍不住去试试这个在国外已经火的不要不要的框架. 总的来说,对于学习完tp框架后,我觉得tp毕竟是中 ...
vue.js随笔记---初识Vue.js
1.基础要求: 1.1 HTML CSS JAVASCRIPT 1.2 模块化基础 1.3 Es6初步了解 2.vue.js 轻量级的MVVM模式框架,他同时吸收了recat和angular的优点,他 ...
初识Vue.js
一 ,什么是Vue.js? vue.js是一套构建用户界面的渐进式框架,它采用自底向上增量开发的设计.(自底向上设计方法是根据系统功能要求,从具体的器件.逻辑部件或者相似系统开始,凭借设计者熟练的技巧 ...
Vue.js-----轻量高效的MVVM框架（一、初识Vue.js）
1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...
Vue.js实战：初识Vue.js
一.Vue.js是什么简单小巧的核心,渐进式技术栈,足以应付任何规模的应用. 简单小巧指的是Vue.js 压缩后大小仅有17KB 所谓渐进式(Progressive)就是你一步一步,有阶段性地来使用 ...
Vue学习系列(一)——初识Vue.js核心
前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...
Vue.js高效前端开发 • 【初识Vue.js】
全部章节 >>>> 文章目录一.Vue概述 1.Web前端框架介绍 2.MVC和MVVM 3.Vue介绍 4.安装Vue 二.Vue使用 1.第一个Vue应用 2.Vue的双 ...
Vue.js——1.初识Vue
初识Vue.js 1. 什么是Vue.js Vue.js是前端主流框架之一,现在看招聘几乎都要求会vue 好像成了前端的代名词. Vue.js是构建界面只关注视图层V,也就是页面的, 2. 为什么要 ...

随机推荐

AndroidArchitecture
title: AndroidArchitecture date: 2016-04-08 23:26:20 tags: [architecture] categories: [Mobile,Androi ...
王者荣耀交流协会--第3次Scrum会议
Scrum master:王玉玲要求1:工作照片要求2:时间跨度:2017年10月15号 6:00--6:24 共计24min要求3:地点:传媒西楼204,会议室要求4:立会内容:1.从昨日会 ...
团队开发NABCD
团队成员介绍: 李青:绝对的技术控,团队中扮演“猪”的角色,勤干肯干,是整个团队的主心骨,课上紧跟老师的步伐,下课谨遵老师的指令,课堂效率高,他的编程格言“没有编不出来的程序,只有解决不了的bug”. ...
第八次作业（课堂实战）- 项目UML设计
本次作业博客团队信息队名:起床一起肝活队原组长: 白晨曦(101) 原组员: 李麒 (123) 陈德斌(104) 何裕捷(214) 黄培鑫(217) 王焕仁(233) 林志华(128) 乐忠豪( ...
处理了一个以前写的java小程序的异常
之前用java做过0-99的数字和英文之间的翻译,输入数字就会翻译成英文,输入英文会翻译成数字,比如输入56 输出fiftysix 输入fiftysix 输出56, 发现这会有一个异常,当输入 ...
在Asp.Net中使用Redis【本文摘自智车芯官网】
Redis安装在安装之前需要获取Redis安装包.在这里我们就不详细介绍安装包的获取了.这里Redis-x64-3.2.100.zip安装包为例通过dos命令取安装.通过dos命令找到安装目录. 在 ...
Eclipse添加Jquery和javascript的智能提示
使用Eclipse写Jquery和Javascript代码的时候,是没有智能提示的.我们可以使用一个插件来解决这个问题. 安装完成后,Eclipse会自动重启.重启之后,我们在项目上右键, 根据自 ...
Markdown的基本语法
Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的语法十分简单.常用的标记符号也不 ...
erlang转化中文为url
今天使用http get 方法时,参量中有中文而导致出错. 例如http://abc.com/abc?arg=中文,在erlang使用http:request方法失败. 后来查了url的规范,url中 ...
将Python项目生成所有依赖包的清单requirements .txt文件
在开发中不同的项目总会牵扯到各种不同作用的包安装,下面是总结一下对写好的项目自动生成依赖清单,以及在新环境下解决依赖的方法: 一:生成所有依赖清单requirements.txt 这里需要使用到的工具 ...

第1章-初识Vue.js