条件渲染:

????v-if

????v-else,v-else-if

????v-show

计算属性 : computed

侦听器 : watch

使用场景 : watch(异步场景) . computed (数据联动)

计算属性:computed

侦听器：watch

使用场景：

watch:通常监听一个变量或者一个常量的变化，这个变量可能是一个单一的变量，也可能是一个数组。

computed:可以监听很多个变量，变量一定是在vue实例中。

chrome浏览器vue.js调试环境插件下载网址:

https://chrome-extension-downloader.com/

开发环境。。。

Vue2.x框架常用知识点（模板语法、条件渲染、列表渲染等）

Vue2.x核心技术（vue-router、vuex）

vue.js的特点：

1. 易用性（对初学者友好，易上手，有大量的学习资料）

2. 灵活性（生态丰富，市场上有大量成熟、稳定的基于vue.js的ui框架，常用组件，拿来即用，实现快速开发）

3. 高效性（体积小，只有几十k；基于虚拟dom，一种可以预先通过JavaScript进行各种预算，把最终的dom操作计算出来并优化的技术；双向数据绑定：让开发者不再操作dom对象，把更多的精力放在业务逻辑上。）
   

对比其他同类型框架（angular、react）：

1. 更轻量

2. 更容易上手

vue 整体知识框架

computed中的变量引用的变量发生变化会重新计算

chrome扩展程序下载网址

computed特性

是计算值

应用：就是简化template里面{{}}计算和处理props或$emit的传值

具有缓存性，页面重新渲染值不变化，计算属性会立即返回之前的计算结果，而不必再次执行函数

watch特性

是观察的动作

应用：监听props,$emit或本组件的值执行异步操作

无缓存性，页面重新渲染时值不变化也会执行

看了一会，大家写的有点糙，实操后简单整理了一下nvm安装：

nvm安装：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash? ?// 下载镜像

vim .bash_profile? ? //文件配置? 没装vim的执行命令： yum install vim?

写入： export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

source .bash_profile? ?//刷新配置文件

集成场景：

? 单页面、多页面引入Vue.js

? 复杂单页面应用vue cli工具

开发工作流：

? 需求调研(确定需求)

? 交互设计、逻辑设计、接口设计

? 代码实现、测试运行、线上部署

代码管理工具：Git

? 创建项目：git clone, git init

? 创建分支，推送分支，合并分支

? 删除分支，回退版本

调试：

Chrome的Vue插件

输出：console.log

阻塞：alert()

断点：debugger

vm实例, window对象绑定

单向数据流：Actions, State, View

多个视图依赖于同一状态：菜单导航

来自不同视图的行为需要变更同一状态：评论弹幕

Vuex：为Vue.js开发的状态管理模式，组件状态集中管理，组件状态改变遵循统一的规则

store.js

import?Vue?from?'vue'
inport?Vuex?from?'vuex'
Vue.use(Vuex)
export?default?new?Vuex.Store({??
??state:?{
????count:?0
??},
??mutations:?{
????increase(){
??????this.state.coount++
????}
??},
??actions:?{??}??
})

组件中使用

import?store?form?'@/store'
export?default{
??name:?'about',
??store,
??data(){
????return?{
??????num:?store.state.count
????}
??},
??methods:?{
????add(){
??????store.commit('increase')
????}
??}
}

组件化的问题：

组件状态管理：vuex

多组件的混合使用，多页面，复杂业务：vue-router

组件间的传参、消息、事件管理：props, emit/on, bus

版本要求

node>8, npm>6

npm升级到最新版本：npm install -g npm@latest

安装vue-cli

npm install -g @vue/cli

项目创建（项目名称可以小写字母、-、_）

1、vue create hello-world

2、vue ui

运行项目：切换到项目根目录，npm run serve

计算属性：computed(多个变更)

侦听器：watch(单一变更或数组)

使用场景：watch(异步), computed(数据联动)

两者都是监听本实例的变量

vue-router 使用

1. App.vue 中添加router-link

2. router.js 中添加路径及模块

3. 添加对应的.js显示模块