9月19日 vue基础课程（vue2）1-13

最新推荐文章于 2023-07-26 11:52:06 发布

努力不小白

最新推荐文章于 2023-07-26 11:52:06 发布

阅读量209

点赞数

文章标签： vue.js javascript webpack

本文链接：https://blog.csdn.net/qq_45330080/article/details/126960707

版权

vue基础课程（vue2）1-13

1. Vue最新脚手架安装

vue-cli : 框架===》脚手架
基于node.js；基于webpack；

安装官网：https://cli.vuejs.org/zh/

全局安装===》最新的版本
npm install -g @vue/cli
测试安装是否成功
vue -V
返回：@vue/cli 4.5.12

创建一个项目
vue create 项目名称
进入项目文件，启动项目
npm run serve
package.json文件下的"scripts":{}里可以查看启动命令，通过返回地址打开项目
src/assets下存放静态资源,css/js/fonts/img;
src/components/下存放组件；
.vue文件
三大部分
template 盒子布局的(只能有一个节点)
script js逻辑
style css样式

2. Vue老版本脚手架安装

安装老版本vue-cli
npm install -g vue-cli
安装指定版本
npm install -g vue-cli@版本号
例如：
npm install -g vue-cli@1.1.1
查看全部版本
npm view vue-cli versions --json
下载项目
vue init webpack 项目名称

3. Vue模板语法

main.js
只要运行vue项目,main.js就会执行
public/index.html ==>src/main.js ==>src/ App.vue

vue是“数据”驱动
定义数据：

 	<script>
 	export default {
 	  data () {
 	    return {
 	        str:'123'
 	        ....
 	    }
 	  }
 	}
 	</script>

模版语法
{{ str }}
指令 (v-xxx)
v-bind:单向绑定
v-model:双向绑定
v-bind:属性名=‘数据’
v-for:列表渲染(循环）
v-if:条件渲染
简写：
:属性名=‘数据’
***指令不需要加入{{}} :title=‘数据’

4. 列表渲染和条件渲染

列表渲染(v-for)
写法：

	<ul>
        <li v-for='(item,index) in arr' :key='index'> 
            {{item}}
            {{index}}
        </li>
    </ul>

条件渲染(v-if)

	<h1 v-if='types=="张三"'>
      11111
    </h1>
    <h1 v-else-if='types=="李四"'>
     22222
    </h1>
    <h1 v-else>
      33333
    </h1>

面试题：v-if和v-for的优先级谁高？
v-for比v-if高
正常的使用上来说先v-if，再v-for

5. 小小案例

事件添加
<h1 v-on:click='方法'></h1>
简写
<h1 @click='方法'></h1>

vue-cli中的方法要添加在methods

methods:{
    deletes(){
      alert(1);
    }
}

6. v-if 和v-show区别

v-if
创建与删除的操作
v-show
显示和隐藏(display: block; display: none;)

面试题：
1. v-if是创建和删除节点、v-show是隐藏和显示节点
2. 如果用户频繁切换的状态应该用v-show
3. 如果是一刷新进入页面的状态那么v-show的性能差一点

7. v-model的使用

单向绑定：v-bind
双向绑定：v-model(单选，复选，取的是value)

8. 计算属性和面试题

计算属性是用来干什么的？
模版语法内如果添加特别复杂的逻辑，就让模版表达式比较重而且难以维护
对于任何复杂逻辑，你都应当使用计算“属性”。
计算属性写法

	computed:{
    	changeStr(){
	      return this.str.split('').reverse().join('');
	    }
	}

调用 {{ changeStr }}
***计算属性（computed）是基于它们的响应式依赖进行缓存的。

面试题：computed和methods区别【高频】
computed是有缓存的（如果计算的属性没有发生变化，则执行缓存数据）。
methods是没有缓存的 (也就是template只要render了[或者重复render]就会执行methods内所有的方法)。

9. class和style

class
对象的写法
:class='{active:false,on:true}'
数组的写法
<div :class='[activeClass,onClass]'></div>

<script>
export default {
  data () {
    return {
      activeClass:"active",
      onClass:'on',
    }
  }
}
</script>
<style>
.active{
  background: red;
}
.on{
  font-size: 50px;
}
</style>

***经常用来各种判断赋值的
:class=' currentIndex==index ? "active" : "" '
2. style
<div :style='styleClass'></div>(改变属性值时用)

    data(){
    	return {
	     	styleClass:{
	       	 	background:'blue',
	        	fontSize:'50px',
	        	color:'orange'
	      	}
     	}
	}

10. img的src路径问题

img :src 一旦是绑定的数据，那么他会类似于请求的数据了，需要从路径上查找
<img src="./assets/img/logo.png"> //目前所在src/assets/img目录
<img :src="./img/logo.png"> //public/img目录

11. Git管理vue项目

拿到项目首先要下载依赖文件
cnpm install
node_modules是根据package.json进行依赖下载的
git和vue项目配合
克隆仓库/安装vue脚手架项目/选择：合并

12. 事件处理

监听事件
v-on:事件名称=’ ’
简写:@事件名称=’ ’
vue中有哪些事件(基本和dom事件一致)
click/mouseover/keyup/…
<div class='main' @click='btn($event,"你好")' ></div>
<div class='main' @mouseover='overBtn'></div>
事件修饰符
.stop
.prevent
.capture
.self
.once
.passive
<input type="" name="" @keyup.enter='upBtn'>
<input type="" name="" @keyup.13='upBtn'>