目录
框架是什么?
帮助我们构建与业务（就是项目中的功能）无关的事情
例子：在没有学习框架的时候 隔行变色（代码最少在10行）
一、vue.js
1.vue是什么？
vue就是一个当下最为主流的前端框架，用于构建用户界面的渐进式javascript框架
渐进式：先完成最基本的功能开发应用,但是如果想开发复杂功能,那么就可以引入各种vue插件来完成（vue是一个自底向上逐层开发的一个框架）
拓展：谁开发的=====>尤雨溪
2.vue特点？
(1)组件化:实现了封装和重用,且组件间可以相互嵌套；
(2)轻量级:相对于其他框架,Vue学习成本低,简单易上手；
(3)虚拟DOM:虚拟dom中存在diff算法,是cpu密集型运算,占用内存较少,可以提高运行效率,并压缩运行时体积；
(4)Vue是一个MVVM框架:数据绑定。
数据单向绑定(v-bind),单向指data中的值绑定到视图中,但视图中修改不会影响到data数据；
双向绑定(v-model),数据发生变化会驱动视图的更新,视图的更新也会驱动数据的变化；
(5)单页面应用（SPA）
用户体验好,内容改变时不需要重新加载整个页面,不会进行多个html页面间的切换;服务器压力小.
3.MVVM
*MVVM*是Model-View-ViewModel的简写
M ---model 模型==数据==变量 data数据
V ---view 视图==页面==用户可以看见的界面 模板
VM ---viewModel 视图模型==用来关联数据与视图之前的桥梁 vue实例
(Data Bindings)数据绑定（就是把model数据 ----》数据绑定 ----》绑定到页面上）
(DOM Listeners)dom监听 (就是view页面的数据改变-----》dom监听------》反应到数据上)
4.淘宝镜像
安装淘宝镜像(npm服务器在国外可能会导致网速很慢导致下载失败,可以使用淘宝镜像当然不是必须要安装,如果安装了今后所有使用npm 在下载内容的时候就要把npm变成cnpm,剩下都一样)
[安装命令]
npm install cnpm -g --registry=https://registry.npm.taobao.org
[检查是否安装成功]
cnpm -v
5.vue初体验
5.1下载vue库文件
npm init -y(初始化) npm install --save vue@2 [简写: npm i -S vue@2]（下载）
5.2引入vue.js
<script src="./node_modules/vue/dist/vue.js"></script>
<!-- 2创建视图层 V vue的根容器 根节点 今后把你的vue内容都写在这个根节点中-->
<div id="demodiv">
<h1>{{text}}</h1>
<h1>{{num}}</h1>
<h1>{{obj.name}}</h1>
</div><!-- 3.创建vm层 ---》 就是vue实例-->
new Vue({
el:"#demodiv", //关联视图
data:{ //4 m层 模型数据
text:"我是字符串",
num:18,
bool:true,
obj:{
name:"xixi",
age:18
},
arr:[1111,22222,33333,4444,5555]
}
})6.多个vue实例
多个vue实例生效的就是对应的视图
<div id="demodiv">
<h1>{{text}}</h1>
</div>
<div id="demodivb">
<h1>{{text}}</h1>
</div> <script>
new Vue({
el:"#demodiv",
data:{
text:"我是第一个",
}
})
new Vue({
el:"#demodivb",
data:{
text:"我是第2个",
}
})
</script>7.{{}}--模板语法--双花括号赋值法
在vue中{{}}被称之为模板语法 双花括号赋值法 vue数据插值
作用：就是可以在双大括号中写入表达式 并且展示在页面中
语法:在你想展示数据的任何位置 **{{表达式}} （表达式:通过计算可以返回结果的公式）**
8.el与data的两种写法
8.1$mount 手动挂载/延迟挂载
Vue的*$mount()*为手动挂载,在项目中可用于**延时挂载**
**比如vue是一个渐进式的, 手动挂载/延迟挂载在我们使用一些负载功能的时候,我们需要依赖很多后面会学到的vue插件来完成;但是使用这些插件,我们必须先要把这些插件先挂载之后,在加载视图的关联,所以在这个时候我们会用到延迟加载**,之后要手动挂载上。
new Vue时，el和$mount并没有本质上的不同。
<div id="demodiv"></div>
<script>
let v= new Vue({
// el:"#demodiv", 第一种方式
data:{
text:"我是一个变量"
}
})
console.log(v);
v.$mount("#demodiv")//第二种方式
</script>8.2data函数式
<div id="demodiv">
<h1>两种挂载方式</h1>
<h1>{{text}}</h1>
</div>
<script>
let v= new Vue({
// data第一种：对象式写法
// data:{
// text:"我是一个变量"
// }
// data第二种：函数式写法
data(){
return {
text:"我是函数式变量"
}
}
})
console.log(v);
v.$mount("#demodiv")
</script>二、指令
## 什么是html标签的属性？
通过**写在html开标签中的 使用属性="属性值"** 的这些东西可以**扩展标签的功能**
1.定义？
就是在vue中给html标签添加的带有v-前缀的特殊属性（在vue中 给html标签添加个一些特殊性功能属性）
2.v-model
作用: 就是给表单元素进行数据的双向绑定
**双向绑定**
**视图改变,模型也会改变**
**模型改变,视图也会随之改变**
语法: **<标签 v-model="值"/>**
<div id="demodiv">
<h1>v-model</h1>
<input type="text" v-model="inputval"/>
<h1>{{inputval}}</h1>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
inputval:""
}
})
</script>2.1双向绑定的原理
在vue中基于数据劫持--数据代理与发布者订阅者模式完成的
数据劫持：[数据拦截]就是对data中的数据在[初始化]时监听起来(*Object.defineProperty*来进行监听/代理),当数据改变setter之后,vm就会知道,在视图改变getter;他就会通知你模型要修改了,模型改变了也会通知视图改变
发布者订阅者模式：就是一个[一对多]的关系 发布者就是数据提供者 订阅者就是页面展示的 ，一个发布者可以对应无数个订阅者 发布者改变了,所有订阅者也会改变
3.v-show
作用：控制dom元素的显示/隐藏 v-show的显示和隐藏是通过css的dispaly方式来控制的
语法 **v-show="布尔值"** true显示 false隐藏
<div id="demodiv">
<input type="checkbox" v-model="bool"/>{{bool?"勾选了":"没勾选"}}
<h1 v-show="bool">我是站位的</h1>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
bool:false
}
})
</script>4. v-on
作用：就是给vue的dom绑定事件的
语法:
传统写法： v-on:你的事件不加on="函数" v-on:click="函数"
简写写法: @你的事件不加on="函数" @click="函数"
**注意：函数需要写在与el/data同级位置使用methods来进行包裹**
<div id="demodiv">
<button v-on:click="fun()">点我触发函数</button>
<button @click="fun()">点我触发函数简写写法</button>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
},
// 函数需要写在与el data同级的位置使用methods来进行包裹
methods:{
fun(){
console.log("你好")
},
}
})
</script>**注意 函数中怎么使用data数据** 使用this.变量名
5.v-for
概念： 用来遍历数据,生成页面内容
语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据"
<div id="demodiv">
<!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据" -->
<ul>
<li v-for="(v,i) in arr">
{{v}}------{{i}}
</li>
</ul>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
arr:["ez","Vn","MF","noc"]
},
methods:{
}
})
</script>遍历复杂数据
<div id="demodiv">
<!-- 语法： v-for="(遍历的值,遍历的下标) in 你要遍历的数据" -->
<ul>
<li v-for="(v,i) in arr">
{{v}}------{{i}}
</li>
</ul>
<hr/>
<table border="1">
<tr v-for="(v,i) in obj">
<td>{{v.name}}</td>
<td>{{v.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:"#demodiv",
data:{
arr:["ez","Vn","MF","noc"],
obj:[
{name:"xixi1",age:181},
{name:"xixi2",age:182},
{name:"xixi3",age:183}
]
},
methods:{
}
})
</script>5.1key属性
可以在是用v-for的时候搭配使用 他的作用就是给便利出来的数据 起个**唯一的**名字 相当于我们的身份证号 通过添加了这个key属性可以增加我们在便利展示的时候生成dom元素的效率 **（key里面是唯一的不建议使用我们便利出来的下标 因为如果一个页面有两次便利的话key的值就有可能相同）**
6.v-bind
概念: 就是html的属性插入变量
语法：
传统写法： v-bind:html的属性="值"
简写写法: :html的属性="值"
<div id="demodiv">
<a v-bind:href="ahref">{{text}}</a>
<a :href="ahref">{{text}}</a>
</div>
<script>
new Vue({
el:"#demodiv"
data:{
text:"点我去百度",
ahref:"http://www.baidu.com"
}
})
</script>7.v-if全家桶
7.1v-if
作用：就是对dom元素进行移除和添加
语法: 写在开标签中 true添加 false移除
7.2面试题：v-if与v-show的区别
1.v-show是使用css的方式对dom元素进行显示和隐藏的 在频繁切换的时候效率更高 在初始化的时候对性能的损耗比较高
2.v-if是直接把这个dom元素移除或者是添加 在频繁切换的时候效率比较低 在初始化的时候对性能的损耗比较低
7.3v-else
语法： 必须配合v-if使用,不能单独使用
7.4v-else-if
<div id="demoDiv">
<h1>v-else-if</h1>
<select v-model="text">
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="在吃饭">在吃饭</option>
<option value="在睡觉">在睡觉</option>
</select>
<h1 v-if="text=='吃饭'">我是吃饭的dom</h1>
<p v-else-if="text=='睡觉'">我是睡觉的dom</p>
<em v-else-if="text=='在吃饭'">我是在吃饭的dom</em>
<h2 v-else-if="text=='在睡觉'">我是在睡觉的dom</h2>
<b v-else>我什么都没有干</b>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:""
},
methods:{
}
})
</script>7.5面试题：v-if与v-for能同时使用吗
当 `v-if` 与 `v-for` **不推荐同时使用**，**`v-for` 具有比 `v-if` 更高的优先级**
这意味着 `v-if` 将分别重复运行于每个 `v-for` 循环中,影响速度
如果必须要使用的话
**解决方式**
1.使用computed处理数据在便利
2.使用v-show替代v-if
8.v-html
作用：就是把字符串标签插入到页面中
<div id="demoDiv">
<h1>v-html</h1>
{{text}}
<div v-html="text">
</div>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:"<h1>我是一个h1</h1>"
},
methods:{
}
})
</script>9. v-once
作用: 一次性插值:数据插入到页面中就不会被改变了
10.v-text
作用：向dom中插入文本内容,和{{}}作用一样
11.屏幕闪烁
当用户的设备和网络比较慢的时候可能就会在页面中吧{{}}全部展现出来 当网络恢复正常之后 有突然间显示ok
使用{{}}模板语法的话就会出现这个问题
**解决方式**
1.使用v-text
2.使用v-cloak指令 等待vue实例渲染完成之后在进行
[v-cloak]{
display: none;
} (css)
三、事件对象
1.事件对象--$event
谁触发这个事件事件对象就指向谁 （事件对象中包含触发这个事件的元素所有信息）
<div id="demoDiv">
<!-- 事件对象 $event -->
<input type="text" @keydown="fun($event)">
</div>
<script>
let vm = new Vue({
data: {
},
methods: {
fun(e) {
console.log(e)
if (e.keyCode == 90) {
console.log("z被按下了")
}
}
}
})
vm.$mount("#demoDiv")
</script>2.修饰符
通过vue提供的修饰符可以来处理dom事件的一些细节性的内容
v-on:事件.修饰符="函数()"
2.1按键修饰符
优化我们对于键盘事件的相关处理
**.up .down .left .right .ctrl .space .enter .tab .delete .shift .esc**
<div id="demoDiv">
<input type="text" @keydown.space="fun()">
</div>
<script>
let vm = new Vue({
data: {
},
methods: {
fun() {
console.log("空格被按下了")
}
}
})
vm.$mount("#demoDiv")
</script>2.2事件修饰符
1. .stop修饰符 阻止事件传播
2. .prevent修饰符 阻止事件默认行为
3. .captrue修饰符 设置捕获
4. .self 修饰符 只会触发自己范围内的事件 不包含子元素
5. .once修饰符 只触发当前事件一次
<style>
.fu {
width: 600px;
height: 600px;
background-color: pink;
}
.zi {
width: 300px;
height: 300px;
background-color: goldenrod;
}
</style>
<div id="demoDiv">
<div class="fu" @click="fufun()">
<div class="zi" @click.stop="zifun()"></div>
</div>
</div>
<script>
let vm = new Vue({
data: {
},
methods: {
fufun() {
console.log("fufufuffufufu")
},
zifun() {
console.log("zizizizziizzi")
},
}
})
vm.$mount("#demoDiv")
</script>2.3v-model修饰符
lazy修饰符
用户使用v-model之后,每次修改输入内容,都会将数据同时绑定,为了避免这种情况的发生,使用lazy修饰符来进行限定。**只有当用户的input中失去焦点或者用户点击回车按钮时,才会将数据进行修改。**
<body>
<div id="demoDiv">
<input type="text" v-model.lazy="inputval">
<h1>{{inputval}}</h1>
</div>
<script>
let vm = new Vue({
data: {
inputval:"我是默认值"
}
})
vm.$mount("#demoDiv")
</script>number修饰符
**当用户在input中输入数字时,浏览器会默认将输入的数字转化为string类型,使用number修饰符来将输入的数字转为number类型**
<div id="demoDiv">
没有使用number
<input type="text" v-model="inputval">
<hr>
使用了number
<input type="text" v-model.number="inputval">
<hr>
<button @click="fun()">点我查看类型</button>
</div>
<script>
let vm = new Vue({
data: {
inputval:0
},
methods:{
fun(){
console.log(typeof(this.inputval))
}
}
})
vm.$mount("#demoDiv")
</script>trim修饰符
使用trim修饰符来去掉字符串**首部或者尾部的所有空格**
3.计算属性--computed
我们**遇到了一条数据 在不同位置 展示出不同形态的时候 我们可以使用计算属性**
3.1定义
**就是把属性通过加工通过计算返回一个新的结果**那么这个就是计算属性
那么计算属性写在哪里 并且怎么写呢？
3.2写法
写在与el data methods 同级位置 使用 **computed**
其中有两个方法 get与set
**get方法:必须要写**，该函数不接受参数,当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
```js
computed:{
计算出存储结果的名字:{
//必须要写，该函数不接受参数
//什么时候被调用?：当初次读取计算属性或者计算属性所依赖的数据发生变化时被调用，getter函数有一个返回值，该返回值就是计算属性的值
get(){
return 你的计算逻辑
},
//可选项 接受一个可选参数（计算属性被修改之后的值）
//什么时候被调用?： 当计算属性被修改时被调用
set(value){
}
}
}
**读取**
<div id="demodiv">
<h1>读取data中的数据--{{text}}</h1>
<h1>读取计算属性的数据--{{newtext}}</h1>
</div>
<script>
let vm=new Vue({
el:"#demodiv",
data:{
text:"abcdefghijk"
},
// 计算属性
computed:{
newtext:{
get(){
console.log("我是计算属性的get方法")
return this.text.toUpperCase()
}
}
},
})
</script>**修改**
set方法:可选项:接受一个可选参数（计算属性被修改之后的值）当计算属性的值被修改时被调用
<div id="demodiv">
<h1>读取data中的数据--{{text}}</h1>
<input type="text" v-model="newtext">
<h1>读取计算属性的数据--{{newtext}}</h1>
</div>
<script>
let vm=new Vue({
el:"#demodiv",
data:{
text:"abcdefghijk"
},
// 计算属性
computed:{
newtext:{
get(){
console.log("我是计算属性的get方法")
return this.text.toUpperCase()
},
set(value){//当newtext被修改的时候set就会触发 value就是修改之后的数据
console.log("我是计算属性的set方法",value)
}
}
},
})
</script>## 简写写法推荐使用
通常我们的计算属性都是把计算出来的结果展示到页面上,set这种修改使用的非常少,所以在计算属性中也给我们提供了一种读取的简写语法
computed:{
你处理好的变量(){
return 你的处理逻辑
}
}
<div id="demodiv">
<h1>读取data中的数据--{{text}}</h1>
<h1>读取计算属性的数据--{{newtext}}</h1>
</div>
<script>
let vm=new Vue({
el:"#demodiv",
data:{
text:"abcdefghijk"
},
// 计算属性简写
computed:{
newtext(){
return this.text.toUpperCase()
}
}
})
</script>四、 watch监听属性
watch是vue实例的一个属性 他的作用就是用来监听data中的数据
当数据变了watch就会触发 从而调用函数处理一些逻辑
语法：写在与el data methods 同级位置
watch:{
你要监听的data数据(newval,oldval){
}
}
<div id="demoDiv">
<h1>watch</h1>
<input type="text" v-model="text">
<h1>{{text}}</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:""
},
methods:{
},
// watch监听数据
watch:{
text(newval,oldval){
console.log(newval+"---"+oldval)
}
}
})
</script> 1.watch在初始化能触发吗？
不会触发
2.想在初始化触发watch怎么办？
watch的一个特点是,最初绑定的时候是不会执行的,要等到监听的数据改变时才执行监听。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？
3. watch 属性与方法
3.1handler方法
data监听的数据改变触发的回调函数
//text变量改变的时候。handler方法就会触发
watch:{
text:{
handler(){
console.log("aaaa");
},
},
}
3.2immediate属性
watch默认绑定,页面首次加载时,是不会执行的。只有值发生改变才会执行。
设置immediate为true后，监听会在被监听值初始化的时候就开始，也就页面上的数据还未变化的时候。
watch:{
text:{
handler(){
console.log("aaaa");
},
immediate:true //true就表示会立即执行
},
}
3.3deep 属性
属性deep,默认值是false,代表是否深度监听
**观察下面的代码**
当我们在在输入框中输入数据视图改变obj.name的值时，我们发现是无效的。
**受现代 JavaScript 的限制. Vue 不能检测到对象属性的添加或删除。**
如果我们需要监听obj里的属性name的值呢？
<div id="demoDiv">
<h1>watch</h1>
<input type="text" v-model="text">
<h1>{{text}}</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:""
},
methods:{
},
// watch监听数据
watch:{
text(newval,oldval){
console.log(newval+"---"+oldval)
}
}
})
</script> 这时候deep属性就派上用场了。
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
<template>
<div>
<input type="text" v-model="obj.name">
<h1>{{obj.name}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
obj:{
name:"xixi"
}
}
},
watch:{
obj:{
handler(){
console.log("aaaa");
},
immediate:true, //true就表示会立即执行
deep:true
},
}
}
</script>但是这样性能开销就会非常大了,===优化=====>使用字符串形式监听
<template>
<div>
<input type="text" v-model="obj.name">
<h1>{{obj.name}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
obj:{
name:"xixi"
}
}
},
watch:{
// 字符串方式
"obj.name":{
handler(){
console.log("aaaa");
},
immediate:true
},
}
}
</script>4.computed和watch的区别？
五、自定义过滤器
在不改变原始数据的情况下格式化展示内容
过滤器的地方有很多:比如**单位转换**、**数字打点**、**文本格式化**、**时间格式化**
1.内置过滤器
**在vue2x中 vue已经取消了内置过滤器 在vue1x中有内置和自定义过滤器**
2.自定义过滤器
2.1全局过滤器--filter
在所有vue实例组件中都可以使用
定义:使用filter()来定义全局过滤器,写在vue实例创建之前
语法:Vue.filter("过滤器的名字",(你要过滤的数据)=>{return 逻辑})
<div id="demoDiv">
<h1>{{text|xiaoming}}</h1>
<h1>{{textb|xiaoming}}</h1>
</div>
<script>
// 全局过滤器
Vue.filter("xiaoming",(val)=>{
if(val.length>5){
return val.substr(0,5)+"..."
}else{
return val
}
})
let vm = new Vue({
data:{
text:"斯大林格日勒保卫战",
textb:"大话西游"
}
})
vm.$mount("#demoDiv")
</script>在想使用的地方 使用| 来完成
<h1>{{变量|过滤器的名字}}</h1>
2.2局部过滤器--filters
仅仅只能在指定的实例组件中使用
写在el data等同级位置
filters:{
过滤器的名字(你要过滤的数据){
return 你的逻辑
}
}
<div id="demoDiv">
<h1>{{text|xiaoming}}</h1>
<h1>{{textb|xiaoming}}</h1>
</div>
<script>
let vm = new Vue({
data: {
text: "斯大林格日勒保卫战",
textb: "大话西游"
},
filters: {
xiaoming(val) {
if (val.length > 5) {
return val.substr(0, 5) + "..."
} else {
return val
}
}
}
})
vm.$mount("#demoDiv")
</script>在想使用的地方 使用| 来完成
<h1>{{变量|过滤器的名字}}</h1>
注意：当全局过滤器和局部过滤器重名时,会采用局部过滤器
3. 钩子函数
在vue中可以自动执行的函数叫做钩子函数
4.自定义指令
在现有内置指令不够用的时候 我们可以自己定义指令来进行使用
4.1自定义指令的钩子函数
bind 指令绑定到元素之上的时候执行,但是只执行一次
unbind 指令被移除的时候执行,只执行一次
update 所有组件节点更新的时候执行调用
componentUpdate 指令所在节点以及所有的子节点都更新完成的时候调用
inserted 绑定指令的元素在页面展示的时候调用
4.2全局自定义指令--directive
在所有位置都能生效
### 语法
Vue.directive("自定义指令名字",{
自定义指令钩子函数(el你绑定自定义指令的dom){
你的逻辑
}
})
### 使用
指令 就是在vue中带有v-前缀的html特殊属性
在你想使用的位置 v-你的自定义指令名
4.3局部自定义指令--directives
只能在局部范围内生效
语法：写在与data methods watch computed 同级的位置
directives:{
自定义指令的名字:{
自定义指令的钩子函数（el代表的就是指定放在那个dom上形参就是谁）{
你的逻辑
}
},
自定义指令的名字2:{
},
}
4.4使用v-自定指令的名字
<template>
<div>
<input type="text" v-xiaoming/>
</div>
</template>
<script>
export default {
// 创建
directives:{
xiaoming:{
inserted(el){
el.focus()
}
}
}
}
</script>5.vue/cli 脚手架--5x
**脚手架就是项目的开发环境** 在脚手架中已经把我们需要开发的一切环境已经配置好了 我们只需要直接写业务代码即可
5.1脚手架创建
1全局安装脚手架 cnpm install -g @vue/cli
2查看版本 vue --version
**上面的两步 除非你重新装系统或者 重新装node了 否则不需要重复**
3创建项目
（3-1）把你的cmd切换到你要创建项目的文件夹中
（3-2）vue create 你的项目名 不要中文空格特殊符号
4 cmd到项目名下
5启动项目 npm run serve
6 根据提示打开浏览器访问
5.2拿到空项目怎么办？
1.删除src文件夹下的components文件夹下的helloword.vue文件
2.在components文件夹中创建属于你自己的文件xxxx.vue（名字必须使用大驼峰命名法 首字母大写其后单词也要大写）
3.在vscode下载 vetur插件,安装完成后在你新建的文件中,使用相应的html语法显示页面内容，一定要修改APP.vue文件里的import HelloWorld from './components/DemoCom.vue'路径才能运行
5.3项目怎么启动?
1.cd项目下 npm install 下载依赖
2.启动项目 找到项目下的package.json文件 的scripts节点去查看启动命令
注意 所有单词都是npm run 你的配置 **唯独 start不一样 因为start可以不加run**
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},5.4自动开启浏览器与端口修改
找到vue.config.js文件写入如下内容
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 设置浏览器自动开启
devServer:{
open:true,//设置自动开启
port:8888,//修改端口
host:"localhost"
}
})六、经典案例：ToDoList
效果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../node_modules/vue/dist/vue.js"></script>
<style>
#demoDiv {
background-color: gainsboro;
min-height: 300px;
width: 600px;
margin: auto;
}
ul {
list-style: none;
}
.green {
background-color: greenyellow;
}
</style>
</head>
<body>
<!--任务总数:obj的长度 -->
<div id="demoDiv">
<h1>任务列表</h1>
<p>任务总数:{{obj.length}} 未完成:{{fe()}} 已完成:{{yi()}}<button @click="wan()">完成任务清除</button></p>
<ul v-if="obj.length!=0">
<li v-for="(v,i) in obj" v-bind:key="i">
<input type="checkbox" v-model="v.ck">
<span v-bind:class="v.ck?'green':''" v-if="!v.edit" @click="v.edit=true">{{v.title}}---{{v.ck}}</span>
<input type="text" v-model="v.title" v-else @blur="v.edit=false">
</li>
</ul>
<h1 v-else>暂无数据</h1>
<input type="text" v-model="inputval"><button @click="add()">添加</button>
<p>本次添加的内容:{{inputval}}</p>
</div>
</body>
</html>
<script>
new Vue({
data: {
inputval: '',
obj: [{
title: "设计",
ck: false,
edit: false
}, {
title: "编写页面代码",
ck: false,
edit: false
}, {
title: "编写JS代码",
ck: false,
edit: false
}, {
title: "设计产品原型",
ck: false,
edit: false
}, ],
},
el: "#demoDiv",
methods: {
add() {
console.log(this.inputval)
if (this.inputval != "") { //值不为空才能添加成功
this.obj.push({
title: this.inputval,
ck: false,
edit: false
}),
this.inputval = "";
} //清空输入框的值
},
fe() {
newObj = 0
this.obj.forEach((item, index) => {
if (item.ck == false) {
newObj++
}
});
return newObj
},
yi() {
newObj = 0
this.obj.forEach((item, index) => {
if (item.ck == true) {
newObj++
}
});
return newObj
},
wan() {
let newStr = [];
newStr = this.obj;
this.obj = [];
for (let i = 0; i < newStr.length; i++) {
if (newStr[i].ck == false) {
this.obj.push(newStr[i])
console.log(i);
}
}
}
}
})
</script>七、经典案例：列表的过滤排序
效果如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1.引用vue库文件 -->
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<!-- M====模型数据
V====页面视图
VM====关联模型与视图之间的桥梁 -->
<!-- 1.创建V层 -->
<div id="demoDiv">
<h1>人员列表</h1>
<input type="text" placeholder="请输入姓名" v-model="keyword">
<button @click="sortType=2">年龄升序</button>
<button @click="sortType=1">年龄降序</button>
<button @click="sortType=0">原顺序</button>
<ul>
<li v-for="(p,index) in filPersons" :key="p.id">
{{p.name}}--{{p.age}}--{{p.sex}}
</li>
</ul>
</div>
</body>
</html>
<!-- 2.创建VM层 在vue中就是vue实例 -->
<script>
Vue.config.productionTip=false
// #region ...... #endregion 结合：防止先前折叠部分打开
// #region
// new Vue({
// el: "#demoDiv", //关联视图
// data: { //创建模型数据
// keyword:'',
// persons:[
// {id:'01',name:'马东梅',age:'19',sex:'女'},
// {id:'02',name:'周东雨',age:'19',sex:'女'},
// {id:'03',name:'周杰伦',age:'19',sex:'男'},
// {id:'04',name:'温兆伦',age:'19',sex:'男'}
// ],
// filPersons:[]
// },
// watch:{
// keyword:{
// immediate:true,
// handler(val){
// this.filPersons=this.persons.filter((p)=>{
// return p.name.indexOf(val)!==-1
// })
// }
// }
// }
// })
// #endregion
// 用computed实现
new Vue({
el: "#demoDiv", //关联视图
data: { //创建模型数据
keyword:'',
sortType:0,//0:原顺序 1 降序 2升序
persons:[
{id:'01',name:'马东梅',age:'30',sex:'女'},
{id:'02',name:'周东雨',age:'29',sex:'女'},
{id:'03',name:'周杰伦',age:'18',sex:'男'},
{id:'04',name:'温兆伦',age:'19',sex:'男'}
]
},
computed:{
// 过滤效果
filPersons(){
const arr=this.persons.filter((p)=>{
return p.name.indexOf(this.keyword)!==-1
})
// 排序效果：判断一下是否需要排序?
//如果sortType不为0，则判断是升序？降序？
if(this.sortType){
arr.sort((p1,p2)=>{
// 如果是1: 降序；如果是2: 升序
return this.sortType===1?p2.age-p1.age:p1.age-p2.age
})
}
return arr
}
}
})
</script>