总结vue3 的一些知识点：Vue.js 安装

Posted 2023-06-07 sdges

Vue.js 安装

1、独立版本

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。

下载 Vue.js

---

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

• Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

• unpkg ：https://unpkg.com/vue@2.6.14/dist/vue.min.js。

• cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

Staticfile CDN（国内）

<div id="app">
  <p> message </p>
</div>

unpkg（推荐）

<div id="app">
  <p> message </p>
</div>

cdnjs

<div id="app">
  <p> message </p>
</div>

---

3、NPM 方法

由于 npm 安装速度慢，本教程使用了淘宝的镜像及其命令 cnpm，安装使用介绍参照：使用淘宝 NPM 镜像。

npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g


# 升级或安装 cnpm
npm install cnpm -g

在用 Vue.js 构建大型应用时推荐使用 cnpm 安装：

# 最新稳定版
$ cnpm install vue

---

命令行工具

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。

# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author kxdang <[e-mail]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

进入项目，安装并运行：

$ cd my-project
$ cnpm install
$ cnpm run dev
 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

**注意：**Vue.js 不支持 IE8 及其以下 IE 版本。

---

Vue 项目打包

打包 Vue 项目使用以下命令：

npm run build

执行完成后，会在 Vue 项目下生成一个 dist 目录，一般包含 index.html 文件及 static 目录，static 目录包含了静态文件 js、css 以及图片目录 images。

如果直接双击 index.html 打开浏览器，页面可能是空白了，想要修改下 index.html 文件中 js、css 路径即可。

例如我们打开 dist/index.html 文件看到路径是绝对路径：

<link href=/static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=/static/js/app.717bb358ddc19e181140.js></script>

我们把 js、css 路径路径修改为相对路径：

<link href=static/css/app.33da80d69744798940b135da93bc7b98.css rel=stylesheet>
<script type=text/javascript src=static/js/app.717bb358ddc19e181140.js></script>

这样直接双击 dist/index.html 文件就可以在浏览器中看到效果了。

vue.js基础知识总结

初始化一个项目

• npm init -y

安装一些依赖

• npm install 名称 --save

• 例如 npm install vue axios bootstrap --save

• --save 表示开发和上线都要用

• --save dev 表示开始时候用，上线丢掉

vue总结

1.指令

• v-show 切换显示隐藏，频繁显示使用

• v-if 根据条件语句可以显示隐藏，不频繁显示隐藏使用

• v-else 前面有v-if 配合使用，如果前面v-if不成立情况下

• v-model 双向数据绑定的关键所在，视图变化

• v-cloak 防止闪烁css中定义一下[v-cloak]{display:none}

• v-once 控制绑定的内容不会再次被监测变化通常是配合v-model使用

• v-html 解析数据里面的标签，插入到绑定节点里面去

• v-text 绑定数据 ，和{{}}等价，但可以防闪烁

• v-for 循环 语法- 不带索引写法 item in arr 语法二 带索引写法 (item,index) in arr v-for可以嵌套

• v-on 用于监听dom事件 ，简写@

• v-bind 用于绑定属性 ，简写:

• v-style 写内嵌样式，基本没有什么作用

阻止冒泡

• e.cancelBubble=true;

• e.stopPropagation();

• @click.stop

修饰符

• 时间后面可以加一些修饰符号

• @click.stop 阻止冒泡

• @click.capture 时间捕获，先捕获到目标再冒泡

• @click.self 只有在自己身上点击才会触发函数，其他冒泡，会跳过这个函数

• @click.prevent 阻止默认事件，例如a标签点击跳转，加上这个@click.prevent，就阻止了默认属性href跳转了

ref="wo" 给节点绑定一个标识

• 后期调用绑定的标识

  • this.$refs.wo

创建实例之后，再添加一个数据上去

• Vue.set(data,‘sex‘, ‘男‘)

2 实例化一个Vue生命周期

实例化一个Vue函数 new Vue({})

• 周期里面的属性

• el -绑定vue用的范围，id和class都可以

  • 语法1： 内部：el:"#app"或el:".app

  • 语法2：外部：vm.$ount(‘‘#app‘)

  • 语法2：其实没有必要外部挂载范围

• data:{ }

  • 绑定vue全局的数据，是一个对象

  • 语法 ： data:{ }

• created(){}

  • 实例已经创建完成之后被调用的函数

  • 通常用数据请求

• methods:{}

  • ，实例上去之后,获取真实的dom元素,调用这个对象

  • 基本所有的方法，函数都丢在这个函数里面

• directives:{}

  • 自定义指令方法,里面写指令函数，名称可以不带v-;但是外部必须带v-

    • 指令函数里面有两个参数，第一个（ele）是当前元素，第二个(bind)是当前元素的对象

  • 语法 directives:{auto(ele,bind){

    } }

• filters:{}

  • 过滤器,过滤管道(|)左边值的操作

  • 过滤器里面过滤方法auto

  • 第一个参数是左边要过滤的值，

  • 第二个参数是过滤方法里面传的参数

  • 语法

  • filters:{

    auto(e,prem){   
    }

    }

• computed:{}

  • 计算属性

  • 计算属性里面不支持异步编程，比如计时器呀，ajax等

    • 默认get()函数，意思就是根据别人数据，得到自己计算的数据

    • set()函数，意思是根据自己，影响别人数据，很少用

• watch:{}

  • 监控属性，返回回调函数

  • 监控的数据，必须和data里面定义是一样的

  • 默认是handler(){} 方法

  • deep:true 是深度监控，值发生变化，也能监控

• beforeDestroy(){}

  • 销毁实例的Vue

不常用的vue里面的属性

• beforeCreate(){}

  • 数据没有被挂载，方法也没有被挂载的时候

  • 基本不用

• beforeMount(){}

  • 判断有没有el属性，这时候，有模板template，就用模板，没有就用#app节点内部渲染

  • 基本不用

• beforeUpdate(){}

• 当页面数据发送变化时候，执行，前提是页面用到了这个数据

• 基本不用 computed{} 计算属性基本全部搞定

• destroyed(){}

  • 销毁vue实例，

  • 基本不用

localStorage缓存

• localStorage.setItem(‘缓存的名字‘,‘缓存的值‘);

• localStorage.getItem(‘缓存的名字‘)

• 我们平常缓存时候，将对象想变成字符串缓存JSON.stringify()

  • JSON.stringify()

    • 将一个对象变为字符串

• 然后取出缓存数据再将字符串转为json对象JSON.parse()

  • JSON.parse

    • 将一个字符串变为json对象

异步编程之一 Promise

• 解决回调地狱

• 同步请求,依次等待

• Promise 有三种状态，成功，失败，等待

• Promise 有两个参数，其实是两个函数类型

  • 第一个参数 resolve ,代表成功

  • 第二个参数 reject 代表失败

• Promise 自带then方法，

  • then 方法有两个函数

    • 第一个函数成功

    • 第二个函数失败

数组常见操作

• reverse()倒序数组

• [1,2,3,4].reverse()

  • [4,3,2,1]

• join()

• 接收一个参数,即用作分隔符的字符串,然后返回包含所有数组项的字符串

  • ["red","green","blue"].join("|")

    • red|green|blue

• pop()

  • 从数组末尾移除最后一项,减少数组的length值,然后返回移除的项

  • [1,2,3].pop()

  • [1,2]

• concat()

  • 合并数组

  • [1,2].concat([3,4])

  • [1,2,3,4]

• map 映射

  • 结果生产一个新数组，不影响原来的数组

  console.log(arr=[1,1,3].map(function(item){
        return item+1;
  }))

  • 结果[2,2,4]，不影响上一个数组

• forEach 循环

• 循环数组

• filter 过滤

• 根据条件过滤一个数组，返回过滤后的数组

 console.log([1,2,3].filter(function(item){
        if(item>1){
        return item
    }
 }))

• 结果就是[2,3],之前的[1,2,3]就不在了

• find 查找

  • 用于找出第一个符合条件的数组元素，有就返回该元素，没有就undefined

  console.log([1,2,3].find(function(item){
            if(item==1){
            return item;
               }
  }))

  • 结果找到 1

• includes 方法

  • 判断当前数组是否包含某个指定的元素，如果有true,没有false

  console.log([1,2,3].includes(1))

  • 结果true 当中包含1

• some 方法

• 判断当前数组有没有符合条件的，有就返回ture,没有就false

  console.log([1,2,3,6].some(function(item){
        if(item>1){
            return item    
        }
  }))

• 结果为true 当前有元素大于1

• every 方法

  • 判断当前数组里面是不是每一个元素符合条件，都符合返回true,有一个不符合返回false

  console.log([1,2,3].every(function(item){
           if(item>1){
               return item        
           }
  }))

  • 结果为false ，当前有元素1不大于1

  • reduce 方法

  • 累加结果，其实循环累加，=+

  • 有4个参数

    • 第一个参数 是当前元素上一次累加的值

    • 第二个参数 是当前元素

    • 第三个参数 是当前索引值

    • 第四个参数 是数组本身

  • 为了每次累加没有出现undefined,默认添加一个第一项为0

  console.log([1,2,3].reduce(prev,next,index,arr){
           return prev+next;
  })
    

  • 过程，第一次选项值为0,加上第一项的值为1

    • 0+1 //1

  • 第二次，前一个累加的值为1，加上第二项的值为2

    • 1+2 //3

  • 第三次 前面累加的值为3 ，加上第三项的值为3

    • 3+3-全部长度就是3个元素，结束，此时return 最后的结果为6

  -所以结果为6