第1章-初识Vue.js
一、初识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. 为什么要 ...
随机推荐
- 请教Amazon FBA里面Label Service, Stickerless, Commingled Inventory是什么意思?
Accept Label Service接受标签服务,选择了以后下面的操作中会有一个让您打印标签的流程,您就可以按照FBA流程提示进行每一步标签服务的操作. Accept Stickless, Com ...
- C++ STL 优先队列 priority_queue 详解（转）
转自https://blog.csdn.net/c20182030/article/details/70757660,感谢大佬. 优先队列 引入 优先队列是一种特殊的队列,在学习堆排序的时候就有所了解 ...
- Scrum立会报告+燃尽图（十月二十三日总第十四次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2246 项目地址:https://git.coding.net/zhang ...
- 2018-2019-20172329 《Java软件结构与数据结构》第四周学习总结
2018-2019-20172329 <Java软件结构与数据结构>第四周学习总结 经过这样一个国庆节的假期,心中只有一个想法,这个国庆假期放的,不如不放呢!! 教材学习内容总结 < ...
- 将 Spring 和 Hibernate 与 WebSphere Application Server 一起使用
本文摘要 如果您考虑将 Spring 或 Hibernate 与 IBM® WebSphere® Application Server 一起使用,则本文向您阐述了如何配置这些框架,以适用于 WebSp ...
- 转 docker的下载与安装
百度网盘下载地址:https://oomake.com/download/docker-windows 道客地址: https://link.jianshu.com/?t=https://get.da ...
- Git回滚merge操作
执行完merge操作后,没有修改代码 1.命令 ⑴ git reflog 查看merge操作的上一个提交记录的版本号 ⑵ git reset –hard 版本号 这样可以回滚到merge之前的状态 2 ...
- Java容器深入浅出之String、StringBuffer、StringBuilder
对字符串的花式处理一直是现代应用系统的主要操作之一,也是对Java基础知识考察的重要方面.事实上,Java字符串类的底层是通过数组来实现的.具体来说,String类是固定长度的数组,StringBuf ...
- Java Servlet简介
一.了解Servlet的概念 Servlet定义 Servlet是基于Java技术的Web组件,由容器管理并产生动态的内容.Servlet引擎作为WEB服务器的扩展提供支持Servlet的功能.Se ...
- CSS自适应导航菜单
以下是一个简单实例,可以通过学习了解响应工菜单的制作. html <nav class="nav"> <ul> <li class="cur ...