一、初识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. 为什么要 ...

随机推荐

C++进阶训练——停车收费系统设计
一.简介经过一段时间的c++基础学习,是时候做一个较为全面的.运用c++功能的较复杂的项目练练手了. 运用软件:Visual Studio (VS). 题目:c++停车收费系统设计(某本编程书进 ...
I understand that you would like to know about the Amazon Giveaway
Dear Seller, Greetings from Amazon Seller Support. From your mail, I understand that you would like ...
大前端-全栈-node+easyui+express+vue+es6+webpack+react
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正视频来源:https://www.bil ...
Linux学习——echo和read命令用法
转载自http://www.runoob.com/linux/linux-comm-read.html http://www.178linux.com/76331 echo命令本文列举了echo命令 ...
Alpha版发布 - 感谢有你们
在本次alpha开发的过程中,很感谢组长王航对我信任,让我统筹大家的工作任务和进度,使我对项目管理有了深刻的理解. 我也要感谢邹双黛,因为我以前很少做文字类的工作,写东西非常生硬,邹双黛即使在有做家教 ...
[转]精选！15个必备的VSCode插件
Visual Studio Code 是由微软开发的一款免费.跨平台的文本编辑器.由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱. 就像大多数 IDE 一样,VSCode 也有一个扩展和主题市 ...
Alpha-6
前言失心疯病源6 团队代码管理github 站立会议队名:PMS 530雨勤(组长) 今天完成了那些任务 18:30~20:30 完成blob类下关于预测车辆下一个位置的函数代码签入github ...
JAVA之路(一)
距离做下复习JAVA并学好JAVA的决定已经过去一周了,我买了慕课网的JAVA入门视频,在图书馆借了三本关于JAVA的书——两本是JAVA入门经典,一本是JAVA WEB开发宝典.我的计划是短时间内复 ...
DWZ-JUI+UEditor第二次不显示，UEditor异步加载第二次不显示的解决方案
使用UEditor-1.4.3中遇到第一次跳转到使用UEditor的界面后,编辑器加载正常,返回后第二次再跳转到这个界面就出现UEditor无法正常加载, 也没百度到答案,看UEditor源码,发现这 ...
软工alpha阶段个人总结
一.个人总结类别具体技能和面试问题现在的回答(大三下) 语言最拿手的语言之一,代码量是多少? java,代码量在一万行左右语言最拿手的语言之二,代码量是多少? C语言,代码量在五千行左右 ...

第1章-初识Vue.js