第二阶段＞＞＞数据库/SQL/SSM/JDBC/核心总结

>>>数据库基础CRUD

>>>数据SQLyog可视化工具用法

>>>SQL中的聚合函数&事务

>>>SQL中索引&表关联&多表联查&SQL优化

>>>SQL优化&JDBC

>>>JDBC的注入(攻击)以及插入

>>>HTML—常用标签（做网页的）

>>>前端网页技术CSS CSS选择器/盒子模型（修饰网页的）

>>>JS javascript的脚本语言（让网页变成动态的）

>>>JS语句、数组、函数、对象、DOM、json

>>>vue入门案列概念作用书写格式

>>>vue的实际应用及操作

>>>数据库基础CRUD

数据库的查询创建以及删除方法

查询指令：show databases;

创建指令：create database cgb210801 default character set utf8; #指定字符集,避免了中文乱码#

删除指令：drop database cgb2108;

表的查询创建以及删除方法

第一步：use cgb210801; #先使用指定的数据库

指定字段、行(一条一条的记录)和列(每条记录的相关数据)

第二步：创建表 create table+表名

mysql> create table +表名(

-> id int(11),

-> door_name varchar(100),

-> tel varchar(20) -> );

第二步半：查看表结构/字段

语法：desc + 表名（理解查看的是先查看下属性以及column字段）

第三步：表里添加字段（列）

语法： alter table 表名添加字段字段名称字段类型(字段长度)

mysql> alter table student add column address varchar(100);

第四步：插入记录(理解赋值)

语法: 插入数据表名值(字段1的值,字段2的值,字段3的值)

注意:表里有几个字段values需要提供几个值+值的顺序和字段顺序一致

mysql> insert into tb_door values(10,'test',"010-666");

第五步：查询记录(查看具体图表值)

语法: 查询所有从表名

mysql> select * from 表名;

第六步：修改记录(替换指定字段的值)

语法: 更新表名设置字段名=字段的新值

mysql> update tb_door set tel='010-857';

第七步：删除记录

语法: delete from 表名

mysql> delete from +表名; #删除了表里的所有记录

第八步：删除表

mysql> drop table student;

备注：1.防止中文乱码 set name gbk;

(8,2) 后面的2 意思小数保留2位

2、字段理解为表中名称

>>>数据SQLyog可视化工具用法

SQL语法

distinct的用法>>>>用distinct关键字，去除重复的记录行

SELECT loc FROM dept

SELECT DISTINCT loc FROM dept;

意思是去除loc中重复的数据

Where的用法:>>>用来引导判断条件

Eg:select * FROM dept where deptno=40

意思查询满足部门编号为40的行

注意：where里面不能用别名，而且不能出现聚合函数

like的用法>>>用来模糊查询

通配符%代表0到n个字符，通配符下划线_代表1个字符

Null的用法>>>用来筛选过滤数据

select * from emp where mgr is null --过滤字段值为空的

select * from emp where mgr is not null --过滤字段值不为空的

between and的用法>>>用来取范围内数据

SELECT * FROM emp WHERE sal BETWEEN 6000 AND 10000

limit的用法>>>查看一个表格的前几条

比如select*from 表名 limit 2 --这个样子意思就是列出表格中的前两条

order by的用法>>>>默认升序降序

SELECT * FROM emp order by sal #默认升序

SELECT * FROM emp order by sal desc #降序

As+x的用法 >>>>可以给列起别名一般也剋以不用加 as 什么什么

###前面可以不用加As

SELECT ename,AS X UPPER(ename) FROM emp #as x 是替换列名字

总结char和varchar的区别(里面int char或者varchar 用哪个呢)

char为定长字符串，char(n)， n最大为255

varchar为不定长字符串，varchar(n)， n最大长度为65535

>>>SQL中的聚合函数&事务

聚合函数和基本函数>>>>区分开来

总结：

使用了聚合函数就是聚合列，没使用聚合函数就是非聚合列,用到2个聚合函数就需要分组
补充数据库属性即是数据库字段，指数据库中表的列

知识点1

查询结果中，如果出现了聚合列和非聚合列，一定需要分组

SELECT sal, MAX(sal) FROM emp

sal为非聚合列 MAX(sal)为聚合列 count(1)为聚合函数统计的作用

上述一般版本sqlyo会报错

知识点2

Group by

SELECT MAX(sal) MAX,deptno FROM emp GROUP BY deptno HAVING MAX(sal) max>10000

标记黄色为函数中别名判断时可只用别名判断即可

知识点3

having和where最大的区别是什么？

聚合函数 count用法>>>>

select count(*) from 表名 --意思是统计用的意思，固定写法，只代表是要统计了

select count(1) from emp --意思和*一样，不过1比*高效

select count(comm) from emp --意思是统计comm中非null的数据

聚合函数max / min的用法>>>最大最小

select max(sal) from 表名 --求字段的最大值

slect min(sal) min from 表名--求字段的最小值

select min(sal) min,max(sal) max from emp --求出字段但的最小值和最大值

SELECT ename,MAX(sal) FROM emp group by ename --筛选出来sal并且进行分组

聚合函数sum/avg的用法>>>求和以及平均

select count(*) from emp --总记录数

select sum(sal) from emp --求和

select avg(sal) from emp --平均数

分组group by的用法>>>数据分组

SELECT deptno,MAX(sal),AVG(sal) FROM emp

GROUP BY deptno >>>按照deptno分组

SELECT job,MAX(sal),AVG(sal) FROM emp

GROUP BY job >>>按照job分组

SELECT deptno,job,MAX(sal),AVG(sal) FROM emp

GROUP BY deptno,job >>>>deptno和job都满足的

分组中having的用法>>>

比如:select deptno, AVG(sal) from emp group by deptno #按部门分组 having AVG(sal)<8000 #查询条件,类似where,但是group by只能配合having

什么是事务？概念以及用途功能

事务就是将一堆的SQL语句(通常是增删改操作CDU)绑定在一起执行的一个逻辑工作单元

关于约束以及使用的方法（6种约束类型）

1.非空约束 not null 意思不能为空要在表里填值

2.唯一约束 unique 意思表格里面列里面的数字不能重复值是唯一

3.主键约束 primary key 意思是一个字段在表里只能有一个比如id列不能重

4.外键约束 foreign key 创建表2 表2中id列中值要和表1的一样不然报错

5.默认约束 default 默认每列都有这个值

6.检查约束 check 用比较符号一旦超过一个值就会报错

>>>SQL中索引&表关联&多表联查&SQL优化

什么是索引，索引有什么用？怎么用?

索引是一种排好序的快速查找的数据结构，抽象化一点比如空间折叠跳跃这个意思，这些数据结构以某种方式指向数据，这样就可以在这些数据结构上实现高效的查找算法。

索引的分类：

单值索引：一个索引只包括一个列，一个表可以有多个列

唯一索引：索引列的值必须唯一，但允许有空值；主键会自动创建唯一索引

复合索引：一个索引同时包括多列

抒写格式

单值索引：create index+索引名字+on+表名(字段名);

唯一索引：CREATE+UNIQUE+INDEX+索引名+ON+表名(字段名)

复合索引：CREATE+INDEX+索引名+ON+表名+(字段1, 字段2)

使用索引的方法的格式：

EXPLAIN SELECT * FROM+表名+WHERE—+字段名=XX

删除索引 alter+table+表名+drop+index+索引名

>>>>>>表的最左特性

当我们创建一个联合索引（复合索引）的时候，如(k1,k2,k3)，相当于创建了（k1）、(k1,k2)和(k1,k2,k3)三个索引，这就是最左匹配原则，也称为最左特性。

>>>>>>关于索引的总结

1.索引是数据库优化

2.表的主键会默认自动创建索引

3.每个字段都可以被索引

二、视图view是什么？有什么用？

就是一个可视化的表，就是把sql执行的结果，直接缓存到了视图中。下次再发起相同的sql，直接查视图。用的少了解。

抒写格式：

三、表关联是什么，怎么用？

字面意思把有关联的表产生关系。比如商品和商品分类，老师和学生，教室和学生。

四种表关系：

一对一>>>>>>QQ和QQ邮箱，员工和员工编号

一对多 >>>>>>>>最常见，部门和员工，用户和订单

多对一>>>>>>>>一对多反过来，员工和部门，订单和用户

多对多 >>>>>>>>>>>> 老师和学生，老师和课程

表的格式特点：

1.表都以s结束，标识复数

2.字段多以表的首字母作为开头，在多表联查时，方便标识出是哪个表的字段

四、多表联查是什么？作用？

多表查询是指基于两个和两个以上的表的查询。在实际应用中，查询单个表可能不能满足你的需求，如显示员工表emp中不只显示deptno，还要显示部门名称，而部门名称dname在dept表中。

多表联查三种方式：

笛卡尔积

用的很少格式是：select * from 表1，表2

连查询内和外

内连接 inner join

左（外）连接 left join

右（外）连接 right join

嵌套查询/子查询

概念：子查询是指嵌入在其他select语句中的select语句，也叫嵌套查询。子查询执行效率低慎用。记录少时效率影响不大、图方便直接使用，记录多时最好使用其它方式替代。

eg:--列出tony所在部门的所有人员

select deptno from emp where ename='tony';

select * from emp where deptno = (select deptno from emp where ename='tony');

>>>SQL优化&JDBC

熟记十种SQL优化的

JDBC是简称，全称是java database connecition 专门用来完成java程序和数据库的连接的标准技术就是通过java来操作数据库

使用步骤：

导入jar包(使用JDBC提供了丰富的工具类)
提供连接数据库的参数（用户名root 密码root 端口号3306）
在java程序中发起SQL语句操作数据库
如果数据库有查到的结果，返回给Java程序

>>>JDBC的注入(攻击)以及插入

JDBC总结：

什么是JDBC ？java程序连接数据库但标准方案，java database connectivity
使用JDBC步骤 1导入jar包 2注册驱动获取数据库的连接，3获取传输器()，4执行SQL，5解析结果集(查询会返回增删改不会返回只会返回影响的行数)，6关闭资源
传输器statement和prepastatement有什么区别？

stateme不安全，可能发生Sql攻击，而且低效

statemen和preparstatem有什么关系？

后者继承于前者

SQL攻击？

原因是SQL 中出现了特殊符号(注释符号) 改变了SQL语义

解决方案：使用新的传输器preparstatemen

执行SQL：限制性sql骨架，然后再给SQL设置参数

6.executeUpdate() 用来执行增删改的SQL语句，并且返回了影响行数

executeQuery() 用来执行查但SQL语句，并且返回了结果集ResultSet

低耦合高内聚：代码与代码相关性差代码复用性高

>>>HTML—常用标签（做网页的）

1.HTML超文本标记语言实现页面展现，形成静态网页

2.CSS层叠样式表实现页面美化

3.JS javascript脚本语言实现页面前端和后端的数据交互，形成动态网页

4.React facebook出品前端、移动端JavaScript框架

5.Angular google 出品基于TypeScript的开源 Web 应用框架

6.Vue 国人出品，阿里收购构建用户界面的渐进式框架，自底向上开发

7.NodeJS 基于 Chrome V8 引擎的 JavaScript 运行环境

一、什么是html的标签 <a>标签</a>

HTML是一门标记语言，标签分为开始标签和结束标签，并且每个标签都有属性，如果有多个属性应该有分号隔开。

eg:<a href="" target="" name="" id=""></a>

备注：换行符 <br/>

二、学习标签>>>>>>>>列表/标题/图片/超链接/input/表格/表单标签

第一个是列表标签：分为有序标签和无序标签

无序列表的书写格式：<ul 可填写类型=“”> <li>填写文字</li> < /ul>

--> <ul type="circle"> 备注：代表这里无序的列表类型是圆圈

</ul>

有序标签的书写格式：<ol 可填写类型=“”> <li>填写文字</li> < /ol>

--> <ol> 备注：这里不填写类型默认就是1234开始

<li>中国</li>

<li>美国</li>

<li>小日本</li>

</ol>

第二个是标题标签：h1-h6

书写格式：

<h1 align=”center”>我是1号标题</h1> 备注align=”center”意思文字居中

第三个是图片标签：img src

书写格式：

上面的src是指的是父级的目录 border边框 width宽度 height高度

第四个是超链接标签：href

书写格式：

上面href为超链接的固定属性 target= 是指定打开这个链接的方式点击后在新的窗口中打开

回到顶部书写格式：

<a name="_top">java从入门到精通</a> 备注: 先制定一个顶部格式name属性=_top

<h6>你好java</h6>

<a href="#_top">回到顶部</a> 备注：最后使用#_top格式来指定返回顶部

第五个是input标签：

一些常用的input

<input type="text" /> 普通文本框

<input type="password" /> 密码

<input type="radio"/>男单选框

<input type="number" /> 数字值

<input type="week" /> 日历

<input type="checkbox" />杨幂复选框

<input type="submit" value="提交数据"

第六个是表格标签：

书写格式：

table表格标签

tr表格里的行 td 表格里的列 border:表格的边框大小 cellspacing:单元格的间距

bgcolor:背景颜色 width:表格的宽度 align:位置 bordercolor: 表格的背景颜色

eg:<table border="1px" cellspacing="0" bgcolor="antiquewhite" width="30%" align="center">

<tr>

<td colspan="2">11</td> 

< <td>12</td> -

</tr>

<tr>

<td rowspan="2">23</td> 

</tr>

<tr>

</tr>

</table>

第七个是表单标签：

表单注意：

form标签+必须配置name属性(才能输入东西)+必须有submit按钮

提交数据的两种方式：

1.get方式：被拼接的在地址栏，坏处是不安全不推介

2.post方式：不方便看但是安全

method属性用来指定数据的提交方式

默认是get提交的数据

书写格式：

问题：如何做筛选功能？抒写格式是什么？

问题：如何做圆圈方框的功能？抒写格式是什么?

<input type="radio" name="sex" value="1"/>男 备注：radio为圆圈按钮

<input type="radio" name="sex" value="2"/>女

<input type="checkbox" name="like" value="1"/>篮球 备注：checkbox为框

<input type="checkbox" name="like" value="2"/>足球

<input type="checkbox" name="like" value="3"/>排球

其他

<span> hello</span>

>>>前端网页技术CSS CSS选择器/盒子模型（修饰网页的）

什么是CSS？作用是什么？在前端里面是起到什么作用的?

CSS 英文名全程(Cascading Style Sheets) 意思是层叠样式表;

从而联想到它的作用就是修饰HTML超文本语言的一个技术，增强网页的展示能力(用来调颜色大小字体位置）

最终是想把CSS从HTML网页代码中分离出来，从而提高CSS代码的复用性(在head中使用，根据body部里需求进行调用修饰，灵活这样就使用重复率高)

位置:

行内CSS:只作用在当前行, 给当前元素使用style属性来修饰样式

eg: html <h1 style="text-align:center;">我是h1</h1>

内部CSS: 在HTML代码里使用style标签,包裹着CSS代码.提高了CSS代码的复用性

<style>

选择器,,,

</style>

外部CSS: 把HTML代码和CSS代码分离,在HTML中在建个CSS文件，粘贴过去

二、CSS中的几种选择器

理解所谓的选择器就是在HTML中帮助我们选中想要修饰的标签 <a>< a/> 这就是标签

选择器分为：

基础选择器(标签名选择器/class选择器/id选择器)

高级选择器(分组选择器/属性选择器)

1.标签名选择器

作用：选中网页中的所有元素

eg：内部CSS里面<style></style>书写

div{ 里面是属性调整颜色大小背景颜色字体

color:red;

}

2.class选择器

作用：给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。

eg: body先里面整个

<p class=”b”>我是class的b</p>

内部CS中开始修饰

.b{

class选择器的书写方式里面在添加属性可以点a bcd这样子的标签也就是提高了CSS代码的复用性。
}

3..id选择器

作用：根据id属性的值选中元素,要求id的值不能相同

步骤:给元素添加id属性 + 通过#获取值

eg: 页面展示区body内创建

CSS代码修饰则为：

#c{

border-style:solid; border-radius:25px; 边框样式

}

4.分组选择器

作用:把多种选择器的结果,组成一组进行修饰,逗号隔开

eg：展示页面body里面

CSS代码

.x , #y , input{ font-size: 20px; }

5.属性选择器

作用：按照标签的属性来选择元素,标签名[属性名]

eg:展示部分

CSS代码

a[href]{ /* 选中拥有href属性的a标签*/

font-size: 50px;

}

input[type='text']{/*选中type="text"的input设置背景色 */

background-color: green;

}

三、CSS中的盒子模型，啥东西？有啥用？啥价值？

CSS认为HTML里的每个元素都是一个盒子。

所谓的每个元素就是一个标签就算是一个元素理解。

盒子与盒子之间的距离，可以设置盒子自身的边框，盒子里面的内容也就可以这是，理解成生活中的文档word每个word有各种功能加粗颜色页面距之类，不用盒子理解就是不同的word文档。

边框(border) : 盒子自身的边框，设置宽度、颜色、样式(实线圆角虚线)

内边距(margin): 盒子自身里面的内容，盒子的边框的距离,可以设置左边距,右,上,下

外边距(border): 盒子与盒子之间的距离，设置盒子盒子之间的左右边距，上下之类

>>>JS javascript的脚本语言（让网页变成动态的）

什么是JS？有啥用？又是怎么用的呢？

Javascript 字面意思 (java的脚本语言，属于弱类型语言) 怎么理解？就是用来增强网页的交互性也就是让网页有动态效果，比如说错误警告弹出框(后端给个效果，用户端显示)，密码输入不正确的振动之类。并且这种脚本语言具有跨平台性，也就是在不同的浏览器，有一定安全性。

JS是一门 基于对象和事件驱动的脚本语言？

意思这个玩意就是js和java一样,可以创建对象并使用对象，js代码必须想办法触发才会执行,常见事件: 单击/双击/鼠标划入划出…而且 js的运行必须在浏览器里

如何使用JS这个玩意呢？

首先是书写一般是写在head里面 <script> </script>

其次记住一个用法 alert 意思是弹出框笼统理解就是一个print输出

eg:

第一步先在head里面创建一个JS代码

第二步在body里面写标签 想想怎么触发alert这个弹框按钮

<div οnclick= “alert(“跳过了”)” >我是div</div>

其它标签同理

关于JS的语法和语句的书写方式

插眼知识点：sum=sum+i;和sum+=i;区别

sum=sum+i 会转成int类型大转小 int-byte 强制转加（byte）

sum+=i; 还是byte类型这个是底层实现了byte

备注一些基本的数据类型number/string/boolean/null/undefined

<*JS语句>

首先这个一般都写在内部里面，格式还是<script>代码</script>

基本数据类型：

注意：在JS中，数值类型只有一种，就是浮点型。

所有类型的变量都是用var关键字定义。并且参数的类型可以随时转换。

总结：JS语法中 var用来修饰变量

const用来修饰常量(eg:const b= 10 常量值不能修改)

let用来修饰变量，并且有作用域

>>>JS语句、数组、函数、对象、DOM、json

一、JS的数组

本质其实是在单个的变量中存储多个值(其实就是一个容器)

它可以存储数值、字符串、布尔值、undefined、null、对象、函数

声明方式:

JS数组声明方式一：

var arr1 = new Array();//声明一个空数组一般这个不常用

var arr2=new Array(“hello world”, “nihao”, true);//给数组赋值处理

这里一般不用alert(arr1);

JS数组声明方式二：

let b=[];//声明这是个空数组一般是用let 不用var let有作用域

b=[“hello,world”, 1.16,”nishishui”,true,null];

JS里数组的高效for循环

增强for循环..foreach--for in 注意如果在java里增强for循环的写法 for(var i : b){}

for(var i in b){ // 这里in 相当于java中的分号

console.log(i);//i是下标

console.log(b[i]);

JS的函数(理解也就是方法)

函数创建方式一：

声明：function 函数名称([参数列表]){ 函数体 }

调用: 函数名称([参数列表]);

eg: function a(){//这是一个空的函数

console.log("调用成功");

}

a();//这样来调用函数

function b(x,y){//定义含参函数 alert(x+y); } b(1,"2");//函数调用 b(1,2);//函数调用

函数创建方式二：

声明：var 函数名称 = function([参数列表]){ 函数体 }

调用: 函数名称([参数列表]);

eg:var fn2 = function(){ //定义无参函数

alert(100); } fn2(); //函数调用

var fn3 = function(x,y){ //定义含参函数

alert(x*y); } fn3(0.32,100);//函数调用

var e = function(x,y){ //定义有返回值含参函数

return x-y;

}

alert("函数返回值:::"+ e(1.1,10.9) ); //函数调用用来接住return

JS的自定义对象

利用function关键字声明对象，用new关键字创建对象

JS对象方式一：不常用

function person(){}//声明对象

let p=new person();//创建对象

p.name="tony"; p.addr="北京";

console.log(p.name+p.addr);

JS对象方式二：简洁常用

let car={

//资源名：资源的值

/设置属性

"name" : "BMW",

"price" : 9.9,

//设置函数：

tart : function(){

}

console.log(car);

什么是DOM？做什么的？有什么用呢？

全称是文档对象模型(HTML DOM (文档对象模型)

它是给JS提供的一种用来快速解析HTML网页的技术。

做什么的？

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树，树状结构的！

有啥用这个DOM？

利用Document对象提供的API操作元素

常用功能：

getElementById(id属性的值)--通过id属性的值获取元素(只能获取到一个)

getElementsByName(name属性的值)--通过name属性的值获取元素(获取到多个,存入数组)

getElementsByClassName(class属性的值)--通过class属性的值获取元素(获取到多个,存入数组)

getElementsByTagName(标签名的值)--通过标签名获取元素(获取到多个,存入数组)

write(数据)--向网页输出指定数据

innerHTML--获取元素的内容// eg:c onsole.log(x[2].innerHTML);//获取下标为2的元素的内容

innerText--获取元素的内容

//eg:document.getElementsByName("b")[2].innerText='<h1>我变了...</h1>' 这个意思是通过那么获取的了元素通过inner.text脚本修改文本

备注：1.doc有种用法document.getElementsByClassName("a")[1].innerHTML='我也变了...';

解释下因为getElementByTagName在指定代码段中寻找到的tag个数可能有好几个

案例里面代码body中，<p>有好几个，所以需要用[i]，即数组形式输出。

document.getElementsByName("b")[2].innerText='<h1>我变了...</h1>';

2.总结:innerText无法解析HTML标签，innerHTML是可以解析HTML标签的

什么是JSON？做什么的？有什么用呢？

JSON(JavaScript Object Notation)浏览器和服务器交互数据的格式,本质上就是一个字符串

JSON 是用于存储和传输数据的格式。通常用于服务端向网页传递数据.

* JSON 使用 JavaScript 语法，但是 JSON 格式仅仅是一个文本。文本可以被任何编程语言读取及作为数据格式传递。好处方便清晰明了。

用法及定义：

var a = '"name":"tony"' ;//json串 K V键值对

var b = '{"name":"jack","age":"20"}' ;//json对象

var c = '[{"name":"rose","age":"20"},{"name":"jerry","age":"10"}]' ;//json数组

JSON 语法规则

1.数据为键/值对

2.数据由逗号分隔

3.大括号保存对象

4.方括号保存数组

相关函数

JSON.parse( )>>>> 用于将一个 JSON字符串转换为 JavaScript 对象

JSON.stringify( )>>>>>>用于将 JavaScript值转换为 JSON 字符串

>>>vue入门案列概念作用书写格式

一、什么是Vue？做什么的？有什么用呢？

vue是一套构建用户界面的渐进式框架。基于JavaScript的渐进式前端框架

VUE特点：

1.一个轻量级的mvvm框架，双向绑定，数据动态更新(修改一个另一个也会同步网页登录修改密码保存后也会同步这样理解)

2.是一个渐进式框架，其核心思想是数据驱动、组件化的前端开发

3.原生html页面是通过js 操作的是dom，而vue.js操作的是数据。

4.优点显而易见，从而屏蔽了使用复杂晦涩难记的dom结构api

知识点：MVVM框架

view: 视图>>>DOM

ViewModel 通讯>>>>观察者

Model 数据>>>>javascipt对象

VUE怎么用呢？

第一步：.引入vue.js文件，src指定js文件的位置原则:先找到和自己同级的资源

-->eg: <script src='./vue.js'></script> //这个写在head里面

第二步：写在body中准备数据渲染区:是指在指定位置展示vue提供的数据 {{ }} 插值表达式

{{msg}}获取vue提供的msg的值

<div id="app"> {{msg}} </div>

第三步：创建Vue对象,使用vue准备数据,让第二步获取数据

var a = { //js对象

msg:'hello vue~~~' }

new Vue({

el:"#app" ,

data: a })

</script>

>>>vue的实际应用及操作

一、vue的方法method抒写格式？
data:{

str:"hello",

methods:{ //1.创建vue的方法/函数

//函数名:函数定义

//show:function(){//改造下用下面的简写

show()｛

console.log("show()调用成功")

//sout:function(x){//改造下用下面的简写

sout(x){定义时有参数,调用时也需要传入参数

console.log('sout()调用成功'+x)

}

二、data的三种写法？

第一种：

data:{

msg:'vue'

}

第二三种：

data:function(){//方便的把组件间的关系实现松耦合这是第三种

data(){//同上，只是一种简写形式

return{

msg:'hi~VUE',//返回一个数据可以有多个除了hi 用，隔开

car:{

name:'BMW',

run(){

alert(1)

}

三、Vue的函数之对复杂数据的解析

记忆案列：

//tostring:function(){ 下面是改造的简写形式

tostring(){

console.log(this.name+","+this.price)

}

//创建数组`

arr:[{//vue定义数组下面是下标为0对象

firstname:"王",

lastname:"五"

}

四、Vue指令是什么意思？有哪些作用？

vue指令是vue框架提供的,方便的展示网页元素语法.标识v-前缀.
使用: 引入vue.js + 在标签中添加特殊的属性v-
常见指令:

v-if

v-for

v-bind

v-…