Vue基础
一、VUE
- 开源的基于MVC、MVVM模式的Javascript框架
- 开源:开放源代码
- MVC:Model(模型),View(视图),Controller(控制器)
- MVVM: Model(模型),View(视图),VM(视图模型合体)是监听器,数组绑定 -> 双向绑定
二、NodeJS&NPM
- NPM是Node提供的模块管理工具,可以非常方便的下载安装很多前端框架(包括Jquery、Angular、Vue)
- Idea支持nodejs需要安装插件
- NodeJs下载:https://nodejs.org/en/download/
1.查看node版本命令:node -v
2.查看npm版本命令:npm -v
3.升级npm版本命令:npm install npm@latest -g
NPM常用命令:
-
初始化(相当于建了一个maven工程):npm init -y
-
安装模块:
-
全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
-
局部安装(当前项目使用)
npm install vue或者npm i vue
-
-
查看模块:
-
查看某个模块
npm list vue
-
列表模块
npm ls
-
-
卸载模块:npm uninstall vue
-
更新模块:npm update vue
-
运行工程:npm run dev或者npm run test或者npm run online
-
编译工程:npm run build
三、ECMAScript6
- ECMA(欧洲计算机制造商协会)以JavaScript为基础,制定了ECMAscript标准规范,是浏览器脚本语言的规范
- ECMAScript6是javascript用的最多语言规范
新特性:
1.申明变量
(1)let
相同点:申明变量
不同点: let是申明块级的变量(简单理解就是在某个代码块中生效,离开该代码块就没有效果了)
<script type="text/javascript">
var a = 1;
let b = 2;
console.debug(a, b);
for(let i=0;i<5;i++){
console.debug(i);
}
//console.debug("i=", i);//ReferenceError: i is not defined
</script>
(2)const
相同点:申明变量
不同点: 声明常量,一旦赋值之后该值是不能被更改的
<script type="text/javascript">
const c = 3;
//c = 4;// invalid assignment to const `c'
console.debug(c);
</script>
2.解构表达式
(1)数组解构
<script type="text/javascript">
let arr = ["A", "B", "C"];
//解构数组
let [a, b,c] = arr;
console.debug(a,b,c);//a,b,c和A,B,C一一对应
</script>
(2)对象解构
<script type="text/javascript">
//解构对象:方法1
var p = {
name:"金木研",
age:14,
sex:true
}
function show({name,age,sex}){
console.debug(name, age, sex);
}
//调用函数(把对象作为参数进行传递)
show(p);
//解构对象:方法2
var {name, age, sex} = p;
console.debug(name, age, sex);
</script>
3.箭头函数
语法:
- 参数只有一个可以省略()
- 函数内容只有一句代码可以省略{}
var 函数名 = (参数列表) => {函数内容}
var 函数名 = function(参数列表){
函数内容
}
<script type="text/javascript">
var p = {
name:"金木研",
age:14,
//以前申明函数的方式
show:function(msg){
console.debug(this.name + " " + this.age);
},
/*箭头函数this是属于当前创建环境this是一致的
如果箭头函数外面还有函数,那箭头函数的this是和外层函数this一致,如果外层没有函数,该this就是window*/
show2:(msg)=>{
console.debug(p.name +" " + p.age);
},
//简写
show3(msg){
console.debug(this.name + " " + this.age);
}
}
p.show();
p.show2();
p.show3();
</script>
4.Promise对象
- 异步编程的一种解决方案
<script type="text/javascript">
const p = new Promise((resolve, reject) =>{
//用定时任务模拟异步
const num = Math.random();
// 随机返回成功或失败
if (num < 0.5) {
resolve("成功!num:" + num)
} else {
reject("失败!num:" + num)
}
},1000)
// 调用promise
p.then(function (msg) {//如果调用成功执行该function函数中的内容
console.log(msg);
}).catch(function (msg) {//如果调用失败执行cat代码块中的内容提供
console.log(msg);
})
</script>
5.模块化
-
是一种思想
-
把代码进行拆分,方便重复利用
-
export命令用于规定模块的对外接口
import命令用于导入其他模块提供的功能
-
浏览器目前不能直接解析运行ES6的导入和导出功能。除非借助于工具,把ES6 的语法进行编译降级到ES5
比如:Babel-cli工具
四、使用Vue三步曲
- 引入Vue.js
- 准备被挂载的元素
- JS完成挂载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入vue的js文件:有vue的功能支持 -->
<script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<!--准备一个div,用做和vue产生关系-->
<div id="app">
<span style="color: pink">{{msg}}</span><br/>
{{msg}}<br/>
{{person}}<br/>
{{person.name}}<br/>
{{person.sex}}<br/>
{{sayHello()}}<br/>
</div>
</body>
<!--写js :让准备的div和vue产生关系-->
<script type="text/javascript">
var vue = new Vue({
/*el:申明挂载的视图*/
el:"#app",
/*准备的数据*/
data:{
msg:"喰种",
person:{
name:"金木研",
sex:true
},
sayHello(){
return "emmmm.......";
}
}
});
</script>
</html>
五、Vue的重要元素
(一)Vue实例挂载el
-
el是用于完成挂载功能
-
挂载可以使用id,class,标签
-
id挂载:
el:"#id"
class挂载:
el:".class"
-
不管使用哪些方式都只能挂载一个
-
建议使用id进行挂载
-
-
只有挂载成功的元素,才能使用vue的功能(表达式等)
<body>
<div id="app" class="app">
{{msg}}<!--el-->
</div>
<div class="app">
{{msg}}<!--{{msg}}-->
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:".app",
data:{
msg:"el"
}
});
</script>
(二)Vue中的数据data
- Vue实例的数据保存在配置属性data中
- data自身也是一个对象
- 获取数据有两种方式
- 直接在js中获取/设计
- 在表达式中来获取
- 通过Vue实例直接访问和修改data对象中的数据会及时同步的页面上
<body>
<div id="app">
{{msg}}<br/>
{{person.name}}<br/>
{{person.age}}<br/>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
msg:"喰种",
person:{
name:"金木研",
age:14
}
}
});
alert(vue.person.name);/*金木研*/
//当数据发生变化后,表达式中的数据也会同时变化
vue.person.name = "独眼";
alert(vue.person.name);/*独眼*/
</script>
(三)Vue中的方法methods
- Vue实例的方法保存在配置属性methods中
- methods自身也是一个对象
- 调用方法的位置
- 在js中直接调用
- 可以用表达式调用
- 可以直接使用this获取到data中的数据
<body>
<div id="app">
{{sayHello1("A")}}<br/>
{{sayHello2()}}<br/>
</div>
</body>
<script type="text/javascript">
/* methods:当前vue实例中所有的方法都放在methods中*/
var vue = new Vue({
el:"#app",
data:{
msg:"方法",
name:"猪皮",
sex:true
},
methods:{
sayHello1(msg){
alert(msg);
return "emmmm.....";
},
sayHello2(){
return "姓名:" + this.name + " 性别:" + this.sex;
}
}
});
console.debug(vue.sayHello1());//undefined
</script>
六、Vue表达式
- Vue表达式写在双大括号内:{{ expression }}
- Vue表达式把数据绑定到 HTML
- Vue将在表达式书写的位置"输出"数据
- Vue表达式很像JavaScript表达式:它们可以包含文字、运算符和变量
1.简单表达式
- 在{{ }}中可以进行简单的运算
<body>
<div id="app">
{{num1}}+{{num2}}={{num1+num2}}<br/><!--10+3=13-->
{{num1}}-{{num2}}={{num1-num2}}<br/><!--10-3=7-->
{{num1}}*{{num2}}={{num1*num2}}<br/><!--10*3=30-->
{{num1}}/{{num2}}={{num1/num2}}<br/><!--10/3=3.3333333333333335-->
{{num1}}%{{num2}}={{num1%num2}}<br/><!--10%3=1-->
num1+num2={{num1+num2}}<br/><!--num1+num2=13-->
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
num1:10,
num2:3,
}
});
</script>
2.三目操作符
<body>
<div id="app">
<!-- vue三目运算中 表示false的值: 0 null NaN undefined false ""
其它值全部为true-->
{{sex?"男":"女"}}<!--女-->
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
sex:0,
}
});
</script>
3.字符串操作
<body>
<div id="app">
{{str}}<br/><!--tongyao-->
{{str.length}}<br/><!--7-->
{{str.substring(2,5)}}<br/><!--ngy-->
{{str.substr(1,2).toUpperCase()}}<br/><!--ON-->
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
str:"tongyao"
}
});
</script>
4.对象操作
<body>
<div id="app">
{{person}}<br/>
{{person.name}}<br/>
{{person.sex}}<br/>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
person:{
name:"金木研",
sex:true
}
}
});
</script>
5.数组操作
<body>
<div id="app">
{{hobbys}}<br/>
{{hobbys[0]}}<br/>
{{hobbys.length}}<br/>
{{hobbys.toString()}}<br/>
{{hobbys.join(" ")}}<br/>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
hobbys:["动漫","猫",'狗']
}
});
</script>
七、Vue指令
指令名称 | 指令作用 | 备注 |
---|---|---|
v-html | 显示与解析HTML代码 | |
v-text | 原封不动的展示 | |
v-for | 遍历与循环功能 | 遍历数字,字符串,对象,数组 |
v-bind | 绑定属性 | 简单形式 :属性名=“值” |
v-model | 数据双向绑定 | 只支持input,select,textarea |
v-if | 判断 | v-if/v-else-if/v-else |
v-on | 绑定事件 | 简写 @事件名=方法名() |
v-show | 显示与隐藏 | 隐藏只是样式:style=“display=none” |
1.v-html与v-text
- html会解析HTML标签(相当:innerHTML)
- text不会解析HTML标签(相当:innerText)
<body>
<div id="app">
<div v-text="text">
A
</div>
<div v-html="html">
B
</div>
</div>
</body>
<script type="text/javascript">
/*
v-text:在指定的标签进行设置值,如果设置的代码有html代码,会覆盖原来内容当成一个纯文本进行展示
类似于js中的innerText
v-html:在指定的标签进行设置值,如果设置的代码有html代码,会覆盖原来内容被浏览器所解析
类似于js中的innerHTML
*/
var vue = new Vue({
el:"#app",
data:{
text:"<h1>测试text</h1>",
html:"<h2>测试html</h2>"
}
});
</script>
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:代表索引
语法:
<标签 v-for="元素 in 数据源"></标签>
数据源: 数组,
元素: 数组中的一个元素,
数据源: 对象,
元素: 对象中的一个属性名,
<标签 v-for="(元素,索引) in 数据源"></标签>
当数据源是数组时, ()的第二个参数值索引
当数据源是对象时, ()的第二个参数值键
<标签 v-for="(元素,键,索引) in 对象"></标签>
<body>
<div id="app">
<!--遍历数字 for(var i=1;i<=5;i++)-->
<ul>
<li v-for="v in num">{{v}}</li>
</ul>
<!--遍历字符串:拿到字符串中的每一个值-->
<ul>
<li v-for="v in str">{{v}}</li>
</ul>
<!--
遍历对象
(v) 如果只写一个值,只获取value的值
(v,k) v:是value的值,k:是key(属性)
(v,k,i) v:是value的值,k:是key(属性) ,i:索引
-->
<ul>
<li v-for="(v,k,i) in person">{{k}} - {{v}} -{{i}}</li>
</ul>
<!--遍历数组
(v,i) : v:当前的数据值 i:当前遍历索引
-->
<ul>
<li v-for="(v,i) in hobbys">{{v}}==={{i}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
/**
* 在vue中循环迭代支持的元素:
* 数字 字符串 对象 数组
*/
var vue = new Vue({
el:"#app",
data:{
num:5,
str:"tong",
person:{
name:"金木研",
age:14,
},
hobbys:["吃饭","睡觉","打豆豆"]
}
})
</script>
3.v-bind
- bind主要是用于绑定相应的属性
<标签 v-bind:属性名="属性值">
- bind有一种简写形式
<标签 :属性名="属性值">
- 如果直接把整个对象进行属性绑定
<标签 v-bind="对象">
语法:
<标签 v-bind:标签属性名字="表达式"></标签>
简写形式:
<标签 :标签属性名字="表达式"></标签>
为一个标签绑定一个对象作为该标签的多个属性
<标签 v-bind="对象"></标签>
<body>
<div id="app">
<!-- 最原生的方式来获取图片-->
<img src="imgs/1.jpeg" width="100">
<!--使用v-bind的方式来取图片 方式1-->
<img v-bind:src="src" v-bind:width="width">
<!--使用v-bind的方式来取图片(简写方式) 方式2-->
<img :src="src" :width="width">
<!--使用v-bind的方式来取图片(简写方式 直接绑定对象) 方式3-->
<img v-bind="options">
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
src:"imgs/1.jpeg",
width:200,
options:{
src:"imgs/1.jpeg",
width:300,
}
}
});
</script>
4.v-model
- 主要是用于完成双向的绑定
- 支持的标签:
<input>,<select>,<textarea>
<body>
<div id="app">
<!--绑定到type=text的input表单元素-->
<input type="text" v-model="username"><br/>
{{username}}
<hr>
<!--绑定到type=checkbox的input表单元素-->
爱好:
<input type="checkbox" v-model="hobbys" value="lq">篮球
<input type="checkbox" v-model="hobbys" value="zq">足球
<input type="checkbox" v-model="hobbys" value="pq">排球<br/>
{{hobbys}}
<hr>
<!--绑定到type=radio的input表单元素-->
性别:
<input type="radio" v-model="sex" value="1">男
<input type="radio" v-model="sex" value="0">女<br/>
{{sex}}
<hr>
<!--绑定到单选的select的元素-->
国家:
<select v-model="country">
<option value="-1">-- 请选择 --</option>
<option value="ch">中国</option>
<option value="us">美国</option>
<option value="jp">日本</option>
</select>
<br/>
{{country}}
<hr>
<!--绑定到textarea的元素-->
<textarea v-model="intro" rows="5" cols="20"></textarea><br/>
{{intro}}
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
username:"用户名",
hobbys:["lq"],
sex:1,
country:"-1",
intro:"我叫某某某"
}
});
</script>
5.v-if
- v-if根据表达式的值的真假条件渲染元素,在切换时元素及它的数据绑定或组件 被销毁或者重建
- v-else-if是需要赋值的,必须与v-if搭配起来使用
- v-else是一个单独的属性是不需要赋值的,必须也v-if搭配起来使用
<body>
<div id="app">
<!--如果满足条件,页面会显示-->
<span style="color: darkslateblue;" v-if="age>60&&age<=100">老年人啦</span>
<span style="color: orangered;" v-else-if="age>30&&age<=60">中年啦</span>
<span style="color: peru;" v-else-if="age>16&&age<=30">长大啦</span>
<span style="color: rosybrown;" v-else-if="age>=0&&age<=16">成长阶段</span>
<span style="color: burlywood;" v-else>非正常年龄</span>
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
age:19
}
});
</script>
6.v-on
- 事件绑定可以直接使用v-on
<标签 v-on:事件名=方法名>
- 写表达式或者触发的函数
- 调用的方法可以不加()
- v-on有一种简写形式
<标签 @事件名=方法名>
<body>
<div id="app">
<!--完整写法-->
<input type="button" v-on:click="num++" value="按钮">
{{num}}
<input type="button" @click="show('咻~')" value="按钮2">
<hr/>
<input type="button" @mouseover="over" @mouseout="out" value="移进移出">
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
num:0
},
methods:{
show(msg){
alert("emmm...."+msg);
},
over(){
console.debug("移进")
},
out(){
console.debug("移出")
}
}
});
</script>
7.v-show
- v-show用于展示和隐藏
<标签 v-show="true/false">
- 当v-show的值为false时, 会在标签的css中添加
display:none
<body>
<div id="app" >
<div v-show="isShow">咻~</div>
<input type="button" @click="show" value="显示和隐藏">
</div>
</body>
<script type="text/javascript">
var vue = new Vue({
el:"#app",
data:{
isShow:true
},
methods:{
show(){
this.isShow = !this.isShow;
}
}
});
</script>