总结
vue day1
1.3 Nodejs&Npm安装
node自带npm（安装了node也就有npm了）
1.3.1 安装NodeJs
- 官方网站查找下载 https://nodejs.org/en/download/
- 下载后直接安装(傻瓜式,不解释)
[外链图片转存失败(img-5YoDAjDm-1566498527476)(https://note.youdao.com/yws/public/resource/cf9a910bb3b4ab2a54af029e898bd6ad/88B4188AF8A842E8AAACBAE37B68D97A?ynotemdtimestamp=1566492542548)]
- 安装后测试
- 确定环境变量中是否有nodejs的配置
- 输入命令
node -v：查看node的版本 - 输入命令
npm -v: 查看npm的版本
[外链图片转存失败(img-cV72wyvj-1566498527478)(https://note.youdao.com/yws/public/resource/cf9a910bb3b4ab2a54af029e898bd6ad/039D9C2783B04B70B5851F75A9CDF5E5?ynotemdtimestamp=1566492542548)]
- 输入命令
npm install npm@latest -g升级npm
[外链图片转存失败(img-4JlN0OVY-1566498527479)(https://note.youdao.com/yws/public/resource/cf9a910bb3b4ab2a54af029e898bd6ad/C5D59856B0CF4084B087FF1484AB8D79?ynotemdtimestamp=1566492542548)]
1.3.2 idea中的npm安装
- 安装后重启idea
- 在idea下方的Teminal即可输入命令
[外链图片转存失败(img-TyhmlMxk-1566498527481)(https://note.youdao.com/yws/public/resource/cf9a910bb3b4ab2a54af029e898bd6ad/CEBAA5317F004E8782DF01FB34A05691?ynotemdtimestamp=1566492542548)]
1.3.3 npm的使用
maven中我们有pom.xml,而在npm中我们有package.json
①.创建普通web项目
②.命令学习
- 初始化命令
npm init->初始化，会在项目中创建一个package.json文件 (相当于建了一个maven的pom.xml文件)npm init -y->初始化(跳转确定信息)
[外链图片转存失败(img-fVLHxzbH-1566498527482)(https://note.youdao.com/yws/public/resource/cf9a910bb3b4ab2a54af029e898bd6ad/5C518D1910FD4C578404C5D0002EA5B3?ynotemdtimestamp=1566492542548)]
- 安装命令
- 全局安装(所有项目都能用)
npm install -g vuenpm -g root 安装路径
- 局部安装(安装项目可以使用)
npm install/i vue
- 全局安装(所有项目都能用)
- 其它命令
- 查看某个模块：
npm list vue - 列表模块(查看所有模块)：
npm ls - 卸载模块：
npm uninstall vue - 更新模块：
npm update vue - 运行工程：
npm run dev/test/online-> 平时运行使用(需要配置,现在无法执行) - 编译工程：
npm run build-> 上线时需要进行编译(编译完扔到服务器中运行)
二.ECMAScript6
1 es6的认识
概念：是浏览器的脚本语言，可以狭义的理解为 javascript 的规范。Es6也是现在最新的 js 语法。
2 Es6的常见语法。
（1）let && const
let :
概念：用来申明变量，他有点类似于 var（但是他所声明的变量只是在let命令所在代码块的区域有效）。 1 不能重复声明 2 没有变量提升；
// var 测试结果可以在外部获取
for (var i= 0;i<10;i++) {
console.debug(i)
}
console.debug(i)
console.debug("------------------------------------")
// let 测试结果不能再循环外部获取
for (let j=0;j<10;j++){
console.debug(j)
}
/* 在作用域的外边 是不能访问的 */
console.debug(j)
const 声明 常量
var b="1234464646";
b="kkk"
// 测试结果 b 原有的值 会被修改
const v = "abac ";
v="1245";
// 原有的值是不会被修改
解构表达式
Es6 可以按照一定模式，从数组和对象中提取值，对变量进行赋值，称为解构表达式。
// 以前常用的变量赋值
let a = "张三"
let b = "李四"
// 使用解构表达式
let [a,b]=["哈哈", "呵呵" ]
console.debug(a,b);
// 数组解构
let arr = ["哪吒","金吒","木吒"];
let [a,b,c] = arr;
console.debug(a,b,c);
/* 对象 解构的表达式 */
let person={name:"娜扎",age:12}
let {name,age} =person
console.debug(name,age)
函数箭头
// 原生函数
/* 定义普通函数 */
function say() {
console.debug("定义一个普通的函数")
}
say();
/* 第一个普通函数 传入一个name 的参数 */
function sayy(name) {
console.debug("这是一个有参的函数 "+name)
}
sayy("boss");
// 函数箭头
/* 定义一个无参的箭头函数 */
var say1=()=> {
console.debug("定义一个箭头函数 ")
}
say1();
/* 定义一个带参数的箭头函数 */
var say11=(name)=>{
console.debug("这是一个带参数的箭头函数"+name)
}
say11("bigboss")
// 对象中添加函数
var ass={
/* 普通方法在对象中添加相应的参数 */
big:function (name) {
console.debug("普通写法在对象中添加相应的参数"+name)
},
/* 使用箭头函数在对象中添加相应的参数 */
big1:(name)=>{
console.debug("使用箭头函数在对象添加相应的函数"+name)
},
big2(name){
console.debug("最简写的方式")
}
}
ass.big("boss")
// 解构 与 箭头函数混合使用
/* 定义一个常量 const */
const employee={
name:"bosssssss",
age:20
}
/* 解构与箭头函数的 混合用法 */
var hai=({age})=>{
console.debug("解构与箭头函数混合用法"+ age)
}
hai(employee)
Promise
简单的说，Promise 就是一个容器，里面保存着某个未来才会结束的事件
/ * resolve ： 成功之后执行
* reject ： 失败之后执行
* */
var promise =new Promise(function (resolve,reject) {
resolve("成功进来了");
reject("失败了")
})
promise.then(function (msg) {
console.debug(msg)
}).catch(function (err) {
console.debug(err)
})
模块化管理
举列子来说，有个A.js 和 b.js 。 A.js 里面有个方法，如下( A图 )。
如果 b. js 想要调用 （ B 图） 中 js。 那么( A 图 ) 中 必选要有 export util
导出，而在 b.js 中必须要 import util from ‘b.js’ 有导入 如 （B 图）
A( 图 )
const util={
add(a,b){
return a+b;
}
}
// 导出
export util
/* 模块化导出的简写模式 */
/*export default{
add(a,b){
return a+b;
}
}*/
/* 可以导入多个数据 比如数组 和 对象 */
var name="kkk"
var age=20
export {name,age};
B( 图 )
// 模块导入
import util from 'b.js'
util.sun(4,5)
/* 批量导入 */
import {name,age} from 'b.js'
console.debug(name,age)
最后引入html中
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 模块化 在有些浏览器中是不能访问的 -->
<script src="b.js"></script>
</head>
<body>
</body>
</html>
vue入门
特点；
1 轻量级；vue.js 体非常小，并且不依赖其他的基础库
2 数据绑定： 对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
3 指令；内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
4 插件化；Vue.js核心不包含Router、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
5 组件化 ：组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
一 ，el，data && method
使用vue的三步
1 引入 vue.js 2 准备被挂载的容器 3 js 完成挂载
El
el ：挂载
挂载可以使用id , class， 以及 标签
但是如果有相同的class 和 标签 就会把原有的值个覆盖掉，
所以一般使用 id 因为 id 唯一且不相同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// 1 引入vue 的js
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 创建容器-->
<div id="app">
{{msg}}
</div>
<!-- 3 js 完成挂载 也就是说让他与容器发生关系 -->
<script >
new Vue({
/*
el ：挂载
挂载可以使用id , class， 以及 标签
但是如果有相同的class 和 标签 就会把原有的值个覆盖掉，
所以一般使用 id 因为 id 唯一且不相同
* */
el:"#app",
data:{
msg:"好嗨哟"
}
})
</script>
</body>
</html>
data
- data是咱们的数据
- 获取数据有两种方式
- 直接在js中获取/设计
- 在表达式中来获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
// 1 引入 vue的js 文件
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
// 2 创建容器
<div id="app">
{{msg}}<br/>
{{age}}<br/>
{{hobbys}}<br/>
{{dept}}<br/>
{{dept.id}}
</div>
// 3 与容器发生关系
<script >
new Vue({
el:"#app",
/* data 表示这个数据可以在 容器中取获取
* 可以是对象， 数组，字段 等......
* */
data:{
msg:"唉",
age:20,
hobbys:["yy","oo","xx"],
dept:{
id:20,
name:"boss",
sex:true
}
}
})
</script>
</body>
</html>
methods
-
指的是咱们的方法元素
-
调用方法的位置
- 在js中直接调用
- 可以用表达式调用
-
可以直接使用this获取到data中的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> // 1 引入 vue.js <script src="../node_modules/vue/dist/vue.js"></script> </head> <body> <!--表达式中可以直接调用里面的方法 --> // 2 创建容器 <div id="app"> {{age}} </div> // 3 与容器发生关系 <script > var v = new Vue({ el:"#app", data:{ age:20 }, /* 会把原有的值 覆盖掉 应为用了this 指向了data中 age */ methods:{ say(){ this.age=21 } } }) v.say(); </script> </body> </html>vue的生命周期
从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
[外链图片转存失败(img-EXHccwo1-1566498527484)(https://note.youdao.com/yws/public/resource/cf9a910bb3b4ab2a54af029e898bd6ad/9DB7E3A5F50049538F8B8E7D8D4ADFBC?ynotemdtimestamp=1566492542548)]
钩子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 引入vue的js 文件 2 创建容器 3 与容器发生关系 -->
<div id="app">
{{msg}}
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"ooo"
},
/* vue 内部加载完成之后 created */
created(){
alert(11)
this.msg="kkkk"
},
/*挂载完成之后执行 也就是与容器发生关系后执行 */
mounted(){
alert(555)
this.msg="ppp"
}
})
</script>
</body>
</html>
mvvm
双向绑定 改变一方 ，另一方也会改变 ( 知道意思，但是理解还未透彻 )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- 引入vue .js 的包 创建容器 与容器发生关系 -->
<div id="app">
{{msg}}<br/>
<!-- 双向绑定 改变一方 ，另一方也会改变
v-model： 这是一个指令
-->
用户名<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"这是一个值试试"
}
})
</script>
</body>
</html>
vue 的表达式
- 可以使用四则运算符
- 可以使用三目运算符
- 字符串,对象,数组都可以直接操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!--引入vue.js 创建容器 与容器发生关系 -->
<div id="app">
<!-- vue的表达式和js 非常相似 -->
{{msg}},{{4+4}}<br/>
{{num+num2}}
<!-- 还可以做三木运算 重点注意 三木运算-->
{{sex?"男":"nv"}}
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"这是一个值",
num:4,
num2:8,
sex:true
}
})
</script>
</body>
</html>
vue 的重要指令
| 指令名称 | 指令作用 | 备注 |
|---|---|---|
| v-html | 显示与解析HTML代码 | |
| v-text | 原封不动的展示 | |
| v-for | 遍历与循环功能 | 遍历数字，字符串,对象,数组 |
| v-bind | 绑定属性 | 简单形式 :属性名=“值” |
| v-model | 双向绑定 | 只支持input,select,textarea |
| v-show | 显示与隐藏 | 隐藏只是样式:style=“display=none” |
| v-if | 判断 | v-if/v-else-if/v-else |
| v-on | 绑定事件 | 简写 @事件名=方法名() |
1 v-html && v-text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div>
<div id="app">
<!-- html 不会加载数据标签 -->
<div v-html="msg"></div>
<!-- text 则会加载数据标签 -->
<div v-text="msg"></div>
</div>
<script >
new Vue({
el:"#app",
data:{
msg:"<h1> 这是一个数据，</h1> "
}
})
</script>
</div>
</body>
</html>
运行结果
[外链图片转存失败(img-ybspMWaE-1566498527485)(C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1566498096393.png)]
2 v-for 指令
-
遍历咱们的数据(数字,字符串,对象,集合)
-
数字就是普通的循环
for(var i=1;i<=数字;i++) -
字符串是拿到每一个字母
-
对象循环
<span v-for="(v,k,i) in 对象"></span>- v:代表对象的属性值
- k:代表对象的属性名
- i:代表索引
-
数组循环
<span v-for="(v,i) in 数组"></span>-
v:代表对象的属性值
-
i:代表索引
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- item:是每次遍历的值 index ： 是下标 也就是 位置 --> <ur> <li v-for="(item,index) in hobbys"> {{item}}-{{index}}</li> </ur> <!-- 循环对象 var : 代表是你遍历的值 name ；是遍历的属性名 index ：是位置 感觉和 索引 差不多 --> <span v-for="(val,name,index) in dept">{{name}}：{{val}}</span><br/> <!-- 循环字符串 --> <span v-for="v in msg" >{{v}}</span><br/> <!--循环 数组 --> <span v-for="v in hobbys">{{v}}</span> </div> <script > new Vue({ el:"#app", data:{ msg:"这个v怎么来的", hobbys:["这","是","一","个","数","组"], dept:{ name:"boss", age:20, sex:true } } }) </script> </body> </html>
-
v-bind指令的使用
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 普通的方式引入 -->
<!-- <img v-bind:src="imgss" />-->
<!-- 把整个对象的属性全部绑定过来 -->
<!-- <img v-bind="dept"/>-->
<!-- 简写的方法 -->
<img :src="imgss" />
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"这是一个值",
imgss:"../imgs/油画.jpg",
dept:{
src:"../imgs/油画.jpg",
width:1000,
higth:1000
}
}
})
</script>
</body>
</html>
430
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
