VUE 归纳总结

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 -i -g cnpm -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/[email protected]/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;
}
}

9. 父组件如何向子组件传值，可以用props,校验
子向父传值：$emit('handle',value)

10 ref:dom对象的引用是该对象，组件的引用是组件的实例对象
$refs 获取页面元素（div)
const sqar=this.$refs.squarebox;

需求整理
熟悉UI设计稿
接口对接规范和工具
搭建前端架构开发页面
微信，支付宝支付
线上部署

猜你喜欢