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

随机推荐

loadrunner socket协议问题归纳（0）
一.概述 Loadrunner拥有极为丰富的工具箱,供予我们制造出各种奇妙魔法的能力.其中就有此次要讨论的socket套接字操作. 二.socket概述 soc ...
“取件帮”微信小程序宣传视频链接及内容介绍
1.视频链接视频上传至优酷自频道,地址链接:http://v.youku.com/v_show/id_XMzg2NTM3OTc5Ng==.html?spm=a2hzp.8253869.0.0 2.视 ...
【软工实践】第四次作业--爬虫结合WordCount
结对同学博客链接本次作业博客链接 github项目地址具体分工我主要负责用python写爬虫部分,他负责C++部分 PSP表格解题思路代码的核心思路是利用爬虫,爬取论文网址,之后吧对应信息( ...
HDU 1121 Complete the Sequence 差分
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1121 Complete the Sequence Time Limit: 3000/1000 MS ...
HDFS shell命令行常见操作
hadoop学习及实践笔记—— HDFS shell命令行常见操作附:HDFS shell guide文档地址 http://hadoop.apache.org/docs/r2.5.2/hadoop ...
（转）利用PHP的debug_backtrace函数，实现PHP文件权限管理、动态加载【反射】
原文地址:http://www.cnblogs.com/melonblog/archive/2013/05/09/3062303.html 原文作者:豆浆油条 - melon 本文示例代码测试环境是W ...
Oracle判断字段中是否包含中文(若有，取出该中文的方法)
一.问题说明在处理数据的时候,需要判断某个字段字符串中是否有中文,若有则取出中文. 二.解决办法首先如何判断某个字段字符串中是否有中文.这里介绍三种方法: 1.采用ASCIISTR函数说明:AS ...
excel copy cell & batch operation & checkbox
excel copy cell & batch operation & checkbox excel 右下角,下拉/双击 (复制 cell) 注意: 不是选择列
HDU4473_Exam
很考验智商的一个题目,赛后看完别人的题解后秒懂了. 首先定义一个函数f(x)表示a,b的有序组合情况数使得a*b为x的一个约数. 现在给定你一个n,要你求出f(1)+f(2)+……+f(n): 题目智 ...
CTSC2012-Cheat
题意给出一些母01串,多次询问,每次询问一个01串,问一个最大的\(L\),使得可以在询问串中选出若干个不相交的,长度大于等于\(L\)的子串,这些子串都在母串中出现过,且子串的长度和大于等于询问串 ...

第1章-初识Vue.js