首页 > 其他分享> 文章详细

VUE 归纳总结

2020-02-19 19:05:02 阅读：214 来源： 互联网

标签：总结 index arr vue Vue 归纳 cmd value 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/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;
}
}

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

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

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

标签：总结,index,arr,vue,Vue,归纳,cmd,value,VUE
来源： https://www.cnblogs.com/csj007523/p/12308363.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

VUE 归纳总结