VUE 归纳总结

原创

深圳大树 2021-07-23 11:05:50 博主文章分类：其他 ©著作权

文章标签 VUE 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者深圳大树的原创作品，请联系作者获取转载授权，否则将追究法律责任

在node_modules 目录cmd 安装 :cnpm install

获取node_modules 文件夹下面的文件；

用vue2.6+@vue/cli 4.5 安装，创建，导入，编译，发布，管理vue项目

以下是我亲自测试使用vue+element ui开发前端和遇到的坑，给出了建议，方便日后参考。

安装步骤及建议：
1.安装node.js,建议安装到非C盘；检测：node -v
2.安装npm; 检测：npm -v
3.安装cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org 以管理员身份打开cmd安装；
3.安装脚手架：cnpm install -g @vue/cli 重新以管理员身份打开cmd安装；
4.创建一个vue项目：vue create vue3-1
5.配置参数
6.也可以用界面管理项目：vue ui 启动vue项目管理器，创建项目，，导入，编译，启动，打包项目；

7，创建项目：
vuecli3.0以上：vue create 项目名称
vuecli3.0以下：vue init webpack 项目名称

8。启动项目：
vuecli3.0以上：npm run serve
vuecli3.0以下：npm run dev

9.打包项目：
npm run build

------------------------------

VEU.JS

常用特性
属性方法
组件：VSCODESETUP,VSCODE插件，vue.js
路由
VUEX
项目配置
VUE源码剖析
项目：大数据，统计平台

node是什么？
是基于CHROME V8引擎的javascript运行环境
让javascrip运行在服务端的开发平台。

node安装：www.nodejs.org/zh-cn/

npm install pagckagename
npm i -g pkgname

1.安装nodejs:www.nodejs.org/zh-cn/下载exe安装包，直接安装；
检测安装成功：cmd: node -v

2.安装cnpm：cmd: npm install -g cnpm --registry=https://registry.npm.taobao.org 从淘宝镜像下载安装，cmd命令安装
检测安装成功：cmd: cnpm -v

3.vue-cli安装：cmd:cnpm i -g @vue/cli
检测安装成功：cmd:vue --version

4.创建vue 项目：cmd: cd c:\users
进入到相应的项目文件下： cmd: vue create mi_shop //创建项目
cmd:cd mi shop //进入项目
npm run serve //运行项目
测试：http://localhost:8080
cmd:vue ui

4.1.MVVM模式解析:是前端开发架构模式，对view,viewmode的双向数据绑定。（一个数据有变更另一个也随之变化）
4.2.Vue是什么？vue.js:是一套用于构建用户界面的框架。只关注视图，支持第三方类库
4.3.Vue生态圈：声明式渲染，提供可复用的vue实例。vue-router客户端路由，vue-cli构建工具

4.4.MVVM模式的解读
4.5.VUE.JS简介，生态圈
4.6.VUE实例；
1.Vue实例的创建：var app=new Vue()
2.vue选项（el,data)
3.双大括号语法{{}},插值表达式：{{1+1}}

5.IDE：
webstorm
vscode

duyi.ke.qq.com
<script src="https://cnd.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">

6.vue 指令：
6.1 v-bind=：绑定属性：
class {} []
style {} []

6.2 v-on:xxx @click="doubleclick()"事件监听

6.3v-if 能够控制元素dom的移除，添加显示与隐藏，可以写在templete上，
this.text=this.show ? "显示" : "隐藏"
v-else
v-else-if

6.5v-show:控制元素dom样式的显示与隐藏，不可以写在templete上

6.6 v-for="item in arr" arr:item,index in arr
v-for="(item,index) in arr" arr:item,index in arr
v-for="(value,key,index) in obj" obj:value,key,index
v-for num:1--max

6.7 不能通过索引的方式去更改数组，不会渲染
不能通过更改长度的方式更改数组，不会渲染
可以使用：pop,shift,unshift,splice,sort,reverse,push更改
input=value @input="handleInput'
6.8 v-model=“value” 实现数据的双向绑定
<input type="textarea" id="id" value="vue" vmodel="content"/>
6.9.checkbox checked
6.10 radio checked
6.11 select

6.12 watch:监听器
6.13 computed:计算属性，当设计到的值更改是执行

7. 优先级： data > methods > computed

8. 全局组件：
Vue.component('hellowold',{
data:{
<span>hello world<span/>
}
})
局部组件：定义在vue实例上的
methods:{
handleInput(e){
this.vlaue=e.target.value;
}
}