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

随机推荐

We are writing to let you know we have removed your selling privileges
Hello, We are writing to let you know we have removed your selling privileges, canceled your listin ...
15 分钟用 ML 破解一个验证码系统
人人都恨验证码——那些恼人的图片,显示着你在登陆某网站前得输入的文本.设计验证码的目的是,通过验证你是真实的人来避免电脑自动填充表格.但是随着深度学习和计算机视觉的兴起,现在验证码常常易被攻破. 我拜 ...
python3【基础】-字符串常用的方法
字符串一个最重要的特性就是不可修改. name.capitalize() 首字母大写 name.casefold() 大写全部变小写 name.center(50,"-") 输出 ...
HTML页面模板代码
作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正 HTML页面模板代码常用的页面模板 & ...
第17次Scrum会议(10/29)【欢迎来怼】
一.小组信息队名:欢迎来怼小组成员队长:田继平成员:李圆圆,葛美义,王伟东,姜珊,邵朔,冉华小组照片二.开会信息时间:2017/10/29 17:20~17:42,总计22min.地点:东北师 ...
UI分析之石家庄铁道大学官网
点击进入石家庄铁道大学的官方网站,首先映入眼帘的是“石家庄铁道大学”七个大字,配以蓝色背景和学校的俯瞰图,给人一种严谨又不失清新的感觉. 学校的网站首页界面主要有九个界面,分别是网站首页,学校概况,组 ...
CS小分队第一阶段冲刺站立会议（5月14日）
昨日成果:为抽号计时器添加了第一类抽号,基本实现界面,功能出现了一些错误遇到问题:我预想通过timer控件来实现随机抽号而拜托随机生成数,但是出现了只有个位随机滚动,其他位数不动的现象,我预计是数值 ...
lintcode-496-玩具工厂
496-玩具工厂工厂模式是一种常见的设计模式.请实现一个玩具工厂 ToyFactory 用来产生不同的玩具类.可以假设只有猫和狗两种玩具. 您在真实的面试中是否遇到过这个题? Yes 样例 ToyF ...
【week11】psp
本周psp 项目内容开始时间结束时间被打断净时间 11.26(星期六) 看论文 psiBlast 9:00 12:00 5 175 11.28(星期一) 做作业设计模式作业 ...
[Oracle收费标准]
http://www.oracle.com/us/corporate/pricing/technology-price-list-070617.pdf 1: 数据库 2. 中间件 3. weblogi ...

第1章-初识Vue.js