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">
<script>
const vm=new Vue(
{
el:‘#app',
data:{
name:"web",
imgurl:""
arr:[’html','css','js'] ,
obj:{
name:'dada',
age:18,
looks:'beautiful'
},
furitArr[{
name:'xiangjiao',
id:001
},
]
methods:{
handleClick(){
}
}
)
</script>
https://ke.qq.com/webcourse/index.html#cid=432878&term_id=100516896&taid=3542476141271790&vid=5285890792608696772
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设计稿
接口对接规范和工具
搭建前端架构开发页面
微信，支付宝支付
线上部署